创建支持 AJAX 的 Web 窗体
4.81/5 (20投票s)
创建支持 AJAX 的 Web 表单的好处以及如何实现。
创建支持 AJAX 的 Web 窗体
- AJAX 是一种与平台无关的、符合 ECMAScript 标准的技术，用于客户端代码和服务器端代码之间的通信。
- ASP.NET 包含一组用于处理 AJAX 的服务器控件和一组名为 Microsoft AJAX 库的客户端 JavaScript 文件。
- 在所有使用 ASP.NET AJAX 扩展的页面上都需要
ScriptManager控件。它管理发送到客户端的 JavaScript 文件以及服务器和客户端之间的通信。 ScriptManagerProxy控件用于与已经定义了ScriptManager控件的主页或将在包含ScriptManager控件的页面上使用的用户控件一起使用的页面。UpdatePanel控件允许您在页面中定义一个区域，该区域可以回发到服务器并接收更新，而与页面的其余部分无关。UpdateProgress控件用于向用户提供页面已启动对服务器的回调的通知。
ASP.NET AJAX 的用途和优点
- 部分页面更新
- 客户端处理
- 类似桌面的用户界面
- 进度指示、改进的性能和更高的扩展性
构建支持 AJAX 的网页
启用部分页面更新
- 打开 Visual Studio 并创建一个新的 ASP.NET 网站。
- 将 SQL Server 数据库添加到网站的 App_Data 文件夹，或者您可以添加 northwnd.mdf 数据库文件。
- 将表添加到上述添加的数据库。例如，创建一个包含“EmployeeID”和“EmployeeName”列的表“Employees”，并将条目添加到这些列中。
- 在源视图中打开 Default.aspx。从工具箱的 AJAX 扩展选项卡中将
ScriptManager控件添加到页面的正文。 - 向页面添加文本作为标题，然后是水平线。
BodyContent控件内的标记可能如下所示。 - 从工具箱的 AJAX 扩展选项卡中将 AJAX
UpdatePanel控件添加到页面。 - 切换到设计视图，并在
UpdatePanel中添加一个GridView控件，并将GridView绑定到数据库表。 - 同样，使用智能标记打开
GridView任务窗口。选中“启用分页”复选框。 - 运行应用程序并在浏览器中查看 Default.aspx 页面。单击数据页码以在数据页之间移动。请注意，只有网格被更新，而不是整个页面；这是因为
UpdatePanel控件包装了对数据的请求，并替换了网格的标记，而不是刷新整个页面。 - 接下来，在表单的顶部（在
UpdatePanel之外）添加一个部分，允许用户输入一个新的员工并将其添加到数据库中。您的标记代码可能如下所示。 - 接下来，将 Click 事件添加到步骤 11 中定义的
ButtonSave按钮 (onclick="ButtonSave_Click")。此 Click 事件将把员工姓名添加到数据库中的 Employees 表中。在此事件结束时，重新绑定GridView控件。以下代码显示了一个示例。 - Run the application and enter a row in the table. Notice that the entire page refreshes. Add behavior to the page so that the Add button triggers a partial-page update to the GridView control. To do so, add a trigger to the UpdatePanel control and connect the trigger to the ButtonEnter control. The following markup shows an example.
- Run the application again and notice that now only GridView updates when a new row is added.
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<h2>Employees</h2>
<hr />
</asp:Content>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ButtonSave" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataSourceID="SqlDataSource1"
AllowPaging="True">
<Columns>
<asp:BoundField DataField="EmployeeID"
HeaderText="Employee ID" SortExpression="Employee ID" />
<asp:BoundField DataField="EmployeeName"
HeaderText="Employee Name" SortExpression="Employee Name" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [Employee]"></asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
<div style="margin: 20px 0px 20px 40px">
Employee Name
<br />
<asp:TextBox ID="TextBoxName" runat="server" Width="200"></asp:TextBox>
<br />
<asp:Button ID="ButtonSave" runat="server"
Text="Add" Style="margin-top: 15px" OnClick="ButtonSave_Click" />
</div>
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();
}
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ButtonSave" EventName="Click" />
</Triggers>
添加进度指示器
- 在源视图中打开 Default.aspx。将
UpdateProgress控件添加到UpdatePanel。将控件添加到面板底部，紧靠ContentTemplate元素内部。 - 在
UpdateProgress控件的ProgressTemplate元素内添加文本，以通知用户服务器上正在进行处理。以下显示了一个示例标记。 - 处理速度非常快。因此，将一行代码添加到
ButtonSave_Click事件的末尾，以暂停服务器端处理。您可以简单地将线程休眠几秒钟。以下代码显示了一个示例。 - 运行应用程序，当您在
GridView控件中输入新记录时，请注意向用户显示的通知。
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<div style="margin-top: 20px; font-size: larger; color: Green">
Processing, please wait ...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
System.Threading.Thread.Sleep(2000);