aspx Tutorial

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

Toolbar

Get our toolbar!

Advertize



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.

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">&nbsp;</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)

Protected by Copyscape Online Plagiarism Tool

Comments (9) -

Search Engine Optimization Top Ranking
Search Engine Optimization Top Ranking Australia
8/23/2012 7:02:24 AM #

Toprankseo.com.au, <a href="http://www.toprankseo.com.au/">search engine</a> optimisation company uses well tested methods to bring your websites in top ranking in very affordable price. In Sydney we are among the best companies who work with highly experienced and qualified employees.

Search Engine Optimization Top Ranking
Search Engine Optimization Top Ranking Australia
8/23/2012 7:02:31 AM #

Toprankseo.com.au, <a href="http://www.toprankseo.com.au/">search engine</a> optimisation company uses well tested methods to bring your websites in top ranking in very affordable price. In Sydney we are among the best companies who work with highly experienced and qualified employees.

jvp service centre
jvp service centre Australia
9/26/2012 7:34:40 AM #

Jvp service centre is a center to repair all electronic items. It is a service and repair center which repairs all types of brand TV, camera, microwave and many more items. We also offer extended warranty in repaired products and their parts. more info visit http://www.jvpservicecentre.com.au/services/

jvp service centre
jvp service centre Australia
9/26/2012 7:34:52 AM #

Jvp service centre is a center to repair all electronic items. It is a service and repair center which repairs all types of brand TV, camera, microwave and many more items. We also offer extended warranty in repaired products and their parts. more info visit http://www.jvpservicecentre.com.au/services/

jvp service centre
jvp service centre Australia
9/26/2012 7:35:10 AM #

Jvp service centre is a center to repair all electronic items. It is a service and repair center which repairs all types of brand TV, camera, microwave and many more items. We also offer extended warranty in repaired products and their parts. more info visit http://www.jvpservicecentre.com.au/services/

The Best Mobile Phone Deals - www.contract-mobile-phone-deal.co.uk
The Best Mobile Phone Deals - www.contract-mobile-phone-deal.co.uk United Kingdom
10/3/2012 6:29:34 AM #

Lowest cost official contract mobile phone deals UK. Free gifts & offers on Nokia, Samsung, Sony Ericsson, Blackberry, HTC, LG, Apple & Motorola smart-phones range.

Seo Link Building Service - www.technologus.com
Seo Link Building Service - www.technologus.com India
10/25/2012 12:20:27 AM #

One Way & Reciprocal SEO Expert Link Building Services providing Company to increase your presences on search engines. Link popularity Agency for UK, USA & Australia to Increase business & online search results.

sydney wide escort models
sydney wide escort models United States
10/31/2012 1:11:58 PM #

Outstanding! It is great in order to find a good post on this topic.
http://www.sydneywideescorts.com.au/swe/

as
as People's Republic of China
11/12/2012 2:15:11 AM #

[url=perfectlvreplica.com/...r-Azur-Canvas-cid-471.html] louis vuitton Damier Azur Canvas[/url]
[url=perfectlvreplica.com/...-Ebene-Canvas-cid-472.html]louis vuitton Damier Ebene Canvas[/url]
[url=perfectlvreplica.com/Monogram-Canvas-cid-482.html] louis vuitton Monogram Canvas[/url]
[url=perfectlvreplica.com/Monogram-Denim-cid-483.html]louis vuitton Monogram Denim[/url]
[url=perfectlvreplica.com/Monogram-Idylle-cid-485.html]louis vuitton Monogram Idylle[/url]
[url=perfectlvreplica.com/...m-Multicolore-cid-487.html]louis vuitton Monogram Multicolore[/url]
[url=perfectlvreplica.com/...ram-Empreinte-cid-522.html]louis vuitton Monogram Empreinte[/url]
[url=perfectlvreplica.com/Monogram-Vernis-cid-489.html]louis vuitton Monogram Vernis[/url]
[url=http://perfectlvreplica.com/Sobe-cid-492.html]louis vuitton Sobe[/url]
[url=perfectlvreplica.com/Taiga-Leather-cid-497.html]louis vuitton Taiga Leather[/url]

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5