In this example, I have created a web user control called WebUserControl.ascx that had a gridview with some records. In the Default.aspx, I have used Ajax.Method to send a web user control name to a web service and web service have rendered instance of WebUserControl.ascx when button is clicked.
The purpose of an example have to demonstrate that how to load web user control dynamically using jQuery.Let’ s start.
Step 1: Open Visual Studio 2010. Create new ASP.NET 4.O Web site from File -> New -> Web Site.
Step 2: Right click the web site -> Add New Item -> Web User Control. Click Add button to create WebUserControl.ascx.
Step 3: Drag & Drop a gridview in the WebUserControl.ascx. I have created a Fruit class which will return the Fruit List and bind to gridview, WebUserControl.ascx.cs page code is given below.
C#
public partial class WebUserControl : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
GridView1.DataSource = getFruitList();
GridView1.DataBind();
}
public List<Fruit> getFruitList()
{
List<Fruit> Obj = new List<Fruit>(){
new Fruit{ Name="Apple", Price=20, Qantity=100},
new Fruit{ Name="Banana", Price=25, Qantity=1500},
new Fruit{ Name="Manago", Price=40, Qantity=400},
new Fruit{ Name="Orange", Price=60, Qantity=300},
};
return Obj;
}
public class Fruit
{
public string Name { get; set; }
public int Qantity { get; set; }
public double? Price { get; set; }
}
}
VB.NET
Partial Class WebUserControl
Inherits System.Web.UI.UserControl
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
GridView1.DataSource = getFruitList()
GridView1.DataBind()
End Sub
Public Function getFruitList() As List(Of Fruit)
Dim Obj As New List(Of Fruit)() With { _
New Fruit() With { _
.Name = "Apple", _
.Price = 20, _
.Qantity = 100 _
}, _
New Fruit() With { _
.Name = "Banana", _
.Price = 25, _
.Qantity = 1500 _
}, _
New Fruit() With { _
.Name = "Manago", _
.Price = 40, _
.Qantity = 400 _
}, _
New Fruit() With { _
.Name = "Orange", _
.Price = 60, _
.Qantity = 300 _
} _
}
Return Obj
End Function
Public Class Fruit
Public Property Name() As String
Get
Return m_Name
End Get
Set(ByVal value As String)
m_Name = value
End Set
End Property
Private m_Name As String
Public Property Qantity() As Integer
Get
Return m_Qantity
End Get
Set(ByVal value As Integer)
m_Qantity = value
End Set
End Property
Private m_Qantity As Integer
Public Property Price() As System.Nullable(Of Double)
Get
Return m_Price
End Get
Set(ByVal value As System.Nullable(Of Double))
m_Price = value
End Set
End Property
Private m_Price As System.Nullable(Of Double)
End Class
End Class
Step 4: Open your Default.aspx.cs/vb page and create a static function which will accepts the control name and pass to another static function to load the control and render it and return a string to the jQuery function from the server-side to client-side.
C#
[WebMethod]
public static string Result(string controlName)
{
return RenderControl(controlName);
}
public static string RenderControl(string controlName)
{
Page page = new Page();
UserControl userControl = (UserControl)page.LoadControl(controlName);
userControl.EnableViewState = false;
HtmlForm form = new HtmlForm();
form.Controls.Add(userControl);
page.Controls.Add(form);
StringWriter textWriter = new StringWriter();
HttpContext.Current.Server.Execute(page, textWriter, false);
return textWriter.ToString();
}
VB.NET
<WebMethod()> _
Public Shared Function Result(ByVal controlName As String) As String
Return RenderControl(controlName)
End Function
Public Shared Function RenderControl(ByVal controlName As String) As String
Dim page As New Page()
Dim userControl As UserControl = DirectCast(page.LoadControl(controlName), UserControl)
userControl.EnableViewState = False
Dim form As New HtmlForm()
form.Controls.Add(userControl)
page.Controls.Add(form)
Dim textWriter As New StringWriter()
HttpContext.Current.Server.Execute(page, textWriter, False)
Return textWriter.ToString()
End Function
Note: Add following references in the code behind of WebUserControls.ascx.cs/ascx.vb to enable StringWriter class & Web Method.
C#
using System.Web.Services;
using System.IO;
VB.NET
Imports System.IO
Imports System.Web.Services
Step 5: Now open your Default.aspx Page and add the jQuery as shown below:
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.34"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#Button1').click(function () {
$.blockUI({ message: '<h1> Processing...</h1>' });
var ControlName = "WebUserControl.ascx";
$.ajax({
type: "POST",
url: "Default.aspx/Result",
data: "{controlName:'" + ControlName + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
$.unblockUI();
$('#result').html(response.d);
},
failure: function (msg) {
$.unblockUI();
$('#result').html(msg);
}
});
});
});
</script>
Step 7: Add following code under the body content of Default.aspx page.
<p>
<input type="button" id="Button1" value="Load Control" />
<div id="result"> </div>
</p>
When the button is clicked the Ajax.Method fetch the string converted data and load into div element as shown below.
Here’s a preview of the collection List bind to gridview when web user control is loaded.
Here’s a preview of the string return to Ajax.Method from server side to client side.
Output
Download
Load Control.zip (4.65 kb)