aspx Tutorial

NET Articles,jQuery demo, with jQuery, online tutorial,Jquery, SilverLight, Javascript,,JSON, MVC,.NET Articles,demo, Web Services,
Advertise Here


Get our toolbar!


Posted by Aamir Hasan   on Sunday, January 2, 2011 Total Views:  

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.


public partial class WebUserControl : System.Web.UI.UserControl
   protected void Page_Load(object sender, EventArgs e)
       GridView1.DataSource = getFruitList();
   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; }


Partial Class WebUserControl
   Inherits System.Web.UI.UserControl
   Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
       GridView1.DataSource = getFruitList()
   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
               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
               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)
               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.


   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();

       StringWriter textWriter = new StringWriter();
       HttpContext.Current.Server.Execute(page, textWriter, false);
       return textWriter.ToString();


   <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()

       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.


using System.Web.Services;
using System.IO;


Imports System.IO
Imports System.Web.Services

Step 5: Now open your Default.aspx Page and add the jQuery as shown below:

   <script src="" type="text/javascript"></script>
   <script type="text/javascript" src=""></script>
   <script type="text/javascript">
       $(document).ready(function () {
           $('#Button1').click(function () {
               $.blockUI({ message: '<h1> Processing...</h1>' });
               var ControlName = "WebUserControl.ascx";
                   type: "POST",
                   url: "Default.aspx/Result",
                   data: "{controlName:'" + ControlName + "'}",
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   success: function (response) {
                   failure: function (msg) {

Step 7: Add following code under the body content of Default.aspx page.

       <input type="button" id="Button1" value="Load Control" />
       <div id="result">&nbsp;</div>

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.



Load (4.65 kb)

Protected by Copyscape Online Plagiarism Tool

Add comment

  Country flag

  • Comment
  • Preview

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5