Padam's blog

jquery and UI templating!!

jquery could be very much helpful while performing templating i.e. rendering controls. 

I've followed the following steps for doing this.

1. on document ready function of jquery, I called its ajax behaviour.

 

1. 
   
2. $(document).ready(function(){
   
3. 
   
4.     $.ajax({
   
5.         type:"POST",
   
6.         url:"test.asmx/GetListData",
   
7.         data:"{}",
   
8.         contentType:"application/json; charset=utf-8",
   
9.         dataType:"json",
   
10.         success:function(msg){
    
11. 
    
12.         $('#listData').removeClass('loading');
    
13.         $('#listData').html(msg);
    
14.     }
    
15.     });
    
16. 
    
17. });
    

 

2.  then, i created a usercontrol which contains datalist for templating.

on its code behind i wrote following code.

1.          public object Data;
   
2.         protected void Page_Load(object sender, EventArgs e)
   
3.         {
   
4.             DataList1.DataSource = Data;
   
5.             DataList1.DataBind();
   
6.         }
   

3. after that i created a webservice and passed the usercontrol path and data to ViewManager's Render method. This resembles with MVC which is booming in asp.net these days.

1.  NorthWindDataset.CategoriesDataTable dt = new NorthWindDataset.CategoriesDataTable();
   
2. 
   
3.             CategoriesTableAdapter da = new CategoriesTableAdapter();
   
4.             dt = da.GetData();
   
5. 
   
6.             if (dt.Count > 0)
   
7.             {
   
8.                 return ViewManager.RenderView("~/UserControls/listData.ascx", dt);
   
9.             }
   
10.             else
    
11.             {
    
12.                 return ViewManager.RenderView("~/UserControls/listData.ascx", null);
    
13.             }
    

Finally, I ran my code. it worked great and superfast to asp.net ajax style. Just download the sample below and judge yourself.

download source code: jqajax.zip

Published 11-03-2008 5:01 AM by Padam Raj Gurung