Introduction
In this post, I am explain how to add usercontrol dynamically using JQuery in ASP.NET.Steps :
Step - 1 : Create New Project.
Go to File > New > Project > Select asp.net web forms application > Entry Application Name > Click OK.Step-2: Add a Usercontrol.
Go to Solution Explorer > Right Click on Solution Explorer > Add > New item > Select Web User Control Under Web > Enter name > Add.Step-3: Add a Webpage and Design for Add Usercontrol dynamically.
Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select web form/ web form using master page under Web > Enter page name > Add.HTML Code
- <h3>Add Usercontrol Dinamically in ASP.NET</h3>
- <div>
- <input type="button" id="AddGadgets" value="Add Weather Gadgets" />
- </div>
- <div id="UpdatePanel">
- </div>
Step-4: Write Jquery code for add Usercontrol into page dinamically.
- <script src="Scripts/jquery-1.7.1.js"></script>
- <script type="text/javascript">
- $(document).ready(function () {
- $("#AddGadgets").click(function () {
- $.ajax({
- url: "Default.aspx/AddGadGets",
- type: "POST",
- data: "",
- contentType: "application/json; charset=utf-8",
- success: OnSuccess,
- error: OnError
- });
- });
- });
- function OnSuccess(data) {
- $("#UpdatePanel").html(data.d);
- }
- function OnError() {
- $("#UpdatePanel").html("Error!");
- }
- </script>
Step-5: Write a function in code behind page for get usercontrol as Json string.
- [WebMethod]
- public static string AddGadGets()
- {
- string content = "";
- Page pg = new Page();
- UserControl ucGadgets = (UserControl)pg.LoadControl("~/UCWeatherReport.ascx");
- pg.Controls.Add(ucGadgets);
- StringWriter sw = new StringWriter();
- HttpContext.Current.Server.Execute(pg, sw, true);
- content = sw.ToString();
- return content;
- }
Step-6: Run Application.
Previous Post :
Previous Post :
