ajax实现datagrid假绑定

ajax实现datagrid假绑定

2008年04月10日 星期四 15:51

我原来想做一个搜索，然后呢点按钮的时候把　从数据库中查询回来的数据绑定到datagrid 后来发现在不用其它插件,ajax.dll之类的情况下基本不可能实现绑定（个人认为，有高见的朋友可以跟我讨论一下，谢谢） 然后呢自己研究一下，通过在第二个页面返回的HTML代码中查找datagrid以后的HTML放在datagrid 中也可以实现类似的功能。 1。搜索页面searching.aspx前台代码。　该页不需要后台代码 <script language=javascript> var xmlObj; var CuPage=1;    function createXML() //创建xmlhttprequest实例    {      try{xmlObj=new XMLHTTPREQUEST;}      catch(e1){   try{xmlObj=new ActiveXObject("MSXML2.XMLHTTP");}                   catch(e2){    try{xmlObj=new ActiveXObject("Microsoft.XMLHTTP");}                                 catch(e3){document.write("Failed to create XMLHTTP");}                            }               }       }    function test(temPageNum)　//button的click事件用这个:test(1)即可返回第一页的datagrid的HTML代码    {      CuPage=temPageNum;//设置当前页面码      createXML();      var username=document.getElementById("txtSearchText").value;//取搜索框的内容      if(username==""){document.getElementById("Panel1").value="Can't be null";document.getElementById("Panel1").innerHTML="";return;}//搜索空内容时      else{document.getElementById("Panel1").value="";}      url="SearchBand.aspx?ID="+username+"&Nstart="+temPageNum;//searchband.aspx是绑定datagrid的页面，并用来返回绑定好的datagrid代码      xmlObj.onreadystatechange=stateChange;      xmlObj.open("Get",url,true);      xmlObj.send(null);    }       function stateChange()　//成功返回datagrid代码时做的过滤    {      if(xmlObj.readystate<4)      {document.getElementById("Panel1").innerHTML="loading...";} //加载提示      if(xmlObj.readystate==4 && xmlObj.status==200)      {                 var temStr=xmlObj.responseText; //fetch return value取返回值         var indexno=temStr.indexOf("table"); //fetch table　//取datagrid绑定后的table代码起始点         var Rnum=temStr.substring(0,100); //fetch sum of records 　//取查询结果的总数         var Rleft=parseInt(Rnum)%5;   //fetch the last page 's record number　//每页5个结果，取最后一个页面的剩余结果。         var Rpage=(Rleft==0)?(parseInt(Rnum)/5):((parseInt(Rnum)-Rleft)/5+1); //fetch page numbers.          //算总共多少页面         if(Rnum==0)　//无数据记录         {      document.getElementById("Panel1").innerHTML="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sorry,the result is empty!";         }         else         {      temStr=temStr.substring(indexno-1);　//取table后的所有html代码      var PageNum="";      PageNum="<a class=tablerowodd>Pages:</a>";　//pagenum用来显示 Page:1 2 3 Current Page:1/3这样的类似页面元素。      for(var i=1;i<=Rpage;i++){PageNum=PageNum +"<a class=tablerowodd οnclick=test("+i+") id=lbl"+i+" >"+i+"</a>";}      PageNum=PageNum+"<a class=tablerowodd>&nbsp;&nbsp;&nbsp;&nbsp;Current page:"+CuPage+"/"+Rpage+"</a>";      document.getElementById("Panel1").innerHTML=PageNum+temStr;   //把结果显示到panel里面             }      }    }    function checkrate(a)　//这是用来点表中标题如warcraft3取它的其它列的值。并跟据该值传向不同页面    {      if(a.value=="M16"){window.location.href="Platform.aspx?Index="+a.innerHTML+"&PersonType="+a.value;}      if(a.value=="M18"){window.location.href="CheckReceipt.aspx?Index="+a.innerHTML;}      if(a.value=="NAR"){alert('Rating is NAR, Cannot continue for submission');}    } </script> 2.用来取datagrid绑定后数据的页面searchband.aspx前台代码 这是一个datagrid中的代码，其它没什么，只是把Title列绑定到grid里面的title,列index绑定到grid是的index <ASP:DATAGRID id="dtgVGList" Width="100%" Runat="server" CellSpacing="2" GridLines="None" CellPadding="0"      PageSize="5" AllowSorting="True" AutoGenerateColumns="False">      <Columns>       <asp:TemplateColumn>        <ItemTemplate>         <TABLE cellSpacing="0" borderColorDark="white" cellPadding="0" width="100%" borderColorLight="#cccccc"          border="1">          <TR>           <TD class="ListCaption" width="15%">IndexNO:</TD>           <TD class="ListCaption">            <asp:label id="Label2" runat="server">             <%# DataBinder.Eval(Container, "DataItem.INDEXNO") %> <!--绑定-->             <!--<%# Container.DataSetIndex+1 %>--></asp:label>           </TD>           <TD class="ListCaption" width="15%">Title:</TD>           <TD class="ListCaption">            <asp:hyperlink id="HyperLink1" Runat="server" οnclick="checkrate(this)" value=<%# DataBinder.Eval(Container, "DataItem.RATING") %>>             <%# DataBinder.Eval(Container, "DataItem.TITLE") %>            </asp:hyperlink> <!--一个控件绑2值，你要的值在value里面，显示的在控件的innerHtml里面-->           <TD class="ListCaption" width="15%"></TD>          </TR> 3。searchband.aspx的后台代码 　MDAI objMDAI = new MDAI();//实例化类    private void Page_Load(object sender, System.EventArgs e)    {     string temName=Request["ID"];　//取发送过的ID     int NumLow =Convert.ToInt32(Request["Nstart"]);//取页码     NumLow=(NumLow-1)*5+1;//页码转换成总行数里面的第几行。如第二页，就从第6行开始取数据     Response.Clear();     DataSet ds = new DataSet();     DataSet ds2 = new DataSet();     ds = objMDAI.GetSearchResult_Ajax(temName,NumLow,NumLow+4);　//调用存储过程，temName是标题名,NumLow是该从第几行开始取，NumLow+4是只取5行的意思。             ds2 = objMDAI.GetSearchResult(temName);//算有多少搜索结果     this.dtgVGList.DataSource=ds;　//绑定datagrid     this.dtgVGList.DataBind();             string totalnum=ds2.Tables[0].Rows.Count.ToString();     totalnum=totalnum.PadRight(100); //要返回的结果数目             Response.Write(totalnum);     Response.Flush();     // 在此处放置用户代码以初始化页面    } 4。类中方法 public DataSet GetSearchResult(string Title)    {     try     {      objCon = new OracleConnection(strCon);      objCon.Open();      OracleCommand objCmd = null;      OracleDataAdapter objOda = null;      DataSet ds = new DataSet();           sqlStr = "PKG_A.P_enquiry";       objCmd = new OracleCommand(sqlStr,objCon);       objCmd.Parameters.Add("mycs",OracleType.Cursor);       objCmd.Parameters["mycs"].Direction = ParameterDirection.Output;       objCmd.Parameters.Add("Tname",OracleType.VarChar);       objCmd.Parameters["Tname"].Value = Title;       objCmd.CommandType = CommandType.StoredProcedure;       objOda = new OracleDataAdapter(objCmd);           objOda.Fill(ds);      objOda.Dispose();      objCmd.Dispose();      objCon.Close();      objCon.Dispose();      return ds;     }     catch(Exception ex)     {      strMsg = ex.Message;      DataSet ds = new DataSet();      ds = null;      return ds;     }    } public DataSet GetSearchResult_Ajax(string Title,int Nlow,int Nup)　//只取5行数据    {     try     {      objCon = new OracleConnection(strCon);      objCon.Open();      OracleCommand objCmd = null;      OracleDataAdapter objOda = null;      DataSet ds = new DataSet();      sqlStr = "PKG_A.P_enquiry_ajax";      objCmd = new OracleCommand(sqlStr,objCon);      objCmd.Parameters.Add("mycs",OracleType.Cursor);      objCmd.Parameters["mycs"].Direction = ParameterDirection.Output;      objCmd.Parameters.Add("Tname",OracleType.VarChar);      objCmd.Parameters["Tname"].Value = Title;      objCmd.Parameters.Add("Rlow",OracleType.VarChar);      objCmd.Parameters["Rlow"].Value = Nlow;      objCmd.Parameters.Add("Rup",OracleType.VarChar);      objCmd.Parameters["Rup"].Value = Nup;      objCmd.CommandType = CommandType.StoredProcedure;      objOda = new OracleDataAdapter(objCmd);          objOda.Fill(ds);      objOda.Dispose();      objCmd.Dispose();      objCon.Close();      objCon.Dispose();      return ds;     }     catch(Exception ex)     {      strMsg = ex.Message;      DataSet ds = new DataSet();      ds = null;      return ds;     }    } 5。存储过程     procedure P_enquiry(Tname in varchar2,mycs out mytype)　//取所有结果，返后算数目　        is        begin              open mycs for select * from M_WVGCS_TITLE where TITLE like '%'||Tname||'%';        end;         procedure P_enquiry_ajax(Tname in varchar2,Rlow in int,Rup in int,mycs out mytype)　//只取5行        is        begin              open mycs for select * from (select rownum a,M_WVGCS_TITLE.* from M_WVGCS_TITLE where TITLE like '%'||Tname||'%' order by INDEXNO)b where b.a between Rlow and Rup;        end; 虽然 hyperlink控件会提示没有　onclick 事件　和value属性，但是我们一样可以设置并取值。 也可以用其它控件拉，只要能设置 一个点击事件　value值和innerHTML值即可。