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'}]}";
var
controls = new
System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<ControlList>(json);
AddControls(controls);
//
Method with controls list param
}
HTML
Code
<html
xmlns="http://www.w3.org/1999/xhtml">
<head
runat="server">
<title>DEMO
- Create Dynamic ASP.NET Server Control</title>
<link
href="css/Site.css"
rel="stylesheet"
/>
<link
href="css/bootstrap.min.css"
rel="stylesheet"
/>
<link
href="css/bootstrap.css"
rel="stylesheet"
/>
</head>
<body>
<div
class="container
body-content">
<form
id="form1"
runat="server">
<div>
<h3>DEMO
- Create Dynamic ASP.NET Server Control</h3>
<div
class="row">
<div
class="col-md-8">
<h4><u>User
Register</u></h4>
<section
id="Form">
<div
id="Container"
runat="server"
class="form-horizontal">
<span
class="menu-icon"><i
class="fa
fa-globe"></i></span>
</div>
</section>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
