资源描述
A1ASPNETGridview控件高效异步更新与实验转.docx
《A1ASPNETGridview控件高效异步更新与实验转.docx》由会员分享，可在线阅读，更多相关《A1ASPNETGridview控件高效异步更新与实验转.docx（33页珍藏版）》请在冰点文库上搜索。
A1ASPNETGridview控件高效异步更新与实验转
【上篇】
本文详细描述了如何使用.net的ICallbackEventHandler接口开发包括排序（sorting）,分页显示（paging）,改变页长（pagelengthchange）AJAXGridview控件，我在下面会介绍到具体编程，读者也可以在文章最后下载到所有的源码。
本例开发的Gridview控件的基本功能如下（所有操作都是异步的）:
点击列名旁边的箭头升序或者降序排列数据
翻页
改变每页显示的数目
在本例中，我们将会用到一个ASP.NET中最为强大的特性-RenderControl。
该方法能使我们方便地（在服务器端-译者注）通过HtmlTextWriter和StirngWriter对象访问到一个控件的HTML代码。
示例：
using（StringWritersw=newStringWriter（））
...{
HtmlTextWriterhtw=newHtmlTextWriter（sw）;
_grid.RenderControl（htw）;
htw.Flush（）;
stringresult=sw.ToString（）;
}我们获取到grid控件的html格式的代码并赋给一个string变量-这个工作是在绑定控件数据源之后做的。
现在，我们从开发UI代码开始一步一步完成这个示例程序:
首先，在网页的
Changepagelengthto--
DropDownListID="ddl"runat="server">
DropDownList>注意Gridview控件的RowDataBound事件已经激活了。
下一步，我们来创建一个DataTable,作为Gridview控件的数据源:
publicDataTable_sampleData
...{
get...{
DataTabledt=（DataTable）ViewState["DataTable"];
if（dt==null）
...{
dt=newDataTable（）;
dt.Columns.Add（newDataColumn（"ContactName",typeof（string）））;
dt.Columns.Add（newDataColumn（"CompanyName",typeof（string）））;
dt.Columns.Add（newDataColumn（"City",typeof（string）））;
dt.Columns.Add（newDataColumn（"Country",typeof（string）））;
dt.Rows.Add（newobject[]...{"MariaAnders","AlfredsFutterkiste","Berlin","Germany"}）;
dt.Rows.Add（newobject[]...{"AnaTrujillo","Emparedadosyhelados","MéxicoD.F.","Mexico"}）;
dt.Rows.Add（newobject[]...{"AntonioMoreno","AntonioMorenoTaquería","MéxicoD.F.","Mexico"}）;
ViewState["DataTable"]=dt;
}
returndt;
}我们使用ViewState而不是Session变量来存放DataTable.
比如,ViewState["DataTable"]=dt;
用session可以缓存整个网站的变量，ViewState就只存某个页面的。
在绑定数据的时候，我们只需要写_grid.DataSource=_sampleData即可。
下面是Gridview的4个操作方法：
排序
privatevoidsortGrid（stringArgument,stringpageLength）
...{
DataViewdv=_sampleData.DefaultView;
result="";
dv.Sort=Argument;
_grid.DataSource=dv;
_grid.PageSize=Convert.ToInt16（pageLength）;
_grid.DataBind（）;
renderGrid（_grid）;
}
翻页
privatevoidchangePage（stringArgument,stringpageLength）
...{
result="";
_grid.DataSource=_sampleData;
_grid.PageSize=Convert.ToInt16（pageLength）;
_grid.PageIndex=Convert.ToInt16（Argument）;
_grid.DataBind（）;
renderGrid（_grid）;
}
改变每页显示长度
privatevoidchangePageLength（stringArgument,stringpageLength）
...{
result="";
_grid.DataSource=_sampleData;
_grid.PageSize=Convert.ToInt16（Argument）;
_grid.DataBind（）;
renderGrid（_grid）;
//pageLengthisnotused
}
刷新Gridview
privatevoidrenderGrid（GridView_grid）
...{
using（StringWritersw=newStringWriter（））
...{
HtmlTextWriterhtw=newHtmlTextWriter（sw）;
_grid.RenderControl（htw）;
htw.Flush（）;
result=sw.ToString（）;
}
}上述4个方法的名称显示了其实现的功能，而前三个的第二个参数'pageLength'是dropdownlist控件选定的值。
我们需要另外4个方法来实现ICallbackEventHandler异步回调-两个是javascript方法（其一对服务器端回调，其二用来接收服务器端返回的值并做异步刷新）,两个是服务器端的方法（RaiseCallbackEvent和GetCallbackResult,译者注：
ICallbackEventHandler的两个接口方法，前面的用来响应客户端回调，后面的用来返回操作结果）。
JavaScript方法如下：
functionUpdateGrid（args）
...{
args=args+"$"+window.document.getElementById（'ddl'）.value;
<%=ClientScript.GetCallbackEventReference（this,"args","ShowResult",null）%>
}在页面装载完成之后，我们将在页面的源代码里面看到上面的代码编程了这个样子：
functionUpdateGrid（args）
...{
args=args+"$"+window.document.getElementById（'ddl'）.value;
WebForm_DoCallback（'__Page',args,ShowResult,null,null,false）;
}
在回调的时候，我们会触发服务器端的一个事件，因此，UpdateGrid（args）方法需要放在
JSUpdateTable（）;"/>
...
functionUpdateGrid（args）
...{
<%=ClientScript.GetCallbackEventReference（this,"args","ShowResult",null）%>;
}
使用一个DataTable作为数据源:
publicDataTable_sampleData
...{
get
...{
DataTabledt=（DataTable）Session["DataTable"];
if（dt==null）
...{
dt=newDataTable（）;
dt.Columns.Add（newDataColumn（"ContactName",typeof（string）））;
dt.Columns.Add（newDataColumn（"CompanyName",typeof（string）））;
dt.Columns.Add（newDataColumn（"City",typeof（string）））;
dt.Columns.Add（newDataColumn（"Country",typeof（string）））;
dt.Rows.Add（newobject[]...{"MariaAnders","AlfredsFutterkiste","Berlin","Germany"}）;
dt.Rows.Add（newobject[]...{"AnaTrujillo","Emparedadosyhelados","MéxicoD.F.","Mexico"}）;
dt.Rows.Add（newobject[]...{"AntonioMoreno","AntonioMorenoTaquería","MéxicoD.F.","Mexico"}）;
Session["DataTable"]=dt;
}
returndt;
}
set
...{
Session["DataTable"]=value;
}
}注意：
在这里我们使用Session而不是ViewState存放DataTable变量，因为我们需要在服务器端更新数据，如果使用ViewState的话需要对页面进行回发（postback）才行。
使用下面的代码把Datatable绑定到Gridview控件：
_grid.DataSource=_sampleData;更新的时候：
_sampleData=_tempTable,_tempTable是更新了数据之后的临时DataTable变量。
页面类继承ICallbackEventHandler接口：
publicpartialclassDefault:
System.Web.UI.Page,ICallbackEventHandler
添加RaiseCallbackEvent方法和GetCallbackResult方法:
publicvoidRaiseCallbackEvent（stringeventArgument）
...{
string[]args=eventArgument.Split（'$'）;
if（args[0]=="updateTable"）updateTable（args[1]）;
}
publicstringGetCallbackResult（）
...{
returnresult;
}result是定义在整个页面上的全局变量。
为了让数据格（cell）能够响应双击事件变成textbox或者dropdownlist,我们把Gridview和dataTable都看做一个二维数组,里面的任何数据格都同列、行相关联起来（如同row[i][j]）,每一个数据格都有一个唯一的id值同DataTable里面的数据对应起来。
RowDataBound事件实现：
protectedvoid_grid_RowDataBound（objectsender,GridViewRowEventArgse）
...{
if（e.Row.RowType==DataControlRowType.DataRow）
...{
for（inti=0;i...{
e.Row.Cells[i].Attributes.Add（"ondblclick","javascript:
MakeCellEditable（this）;"）;
e.Row.Cells[i].Attributes.Add（"id",_rowNumber+"_"+i）;
}
_rowNumber+=1;
}
}这里规定的每个数据格的id是_rowNumber+"_"+i,这样就同row[i][j]结构对应起来了，定位数据格的时候我们可以用解析函数解析id,从而或得[i]和[j]的值。
JavaScript方法MakeCellEditable:
functionMakeCellEditable（obj）
...{
if（!
window.document.getElementById（obj.id+"_input"））
...{
obj.innerHTML=""
}
window.document.getElementById（obj.id+"_input"）.focus（）;
}
接下来是得到所有的客户端已经修改的值并把他们用异步回调的方法送到服务器端去更新DataTable，Update按钮的onclick方法如下：
functionJSUpdateTable（）
...{
varddl=window.document.getElementById（'Gridview'）;
varddl1=ddl.getElementsByTagName（'input'）;
vardata="";
for（i=0;i...{
ddlId[i]=ddl1[i].id;//ddlIdisaglobalarrayinJSwewilluseitinstep9
if（i==0）data=ddl1[i].id+"|"+ddl1[i].value;
elsedata=data+"~"+ddl1[i].id+"|"+ddl1[i].value;
}
UpdateGrid（'updateTable$'+data）;
}
在服务器端的RaiseCallbackEvent方法中将调用updateTable方法：
privatevoidupdateTable（string_data）
...{
string[]_NewData=_data.Split（'~'）;
DataTable_tempTable=_sampleData;
for（inti=0;i<_NewData.Length;i++）
...{
展开阅读全文
相关搜索
升级会员 