在《ASP.NET 揭秘(卷1)》中的第7章中有实现的知识,在这篇贴文中不闲述那些内容,因为我们主要把重心应放在重构上。
之前的HTML代码示例中,onclick事件写在了HTML中,现在从中移出至外部的JS。
<label>用户名</label> <span>username value</span> <a href="#" id="divElem">查看</a> 在JavaScript代码中给ajaxread方法加入了onclick事件处理: var divElem = document.getElementById(\'divElem\'); var span = document.getElementsByTagName(\'span\'); divElem.onclick = function() { span[0].innerHTML = result; return false; }其中 result 是这个方法的传值参数。
另外,还定义了一个处理回调时出错的方法:
function CallbackError(result) { alert(result); }下面是服务端程序的示例部分:
public partial class _Default : Page, ICallbackEventHandler { public void RaiseCallbackEvent(string result) { } public string GetCallbackResult() { string username = usernameValue; return username; } protected void Page_Load(object sender, EventArgs e) { string callback = Page.ClientScript.GetCallbackEventReference(this, null, "ajaxread", null, "CallbackError", true); Page.ClientScript.RegisterStartupScript(this.GetType(), "_Default", callback, true); } } 其中 usernameValue 是数据处理的变量,具体实现代码略。程序编译后,运行结果与之前用异步回传是一致的,但代码重构改为异步回调后,无论是程序可读性,还是代码精简度,都提升了不少。
我通过Firebug观察到客户端代码中的数据交互处理是文本(Text)而不是XML,这是 ASP.NET 默认的异步回调数据处理的方式吧。
在ASP.NET 服务端控件中就带有Ajax特性的功能了,如 GridView 内带了利用异步回调技术的分页功能,这样可以少写了一些代码量。
在 GridView 的属性中设置:AllowPaging="true" EnableSortingAndPagingCallbacks="true"。数据绑定在 Page_Load事件和GridView控件的OnPageIndexChanging事件中调用。这样的分页是Ajax的异步回调的了。
下面是个实际运用中简单的实例:根据下拉列表所选中项点击“查看”按钮后,显示相应的数据。默认显示所有的数据。
我在程序中设计了两个Gridview,一个显示默认的所有数据、另一个显示查询后的数据:
<span>按文章分类名称:</span> <asp:DropDownList ID="ArticleTypeDD" runat="server"> </asp:DropDownList> <asp:Button ID="SearchLB" OnClick="SearchLB_Click" Text="查看" runat="server" /> <asp:GridView ID="grdArticles" AllowPaging="true" PageSize="15" EnableSortingAndPagingCallbacks="true" OnPageIndexChanging="grdArticles_PageIndexChanging" runat="server" /> <asp:GridView ID="grdArticlesInType" AllowPaging="true" PageSize="15" EnableSortingAndPagingCallbacks="true" OnPageIndexChanging="grdArticlesInType_PageIndexChanging" runat="server" />