Asp.net使用jQuery实现数据绑定与分页

使用jQuery来实现Gridview, Repeater等服务器端数据展示控件的数据绑定和分页。本文的关注重点是数据如何实现数据绑定。

Content

jQuery的强大和可用性使得其迅速的流行起来。微软也发布了一个补丁使得VS支持对jQuery的智能感应。由于Gridview，Repeater等控件的复杂性，使得几乎无法通过javascript在客户端对其进行赋值。但是我们又不想放弃这些控件提供的强大功能和便利性，尤其是我们已经习惯了使用这些控件来展示大量的数据。因此如果能把jQuery和Gridview结合起来使用，那应该是很爽的一件事情。

我最近比较喜欢用Repeater这个控件，所以，这里就用一个Repeater显示查询的结果。

首先在页面上定义好这个控件显示的各个字段：

  
    

   
      
   
     <
   
     asp:PlaceHolder ID
   
     =
   
     "
   
     specialRedeemPlaceHolder
   
     "
   
      runat
   
     =
   
     "
   
     server
   
     "
   
      Visible
   
     =
   
     "
   
     false
   
     "
   
     >
   
     
 
   
     <
   
     table id
   
     =
   
     "
   
     specialRedeemInfo
   
     "
   
     >
   
     
 
   
     <
   
     caption
   
     >
   
     查询结果
   
     </
   
     caption
   
     >
   
     
 
   
     <
   
     thead
   
     >
   
     
 
   
     <
   
     tr
   
     >
   
     
 
   
     <
   
     th
   
     >
   
     奖品名称
   
     </
   
     th
   
     >
   
     
 
   
     <
   
     th
   
     >
   
     姓名
   
     </
   
     th
   
     >
   
      
 
   
     <
   
     th
   
     >
   
     美容顾问编号
   
     </
   
     th
   
     >
   
     
 
   
     <
   
     th
   
     >
   
     数量
   
     </
   
     th
   
     >
   
     
 
   
     <
   
     th
   
     >
   
     所需积分
   
     </
   
     th
   
     >
   
     
 
   
     <
   
     th
   
     >
   
     日期
   
     </
   
     th
   
     >
   
     
 
   
     <
   
     th
   
     >
   
     状态
   
     </
   
     th
   
     >
   
     
 
   
     <
   
     th
   
     ></
   
     th
   
     >
   
     
 
   
     </
   
     tr
   
     >
   
     
 
   
     </
   
     thead
   
     >
   
     
 
   
     <
   
     tbody
   
     >
   
     
 
   
     <
   
     asp:Repeater id
   
     =
   
     "
   
     rptSpecialRedeemInfo
   
     "
   
      runat
   
     =
   
     "
   
     server
   
     "
   
      EnableViewState
   
     =
   
     "
   
     false
   
     "
   
      
 onitemdatabound
   
     =
   
     "
   
     rptSpecialRedeemInfo_ItemDataBound
   
     "
   
     >
   
     
 
   
     <
   
     ItemTemplate
   
     >
   
     
 
   
     <
   
     tr 
   
     class
   
     =
   
     "
   
     item
   
     "
   
     >
   
     
 
   
     <
   
     td
   
     ><%
   
     # Eval(
   
     "
   
     PartName
   
     "
   
     ) 
   
     %></
   
     td
   
     >
   
     
 
   
     <
   
     td
   
     ><%
   
     # Eval(
   
     "
   
     ConsultantName
   
     "
   
     ) 
   
     %></
   
     td
   
     >
   
     
 
   
     <
   
     td
   
     ><%
   
     # Eval(
   
     "
   
     ConsultantID
   
     "
   
     )
   
     %></
   
     td
   
     >
   
     
 
   
     <
   
     td
   
     ><%
   
     # Eval(
   
     "
   
     Quantity
   
     "
   
     )
   
     %></
   
     td
   
     >
   
     
 
   
     <
   
     td
   
     ><%
   
     # Eval(
   
     "
   
     PointCost
   
     "
   
     )
   
     %></
   
     td
   
     >
   
     
 
   
     <
   
     td
   
     ><%
   
     # Eval(
   
     "
   
     InsertedTime
   
     "
   
     )
   
     %></
   
     td
   
     >
   
     
 
   
     <
   
     td
   
     ><%
   
     # Eval(
   
     "
   
     DisplayStatus
   
     "
   
     )
   
     %></
   
     td
   
     >
   
      
 
   
     <
   
     td
   
     ><
   
     input id
   
     =
   
     "
   
     btnProcess
   
     "
   
      type
   
     =
   
     "
   
     button
   
     "
   
      runat
   
     =
   
     "
   
     server
   
     "
   
      
   
     /></
   
     td
   
     >
   
      
 
   
     </
   
     tr
   
     >
   
      
 
   
     </
   
     ItemTemplate
   
     >
   
     
 
   
     </
   
     asp:Repeater
   
     >
   
     
 
   
     </
   
     tbody
   
     >
   
     
 
   
     </
   
     table
   
     >
   
     
 
   
     </
   
     asp:PlaceHolder
   
     >
  
    

因为实现的是AJAX的查询，因此可以设置repeater的 EnableViewState=”false”。 这个placeholder定义的是数据显示的格式，而不是显示在网页上的位置。因此需要定义一个显示查询结果的位置，这里定义一个div

        <div id="queryResult"> </div>

OK， 当客户端处理查询事件时，可以利用jQuery的load方法：

      
        

       
         $(
       
         "
       
         #queryResult
       
         "
       
         ).load(
       
         "
       
         SpecialRedeemManagement.aspx #specialRedeemInfo
       
         "
       
         ,
 { Func: 
       
         "
       
         Search
       
         "
       
         , ConsultantID: consultantId}, 
       
         //
       
         各个参数
       
         

       
          ajaxComplete); 
       
         //
       
         当查询完成时调用这个JS
      
        

服务器端可以通过Request.Params["Func"]获取各个参数。在 处理这个查询事件时，首先

        
          

         
           specialRedeemPlaceHolder.Visible 
         
           =
         
            
         
           true
         
           ; 
         
           //
         
           设置placeholder的visible=true
        
          

然后再给repeater绑定数据(太简单就不贴代码了）。（onitemdatabound此事件仍然有效)

再把这个palcecontrol写到Response流中去：

          
            

           
             StringWriter tw 
           
             =
           
              
           
             new
           
              StringWriter();

           
             //
           
              *** Simple rendering - just write the control to the text writer

           
             //
           
              *** works well for single controls without containers
           
             

           
             Html32TextWriter writer 
           
             =
           
              
           
             new
           
              Html32TextWriter(tw);

           
             this
           
             .specialRedeemPlaceHolder.RenderControl(writer);
writer.Close();

Response.Write(tw.ToString());
Response.End();
          
            

 

解释一下这句：$("#queryResult").load("SpecialRedeemManagement.aspx #specialRedeemInfo",
加上"#specialRedeemInfo”会使jQuery只获取返回的Response中id为specialRedeemInfo的控件那部分。好处就是在一个查询中，如果需要的话，可以返回多个供显示的控件流。
 
 除此之外，还有一点需要做的就是重写一个方法： 
               
 
                
               
                 

                
                  
                
                  public
                
                   
                
                  override
                
                   
                
                  void
                
                   VerifyRenderingInServerForm(Control control)
{
 
                
                  //
                
                  base.VerifyRenderingInServerForm(control);
                
                  

                
                  }
               
                 
 
               
 
 
  
 http://devilhand.javaeye.com/blog/560457