EDUDOTNET

Tuesday, November 4, 2014

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

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>

35 comments:



  1. Greetings. I know this is somewhat off-topic, but I was wondering if you knew where I could get a captcha plugin for my comment form? I’m using the same blog platform like yours, and I’m having difficulty finding one? Thanks a lot.

    AWS Training in Bangalore | Amazon Web Services Training in Bangalore

    Amazon Web Services Training in Pune | Best AWS Training in Pune

    AWS Online Training | Online AWS Certification Course - Gangboard

    ReplyDelete
  2. This is quite educational arrange. It has famous breeding about what I rarity to vouch. Colossal proverb. This trumpet is a famous tone to nab to troths. Congratulations on a career well achieved. This arrange is synchronous s informative impolites festivity to pity. I appreciated what you ok extremely here 
    Click here:
    angularjs training in btm
    Click here:
    angularjs training in rajajinagar

    ReplyDelete
  3. All the points you described so beautiful. Every time i read your i blog and i am so surprised that how you can write so well.
    Blueprism training in Chennai

    Blueprism training in Bangalore

    Blueprism training in Pune

    Blueprism online training

    ReplyDelete
  4. All are saying the same thing repeatedly, but in your blog I had a chance to get some useful and unique information, I love your writing style very much, I would like to suggest your blog in my dude circle, so keep on updates.


    Data Science with Python training in chenni
    Data Science training in chennai
    Data science training in velachery
    Data science training in tambaram
    Data Science training in OMR
    Data Science training in anna nagar
    Data Science training in chennai
    Data science training in Bangalore

    ReplyDelete
  5. Thanks for the good words! Really appreciated. Great post. I’ve been commenting a lot on a few blogs recently, but I hadn’t thought about my approach until you brought it up. 


    java training in tambaram | java training in velachery

    java training in omr | oracle training in chennai

    java training in annanagar | java training in chennai

    ReplyDelete
  6. Thanks you for sharing this unique useful information content with us. Really awesome work. keep on blogging
    Devops training in velachery
    Devops training in annanagar

    ReplyDelete
  7. I really appreciate this post. I’ve been looking all over for this! Thank goodness I found it on Bing. You’ve made my day! Thx again!
    python training in pune
    python online training
    python training in OMR

    ReplyDelete
  8. Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic.
    Blueprism training institute in Chennai

    Blueprism online training

    Blue Prism Training Course in Pune

    ReplyDelete
  9. Hmm, it seems like your site ate my first comment (it was extremely long) so I guess I’ll just sum it up what I had written and say, I’m thoroughly enjoying your blog. I as well as an aspiring blog writer, but I’m still new to the whole thing. Do you have any recommendations for newbie blog writers? I’d appreciate it.

    AWS Interview Questions And Answers

    AWS Training in Bangalore | Amazon Web Services Training in Bangalore

    AWS Training in Pune | Best Amazon Web Services Training in Pune

    Amazon Web Services Training in Pune | Best AWS Training in Pune

    AWS Online Training | Online AWS Certification Course - Gangboard

    ReplyDelete
  10. Thanks for the informative article. This is one of the best resources I have found in quite some time. Nicely written and great info. I really cannot thank you enough for sharing.
    Devops training in sholinganallur
    Devops training in velachery
    Devops training in annanagar
    Devops training in tambaram

    ReplyDelete
  11. Thanks for such a great article here. I was searching for something like this for quite a long time and at last I’ve found it on your blog. It was definitely interesting for me to read  about their market situation nowadays.
    java training in chennai | java training in bangalore

    java interview questions and answers | core java interview questions and answers

    ReplyDelete
  12. Wow it is really wonderful and awesome thus it is very much useful for me to understand many concepts and helped me a lot. it is really explainable very well and i got more information from your blog.

    rpa training in velachery| rpa training in tambaram |rpa training in sholinganallur | rpa training in annanagar| rpa training in kalyannagar

    ReplyDelete
  13. Awesome article. It is so detailed and well formatted that i enjoyed reading it as well as get some new information too.
    Java training in Indira nagar | Java training in Rajaji nagar

    Java training in Marathahalli | Java training in Btm layout

    ReplyDelete
  14. Thank you for benefiting from time to focus on this kind of, I feel firmly about it and also really like comprehending far more with this particular subject matter. In case doable, when you get know-how, is it possible to thoughts modernizing your site together with far more details? It’s extremely useful to me.

    devops online training

    aws online training

    data science with python online training

    data science online training

    rpa online training

    ReplyDelete
  15. Thank you for allowing me to read it, welcome to the next in a recent article. And thanks for sharing the nice article, keep posting or updating news article.

    devops online training

    aws online training

    data science with python online training

    data science online training

    rpa online training

    ReplyDelete
  16. indeed, I’m just always astounded concerning the remarkable things served by you. Some four facts on this page are undeniably the most effective I’ve had.
    SOFTWARE TRAINING IN CHENNAI
    POWERBI TRAINING IN CHENNAI
    CCNA TRAINING IN CHENNAI
    ANDROID TRAINING IN CHENNAI

    ReplyDelete
  17. Wow, what an awesome spot to spend hours and hours! It's beautiful and I'm also surprised that you had it all to yourselves! Kindly visit us @ Best HIV Treatment in India | Top HIV Hospital in India | HIV AIDS Treatment in Mumbai
    HIV Specialist in Bangalore | HIV Positive Treatment in India | Medicine for AIDS in India

    ReplyDelete
  18. Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging.thanks a lot.
    Ai & Artificial Intelligence Course in Chennai
    PHP Training in Chennai
    Ethical Hacking Course in Chennai Blue Prism Training in Chennai
    UiPath Training in Chennai

    ReplyDelete
  19. Awesome blog. Thanks for sharing such a worthy information....
    IELTS Coaching in Pune
    IELTS Coaching in Gurgaon

    ReplyDelete
  20. Some may stag in Interviews!!! OOPS!! More than 50% of students do this in their career. Instead, do Hadoop Training in Chennai at Infycle. Those students can easily clear this Interview session because more than 5 times at INFYCLE practicing mock-interview sessions, Hence students are Getting out of their interview fear.

    ReplyDelete
  21. This comment has been removed by the author.

    ReplyDelete