ایجاد کنترل در سروربه صورت پویا (Dynamic) در ASP.NET با استفاده از Theme (Template) Style

در این مقاله به بررسی نحوه افزودن ایجاد کنترل در سمت سرور ASP.NET به صورت پویا می پردازیم. و همچین می آموزیم که چگونه کنترل ها را در یک سرور تگ DIV در HTML قرار دهیم.

ایجاد کنترل در سروربه صورت پویا (Dynamic) در ASP.NET با استفاده از Theme (Template) Style

میخواهیم یک پروژه با افزودن کنترل در سمت سرور در 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 ها فعال می شوند.

در شکل زیر ببینید.

 

فایل های ضمیمه