Create Dynamic ASP.NET Server Control Using C# With Theme(Template) Style On Controls ~ EDUDOTNET

Tuesday, November 4, 2014

Create Dynamic ASP.NET Server Control Using C# With Theme(Template) Style On Controls

Khumesh Kumawat 35 comments

This blog post will provide you how to Add and Create Dynamically ASP.NET Server Controls and place the controls in to an html DIV server Tag. Create your ap.net web application [project] and integrate your required theme(template).

As per your requirement create a web form and design page layout and create a conatainer div with id="myFormContainer" and div as a server control-runat="server", In this div going to add child div, label, textbox, button etc controls dynamically.

Create Dynamic ASP.NET Server Control

All controls list retrieved from "Controls" josn object (List). You can create a json file and Deserialize json object with c# class object, easily create number of controls dynamic with required attributes eg, Id, text etc.. You can also try to controls list retrieved from database table.

Code : Classes, Methods and Events

Step 1: Create basic classes

public class Control

{

public string ID { get; set; }

public string LabelText { get; set; }

}

public class ControlList

{

public List<Control> Controls { get; set; }

}

Step 2: Controls list (Get from json object or database table)

// create the div to add form elements from a controls list

string json = @"{Controls:[{ID:'UserName', LabelText:'User Name'},{ID:'EmailId', LabelText:'Email Address'},{ID:'Password', LabelText:'Password'},{ID:'Phone', LabelText:'Phone Number'}]}";

var controls = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<ControlList>(json);

Step 3: Create Method to bind controls

/// <summary>

/// Create & Add Contols to the container div

/// </summary>

/// <param name="controls"></param>

private void AddControls(ControlList controls)

{

foreach (var control in controls.Controls)

{

//Create Group Container Div

HtmlGenericControl div = new HtmlGenericControl("div");

div.Attributes.Add("class", "form-group");

// create label and add to the div

div.Controls.Add(new Label() { Text = control.LabelText, AssociatedControlID = control.ID, CssClass = "col-md-2 control-label" });

//create the div to add controls eg. textbox, checkbox etc.

HtmlGenericControl divInner = new HtmlGenericControl("div");

divInner.Attributes.Add("class", "col-md-10");

//Create TextBox

divInner.Controls.Add(new TextBox() { ID = control.ID, CssClass = "form-control" });

//Create Validator

divInner.Controls.Add(new RequiredFieldValidator() { ControlToValidate = control.ID, CssClass = "text-danger", ErrorMessage = "The user name field is required." });

div.Controls.Add(divInner);

Container.Controls.Add(div);

}

//create button with event and add to the div

var button = new Button { ID = "btnClick", Text = "Create" };

button.Click += btnClick_OnClick;

Container.Controls.Add(button);

}

Step 4: Call CreateControl() method on OnInit event

/// <summary>

/// Load Controls on OnInit event

/// </summary>

/// <param name="e"></param>

override protected void OnInit(EventArgs e)

{

// create the div to add form elements from a controls list

string json = @"{Controls:[{ID:'UserName', LabelText:'User Name'},{ID:'EmailId', LabelText:'Email Address'},{ID:'Password', LabelText:'Password'},{ID:'Phone', LabelText:'Phone Number'}]}";