Ajax实例:ASP.NET 异步回调开发重构

在《[实例]Ajax:XHR的入门》、《[实例]AJAX:ASP.NET 服务端的XML处理》中的内容是Ajax技术中最基础、较简单的程序开发了。而在实际开发中，ASP.NET 客户端异步回调技术才是王道。下面我们进行 ASP.NET 开发重构以实现异步回调。

在《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" />

下面是cs代码部分：

protected void Page_Load(object sender, EventArgs e)
{
    grdArticles.DataSource = BindData();
    grdArticles.DataBind();
    grdArticlesInType.DataSource = BindData1();
    grdArticlesInType.DataBind();
}
protected void Page_PreRender(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        ArticleTypeDD.DataSource = ArticleAccess.GetArticleTypeName();
        ArticleTypeDD.DataTextField = "ArticleTypeName";
        ArticleTypeDD.DataValueField = "ArticleTypeId";
        ArticleTypeDD.DataBind();
    }
}
protected void grdArticles_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    grdArticles.PageIndex = e.NewPageIndex;
    grdArticles.DataSource = BindData();
    grdArticles.DataBind();
}
protected void grdArticlesInType_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    grdArticlesInType.PageIndex = e.NewPageIndex;
    grdArticlesInType.DataSource = BindData1();
    grdArticlesInType.DataBind();
}
protected void SearchLB_Click(object sender, EventArgs e)
{
    grdArticles.Visible = false;
    grdArticlesInType.Visible = true;
    grdArticlesInType.DataSource = BindData1();
    grdArticlesInType.DataBind();
}

在这里，BindData()方法、BindData1()方法分别返回两个GridView控件的数据绑定的DataTable对象实例。方法具体代码略过。分页运行结果是默认的分页界面。

参考：见《ASP.NET 2.0揭秘(卷1)》第11章的实例内容。