在Web开发中，用户体验是一个重要的考量因素。为了提供流畅的用户体验，开发者经常需要实现页面的局部更新，而不是整个页面的刷新。ASP.NET2.0引入了Client Callback功能，允许开发者在不进行页面回发的情况下更新页面的特定部分。本文将介绍如何创建一个自定义的Client Callback控件，以提高Web应用程序的性能和用户体验。
在当前的项目中，面临一个需求：需要在一个页面上展示不同制造部件的分类信息，并在用户选择任何一个部件时，在同一页面上展示该部件的状态和相关数据。由于分类结构的层次性，选择了树形视图控件来展示这些部件。性能是客户的主要需求之一，因此决定使用Client Callback特性来实现这一功能。
首先，来看看自定义控件的重要代码部分。这个控件继承自WebControl，并且实现了ICallbackEventHandler接口。
public class MyCustomCallBackControl : WebControl, ICallbackEventHandler {}
控件的OnInit方法被重写，以便在这里嵌入与控件相关的回调脚本。
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
string callback = Page.ClientScript.GetCallbackEventReference(
this,
"input",
string.Concat(ID, "OnSuccess"),
"context");
Page.ClientScript.RegisterClientScriptBlock(
typeof(MyCustomCallBackControl),
ID,
string.Concat(
"function ", ID, "Callback(input, context) { ",
callback,
"; }"),
true);
}
接下来，需要实现ICallbackEventHandler接口的GetCallBackResult和RaiseCallBackEvent方法。
public event EventHandler MyCallBackEvent;
public void RaiseCallbackEvent(string eventArgument)
{
argumentParameter = eventArgument;
if (MyCallBackEvent != null)
{
MyCallBackEvent(this, EventArgs.Empty);
}
}
public string GetCallbackResult()
{
return renderedOutput;
}
现在，自定义的Client Callback控件已经准备好使用了。接下来，将探讨如何在Web页面上使用这个控件。
将控件拖放到页面上，并为其定义代码后台处理程序，即当回调控件被调用时运行的服务器端代码。
protected void CallBackControl_Perform(object sender, EventArgs e)
{
DataTable dt = RetrieveDataTable(((MyCustomControls.MyCustomCallBackControl)sender).ArgumentParameter);
gvTest.DataSource = dt;
gvTest.DataBind();
using (System.IO.StringWriter sw = new System.IO.StringWriter())
{
gvTest.RenderControl(new HtmlTextWriter(sw));
((MyCustomControls.MyCustomCallBackControl)sender).RenderedOutput = sw.ToString();
}
}
在示例中，将树节点绑定到这个回调控件上。这是通过JavaScript实现的。
tNode.NavigateUrl = "javascript:OnNodeClick('" + tNode.Value + "');";
接下来，需要定义与自定义回调控件绑定的JavaScript函数。这些函数将在上述定义的OnNodeClick方法中绑定。
function OnNodeClick(nodeID)
{
MyCustomCallBackControl1Callback(nodeID, null);
}
function MyCustomCallBackControl1OnSuccess(responseText)
{
document.getElementById("tdGridView").style.display = "block";
document.getElementById("gvTest").outerHTML = responseText;
}
现在已经完成了控件的使用。JavaScript函数的命名约定已经定义，需要相应地给出。