ایجاد کنترل در سروربه صورت پویا (Dynamic) در ASP.NET با استفاده از Theme (Template) Style
سه شنبه 19 خرداد 1394در این مقاله به بررسی نحوه افزودن ایجاد کنترل در سمت سرور ASP.NET به صورت پویا می پردازیم. و همچین می آموزیم که چگونه کنترل ها را در یک سرور تگ DIV در HTML قرار دهیم.
میخواهیم یک پروژه با افزودن کنترل در سمت سرور در ASP.NET یا (Dynamic ASP.NET Server Control) بسازیم. برای شروع کار یک پروژه وب در ASP.NET ایجاد کنید و الگوهای (Template) موردنیاز را به برنامه اضافه کنید. بر حسب نیاز خود، یک وب فرم ایجاد کرده و صفحه نمایشی خود را طراحی کنید. یک تگ DIV که حاوی id="myFormContainer" به صفحه اضافه نمایید. یک تگ دیگر DIV که به همراه کنترل های موردنیاز به صورت پویا اضافه کنید. در این مقاله هدف اضافه کردن Component ها به صورت دستی نیست. بلکه تگ DIV فرزند به همراه Label، Textbox، Button و موارد مورد نیاز دیگر به صورت پویا به صفحه موردنظر اضافه می شوند.
ایجاد کنترل سرور ASP.NET پویا:
تمام کنترل ها از "Controls" json object (List) بازگرفته می شوند. شما می توانید یک فایل Json ایجاد کرده و اشیاء json را با اشیاء کلاس C# رمزگشایی کنید. به راحتی تعدادی کنترل پویا با صفت های موردنیاز مانند ID و Text و ... به صفحه اضافه خواهد شد.
کلاس ها، متدها و رویدادها:
مرحله 1- ایجاد کلاس اولیه
در پروژه وب ایجاد شده یک کلاس با نام controllist ایجاد کنید و کدهای زیر را به آن بیافزاید.
public class Control { public string ID { get; set; } public string LabelText { get; set; } } public class ControlList { public List<Control> Controls { get; set; } }
مرحله 2- در اینجا کنترل ها از json و یا از پایگاه داده فراخوانی می شوند.
// برای اضافه کردن عتاصر به فرم موردنظر string json = @"{Controls:[{ID:'UserName', LabelText:'نام کاربری'}, {ID:'EmailId', LabelText:'آدرس ایمیل'},{ID:'Password', LabelText:'رمز عبور'}, {ID:'Phone', LabelText:'شماره تماس'}]}"; var controls = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<ControlList>(json); CreateControls(controls);
مرحله 3- ایجاد متد برای اتصال به کنترل ها
private void CreateControls(ControlList controls) { foreach (var control in controls.Controls) { // یک تگ DIV ایجاد میکند HtmlGenericControl div = new HtmlGenericControl("div"); div.Attributes.Add("class", "form-group"); // یک Label به تگ DIV اضافه میکند. div.Controls.Add(new Label() { Text = control.LabelText, AssociatedControlID = control.ID, CssClass = "col-md-2 control-label" }); //Checkbox و textbox به تگ DIV اضافه می کند. HtmlGenericControl divInner = new HtmlGenericControl("div"); divInner.Attributes.Add("class", "col-md-10"); //با این کد در صفحه نمایشی یک Textbox ایجاد می شود divInner.Controls.Add(new TextBox() { ID = control.ID, CssClass = "form-control" }); //با این کد Validator ها فعال می شوند divInner.Controls.Add(new RequiredFieldValidator() { ControlToValidate = control.ID, CssClass = "text-danger", ErrorMessage = "لطفا نام کاربری را وارد کنید." }); div.Controls.Add(divInner); myFormContainer.Controls.Add(div); } //ایجاد Button var button = new Button { ID = "btnClick", Text = "تایید" }; button.Click += btnClick_Click; myFormContainer.Controls.Add(button); }
مرحله 4- فراخوانی متد CreateControl با رویداد Onlnit
در اینجا مشاهده می کنیم که با اجرای برنامه فرم موردنظر نمایش داده می شود.
override protected void OnInit(EventArgs e) { // برای اضافه کردن عتاصر به فرم موردنظر string json = @"{Controls:[{ID:'UserName', LabelText:'نام کاربری'}, {ID:'EmailId', LabelText:'آدرس ایمیل'},{ID:'Password', LabelText:'رمز عبور'}, {ID:'Phone', LabelText:'شماره تماس'}]}"; var controls = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<ControlList>(json); CreateControls(controls); }
خروجی حاصل از اجرای برنامه را مشاهده می کنید.
درصورتی که مقداری را در Textbox ها وارد نکنید و کلید تائید را انتخاب کنید Validator ها فعال می شوند.
در شکل زیر ببینید.
- ASP.net
- 2k بازدید
- 0 تشکر