【上篇】
本文详细描述了如何使用的ICallbackEventHandler接口开发包括排序(sorting), 分页显示(paging), 改变页长(page length change)AJAX Gridview控件, 我在下面会介绍到具体编程,读者也可以在文章最后下载到所有的源码。
本例开发的Gridview控件的基本功能如下(所有操作都是异步的):
点击列名旁边的箭头升序或者降序排列数据
翻页
改变每页显示的数目
在本例中,我们将会用到一个ASP.NET中最为强大的特性 - RenderControl。该方法能使我们方便地(在服务器端 - 译者注)通过HtmlTextWriter和StirngWriter对象访问到一个控件的HTML代码。
示例:
using (StringWriter sw = new StringWriter())
...{
HtmlTextWriter htw = new HtmlTextWriter(sw);
_grid.RenderControl(htw);
htw.Flush();
string result = sw.ToString();
}我们获取到grid控件的html格式的代码并赋给一个string变量 - 这个工作是在绑定控件数据源之后做的。
现在,我们从开发UI代码开始一步一步完成这个示例程序:
首先,在网页的<form>标签内写下如下代码,创建一个Gridview和Dropdownlist控件:
<div id="Gridview" >
<asp:GridView EnableViewState="false" runat="server" id="_grid" OnRowDataBound="_grid_RowDataBound" AllowPaging="True" >
</asp:GridView>
<br />
</div> Change page length to --
<asp:DropDownList ID="ddl" runat="server">
</asp:DropDownList>注意Gridview控件的RowDataBound事件已经激活了。
下一步,我们来创建一个DataTable, 作为Gridview控件的数据源:
public DataTable _sampleData
...{
get ...{
DataTable dt = (DataTable)ViewState["DataTable"];
if(dt == null)
...{
dt = new DataTable();
dt.Columns.Add(new DataColumn("Contact Name",typeof(string)));
gridview不显示 dt.Columns.Add(new DataColumn("Company Name", typeof(string)));
dt.Columns.Add(new DataColumn("City", typeof(string)));
dt.Columns.Add(new DataColumn("Country", typeof(string)));
dt.Rows.Add(new object[] ...{ "Maria Anders" ,"Alfreds Futterkiste","Berlin","Germany"});
dt.Rows.Add(new object[] ...{ "Ana Trujillo" ,"Emparedados y helados ","México D.
F.","Mexico"});
dt.Rows.Add(new object[] ...{ "Antonio Moreno", "Antonio Moreno Taquería", "México D.F.","Mexico" });
ViewState["DataTable"] = dt;
}
return dt;
}我们使用ViewState 而不是Session 变量来存放DataTable.
比如, ViewState["DataTable"] = dt;
用session可以缓存整个网站的变量, ViewState就只存某个页面的。在绑定数据的时候,我们只需要写_grid.DataSource = _sampleData即可。
下面是Gridview的4个操作方法:
排序
private void sortGrid(string Argument , string pageLength)
...{
DataView dv = _sampleData.DefaultView;
result = "";
dv.Sort = Argument;
_grid.DataSource = dv;
_grid.PageSize = Convert.ToInt16(pageLength);
_grid.DataBind();
renderGrid(_grid);
}
翻页
private void changePage(string Argument , string pageLength)
...{
result = "";
_grid.DataSource = _sampleData;
_grid.PageSize = Convert.ToInt16(pageLength);
_grid.PageIndex = Convert.ToInt16(Argument);
_grid.DataBind();
renderGrid(_grid);
}
改变每页显示长度
private void changePageLength(string Argument, string pageLength)
...{
result = "";
_grid.DataSource = _sampleData;
_grid.PageSize = Convert.ToInt16(Argument);
_grid.DataBind();
renderGrid(_grid);
//pageLength is not used
}
刷新Gridview
private void renderGrid(GridView _grid)
...{
using (StringWriter sw = new StringWriter())
...{
HtmlTextWriter htw = new HtmlTextWriter(sw);
_grid.RenderControl(htw);
htw.Flush();
result = sw.ToString();
}
}上述4个方法的名称显示了其实现的功能,而前三个的第二个参数'pageLength'是dropdownlist控件选定的值。
我们需要另外4个方法来实现ICallbackEventHandler异步回调 - 两个是javascript方法(其一
对服务器端回调,其二用来接收服务器端返回的值并做异步刷新), 两个是服务器端的方法( RaiseCallbackEvent 和GetCallbackResult , 译者注:ICallbackEventHandler的两个接口方法,前面的用来响应客户端回调,后面的用来返回操作结果)。
JavaScript方法如下:
function UpdateGrid(args)
...{
args = args + "$" + ElementById('ddl').value;
<%= ClientScript.GetCallbackEventReference(this,"args", "ShowResult", null) %>
}在页面装载完成之后,我们将在页面的源代码里面看到上面的代码编程了这个样子:
function UpdateGrid(args)
...{
args = args + "$" + ElementById('ddl').value;
WebForm_DoCallback('__Page',args,ShowResult,null,null,false);
}
在回调的时候,我们会触发服务器端的一个事件,因此,UpdateGrid(args)方法需要放在<form>标签之内,否则的话会发生一个JavaScript错误。我们通过Page.ClientScript.RegisterClientScriptBlock方法来注册这个JavaScipt方法,这样的话它将仅出现在<form>标签之内。
function ShowResult(eventArgument,context)
...{
ElementById('Gridview').innerHTML = eventArgument;
}这个方法将在服务器端响应客户端之后触发,它负责处理服务器端的返回值。在这里我们只是简单的用返回值替换掉innerHTML属性。innerHTML包含了需要更新的Gridview的HT
ML代码。
服务器端的代码如下:
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论