【IT168技术文档】 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对象实例。方法具体代码略过。分页运行结果是默认的分页界面。
