ASP.NETAJAX是一种技术,它允许在客户端和服务器端之间进行通信,而无需刷新整个页面。ASP.NET 提供了一套服务器控件,用于处理 AJAX,以及一套客户端 JavaScript 文件,称为 Microsoft AJAX 库。
要使用ASP.NETAJAX,需要在页面上添加 ScriptManager 控件,它负责管理发送到客户端的 JavaScript 文件以及服务器和客户端之间的通信。如果页面使用了母版页,或者用户控件需要使用 ScriptManager 控件,则可以使用 ScriptManagerProxy 控件。
UpdatePanel控件允许定义页面上的一个区域,该区域可以独立于页面的其他部分向服务器发送回发请求并接收更新。UpdateProgress 控件用于向用户显示页面已发起回调到服务器的通知。
ASP.NETAJAX 的使用和好处包括部分页面更新、客户端处理、类似桌面的 UI、进度指示、提高性能和更高的可扩展性。
要创建一个支持 AJAX 的网页,首先需要在 Visual Studio 中创建一个新的 ASP.NET 网站,并在网站的 App_Data 文件夹中添加 SQL Server 数据库。例如,可以创建一个名为 "Employees" 的表,包含 "EmployeeID" 和 "EmployeeName" 列,并在这些列中添加条目。
接下来,在 Default.aspx 页面的 Source 视图中添加 ScriptManager 控件。然后,在页面上添加文本作为标题,后面跟着一条水平线。
在页面上添加AJAXUpdatePanel 控件,并在 Design 视图中将 GridView 控件添加到 UpdatePanel 中,并将 GridView 绑定到数据库表。通过使用智能标记打开 GridView 的任务窗口,并选中 "Enable Paging" 复选框。
运行应用程序,并在浏览器中查看 Default.aspx 页面。点击数据页面编号以在数据页面之间移动。注意到只有网格被更新,而不是整个页面,这是因为 UpdatePanel 控件包装了数据请求并替换了网格的标记,而不是刷新整个页面。
接下来,在表单的顶部(UpdatePanel外部)添加一个部分,允许用户输入新员工并将其添加到数据库中。
在 UpdatePanel 控件中添加一个触发器,并将其连接到 ButtonEnter 控件。运行应用程序,注意到现在只有 GridView 在添加新行时更新。
在 Default.aspx 页面的 Source 视图中添加 UpdateProgress 控件到UpdatePanel。在 UpdatePanel 的底部,就在 ContentTemplate 元素内部添加该控件。
在 UpdateProgress 控件的 ProgressTemplate 元素内添加文本,以通知用户服务器上正在进行处理。
处理过程非常快,因此可以在 ButtonSave_Click 事件的末尾添加一行代码,使服务器端处理暂停几秒钟。运行应用程序,并在 GridView 控件中输入新记录时注意到通知会显示给用户。
以下是 ButtonSave_Click 事件的示例代码,用于将员工名称添加到数据库的 Employees 表中,并在事件结束时重新绑定 GridView 控件:
protected void ButtonSave_Click(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection(conStr);
string qry = "Insert into Employee(EmployeeName) Values(@employeeName)";
SqlCommand cmd = new SqlCommand(qry, con);
cmd.Parameters.AddWithValue("@employeeName", TextBoxName.Text);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
GridView1.DataBind();
}
以下是添加到 UpdatePanel 控件的触发器的示例标记:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ButtonSave" EventName="Click" />
</Triggers>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<div style="margin-top: 20px; font-size: larger; color: Green">
Processing, please wait ...
</div>
</ProgressTemplate>
</asp:UpdateProgress>