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 :
