使用 AJAX 的带进度条的局部渲染

• 下载源代码 - 162.39 KB

引言

为了提高基于网站性能的用户体验，我们经常需要更新局部页面块，即仅回发页面的某一部分，而不是将完整的页面回发到服务器。 这种类型的页面呈现通常称为局部页面呈现，并大大提高了性能。 在本文中，我将讨论我的演示程序，这是一个联系表单，它将数据提交到服务器，而无需回发完整的网页。 在这里，我的数据库是一个简单的 XML 文件，用户在表单中输入的任何内容都将保存在 XML 文件中。

Using the Code

在演示程序中，我使用了名为“Microsoft.Web.Preview.dll”的 .dll 文件，必须将其添加到程序的 Bin 文件夹中才能获得局部页面更新进度面板的功能。 接下来是 XML 文件 (Contacts.xml)，它位于文件夹“db”中，并且包含一个 Web.config 文件，后者保护对 Contacts.xml 的访问。

在 Default.aspx 页面上，有联系表单界面的代码、一个 UpdateProgress 控件（为此我们添加了 .dll 文件）和一个用于显示提交成功的面板。 所有这些都包含在 UpdatePanel 控件中，并将属性 ChildrenAsTriggers=”true” 设置为 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 文件。 处理程序函数如下

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 显示进度条。

结束语

希望这些内容对您有所帮助。感谢您的阅读。祝您好运！

历史

• 2010 年 3 月 29 日：首次发布