在现代网络应用中，为了提高用户体验和页面加载速度，经常需要实现页面的部分更新，而不是将整个页面回传到服务器。这种页面渲染方式被称为部分页面渲染，它显著提高了性能。本文将讨论一个演示程序，该程序是一个联系表单，它能够在不提交整个网页的情况下将数据提交到服务器。在这个示例中，数据库是一个简单的XML文件，用户在表单中输入的所有数据都将保存在这个XML文件中。
在演示程序中，使用了名为'Microsoft.Web.Preview.dll'的.dll文件，该文件需要添加到程序的Bin文件夹中，以实现部分页面更新进度面板的功能。接下来是XML文件（Contacts.xml），它位于名为'db'的文件夹中，并且有一个Web.config文件稍后会阻止对Contacts.xml的访问。
在Default.aspx页面上，有联系表单界面的代码，一个UpdateProgress控件（为此添加了.dll文件）以及一个显示提交成功的面板。所有这些都包含在UpdatePanel控件中，并设置了ChildrenAsTriggers="true"属性。这意味着任何包含控件触发的事件都会异步回传到服务器。UpdateProgress控件的显示/隐藏由以下代码管理：
<script language="javascript" type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
function InitializeRequest(sender, args) {
$get('formUpdate').style.display = 'block';
}
function EndRequest(sender, args) {
$get('formUpdate').style.display = 'none';
}
</script>
在上面的代码中，formUpdate是UpdateProgress控件的ID，有两个函数，第一个在异步回传初始化时调用，第二个在调用结束时调用。
现在，将讨论代码后台页面上的代码。在提交按钮点击事件上，加载了XML文件到数据集中，然后通过添加新的数据行，联系信息已经被写入XML文件。处理函数如下：
C#
protected void btnSubmit_OnClick(object sender, EventArgs e)
{
if (Page.IsValid)
{
System.Threading.Thread.Sleep(1200);
DataSet ds = new DataSet();
ds.ReadXml(Server.MapPath("~/db/Contacts.xml"), XmlReadMode.InferSchema);
DataRow drow = ds.Tables["contact"].NewRow();
drow["name"] = txtName.Text;
drow["age"] = txtAge.Text;
drow["country"] = txtCountry.Text;
drow["phone"] = txtPhone.Text;
drow["email"] = txtEmail.Text;
drow["message"] = txtMessage.Text;
ds.Tables["contact"].Rows.Add(drow);
ds.Tables["contact"].WriteXml(Server.MapPath("~/db/Contacts.xml"));
pnlForm.Visible = false;
pnlShowSuccess.Visible = true;
}
}
首先，程序检查当前请求的页面有效性。然后线程暂停1200毫秒，这是UpdateProgress控件显示的最小时间。可以根据需要更改它。现在XML已经加载到数据集中，并且推断了模式（必须记住在XML中放置一个包含所有联系字段的空白行）。在联系表中添加了一个新的数据行（即一组<contact>节点），用户填写的所有值现在都分配给了相关字段，然后该行被添加到表中并写入XML文件。最后，使用面板显示成功消息。
然而，使用了这个Ajax启用的更新进度面板用于按钮点击事件，尽管它可以用于许多其他ASPX控件的不同事件。例如，DropDownList SelectionChanged事件，RadioButton或CheckBox CheckedChanged事件，LinkButton Click事件等。
实际的内容作为演示附加。当看到下载文件时，会很容易理解。必须记住，对于上述程序要工作，必须在XML文件中添加一个空白行。否则，数据集将无法推断想要添加联系详细信息的表的模式。
可能还对另一篇文章感兴趣，即“使用jQuery显示进度条”。