Jquery Ajax .ashx 高效分页

Jquery ，大家都熟悉的一个框架，我对Jquery正在学习中，对其影响最深的当属 它的选择器之强,ajax与服务器之间的交谈，以前的我，用惯了 UpdatePanel UpdateProgress 等控件，甚至到了滥用的程度，只是一味的追求无刷新，一边弄这 loading 图片 提示，这样貌似更美观，但是 感觉 更损失了性能， 而且有时候还破坏了网站的完整性。

但是学了Jquery之后，了解了 Jquery.ajax ,Jquery.get 等方法，从而学会了使用 webservice 和.ashx 文件，来与服务器交互。

 

这次的Jquery分页 是与 .ashx文件配合的。

建立三个.ashx，分别为PreviewHandler.ashx,PageHandler.ashx,NextHandler.ashx，分别来处理当前页，下一页，上一页的处理。

PageHandler.ashx

 

         public   void  ProcessRequest(HttpContext context)
        {
            context.Response.ContentType  =   " text/plain " ;
            IQueryable < Answer >  answer  =  xt.Answer.Take( 10 );
            StringBuilder sb  =   new  StringBuilder();
            sb.Append( " <table border='1' width='900px;'><tr><th>回答内容</th><th>回答用户名</th><th>创建时间</th></tr> " );
             foreach  (Answer a  in  answer)
            {
                sb.Append( " <tr><td> "   +  a.Answer_content  +   " </td><td> "   +  a.Answer_UserName  +   " </td><td onclick='javascript:alert( " + " aa " + " )'> "   +  a.Answer_Creatime  +   " </td></tr> " );
            }
            sb.Append( " </table> " );
            context.Response.Write(sb);
        }

 

NextHandler.ashx

 

         public   void  ProcessRequest(HttpContext context)
        {
            context.Response.ContentType  =   " text/plain " ;
             int  RowCount  =   10 ;
             int  Current  =  Convert.ToInt32(context.Request.Params[ " index " ])  +   1 ;
            IQueryable < Answer >  answer  =  xt.Answer.Skip(RowCount  *  (Current  -   1 )).Take(RowCount);
            StringBuilder sb  =   new  StringBuilder();
            sb.Append( " <table border='1' width='900px;'><tr><th>回答内容</th><th>回答用户名</th><th>创建时间</th></tr> " );
             foreach  (Answer a  in  answer)
            {
                sb.Append( " <tr><td> "   +  a.Answer_content  +   " </td><td> "   +  a.Answer_UserName  +   " </td><td> "   +  a.Answer_Creatime  +   " </td></tr> " );
            }
            sb.Append( " </table> " );
            context.Response.Write(sb);
        }

 

PreviewHandler.ashx

 

         public   void  ProcessRequest(HttpContext context)
        {
            context.Response.ContentType  =   " text/plain " ;
             int  RowCount  =   10 ;
             int  Current  =  Convert.ToInt32(context.Request.Params[ " index " ])  -   1 ;
            IQueryable < Answer >  answer  =  xt.Answer.Skip(RowCount  *  (Current  -   1 )).Take(RowCount);
            StringBuilder sb  =   new  StringBuilder();
            sb.Append( " <table border='1' width='900px;'><tr><th>回答内容</th><th>回答用户名</th><th>创建时间</th></tr> " );
             foreach  (Answer a  in  answer)
            {
                sb.Append( " <tr><td> "   +  a.Answer_content  +   " </td><td> "   +  a.Answer_UserName  +   " </td><td> "   +  a.Answer_Creatime  +   " </td></tr> " );
            }
            sb.Append( " </table> " );
            context.Response.Write(sb);
        }

 

三个文件其实代码大多类似，然后通过html或者aspx文件来调用，用Jquery.get()

 

      < div id = " lab " >
            
             < input type = " button "  onclick = " Init(); "  value = " 初始化数据 "   />
            
             < div id = " content "  style = " width:100% " >
                 
             </ div >
            
             < div id = " PagePanel " >
                  < div style = " color:Red; "  id = " PageInfo " ></ div >
                  < a href = " # "  onclick = " Preview(); " > 上一页 </ a >
                  < a href = " # "  onclick = " Next() " > 下一页 </ a >
             </ div >
             <!-- 用存储当前页码  -->
             < input type = " hidden "    class = " currIndex "   />
            
      </ div >

 

          var Init = function(){
               $. get ( " PageHandler.ashx " ,function(data){
                        document.getElementById( ' content ' ).innerHTML = data;
                     $( ' .currIndex ' ).attr( ' value ' , " 1 " );
                    document.getElementById( " PageInfo " ).innerHTML = " 当前第1页 " ;
               });
          }
          var Preview = function(){
                var current = $( ' .currIndex ' ).attr( ' value ' );
                var pre = Number(current) - 1 ;
               $. get ( " PreviewHandler.ashx " ,{index:current},function(data){
                      document.getElementById( ' content ' ).innerHTML = data;
                      $( ' .currIndex ' ).attr( ' value ' ,pre);
                    document.getElementById( " PageInfo " ).innerHTML = " 当前第 " + pre + " 页 " ;
               });
          }
          var Next = function(){
               var current = $( ' .currIndex ' ).attr( ' value ' );
                var next = Number(current) + 1 ;
               $. get ( " NextHandler.ashx " ,{index:current},function(data){
                      document.getElementById( ' content ' ).innerHTML = data;
                      $( ' .currIndex ' ).attr( ' value ' ,next);
                    document.getElementById( " PageInfo " ).innerHTML = " 当前第 " + next + " 页 " ;
               });
          }

 

调用.ashx文件生成的数据即可，点击下一页，将NextHandler.ashx文件的内容覆盖PageHandler.ashx文件内容。

结果如图：

有待解决的问题是，对这些行进行编辑，我在.ashx文件加了 一个 <tr onclick='del();'></tr>

而且在.aspx文件上也写了del 方法，但是会报错， object expected error ，这个错误，应该是找不到 del方法吧，他们的生成时间，不懂，还未解决，

谁能解决可以告诉我。。。