将ASP.NET UpdatePanel控件与数据绑定控件一起使用

将ASP.NET UpdatePanel控件与数据绑定控件一起使用2011-07-26 MSDN 通过使用部分页呈现，可在支持 AJAX 的 ASP.NET 应用程序中创建更丰富的用户体验。部分页呈现可让您无需因回发而刷新整个页面，而是可以指定仅要刷新的页面区域。结果，用户在每次回发时将不会再看到整个页面重新加载。

可使用 UpdatePanel 和 ScriptManager Web 服务器控件来启用部分页呈现。UpdatePanel 控件标识可更新的页面区域。ScriptManager 控件跟踪页面上的 UpdatePanel 控件和触发要更新的 UpdatePanel 控件的控件。UpdatePanel 控件内导致回发的控件会自动标识为更新面板的触发器。还可以指定 UpdatePanel 控件外的控件。外部触发器可以是另一个 UpdatePanel 控件的子控件。

在一个页面上使用多个 UpdatePanel 控件

对于在一个页面上可以放置的 UpdatePanel 控件的数目没有限制。因此，可以指定独立于整个页面单独刷新且相互独立的多个页面区域。

默认情况下，UpdatePanel 控件的 UpdateMode 属性设置为 Always。这意味着每当触发部分页刷新时，UpdatePanel 控件就会刷新页面，即使触发器不是针对该 UpdatePanel 控件的也是如此。若要确保 UpdatePanel 控件仅在已被触发时才刷新，可将 UpdatePanel 控件的 UpdateMode 属性设置为 Conditional。

下面的示例包括两个 UpdatePanel 控件。一个控件包含接受用户输入的 Web 控件，另一个控件显示用户输入的内容。每个 UpdatePanel 控件的 UpdateMode 属性都设置为 Conditional 。因此，如果用户单击“取消”按钮来清除输入窗体的字段，则仅刷新 UpdatePanel 控件的输入窗体。如果用户单击“ 插入”按钮以提交窗体，则两个 UpdatePanel 控件都会刷新。

<%@ Page Language="VB" %>
<%@ Import Namespace="System.Collections.Generic" %>

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
   <title>Enter New Employees</title>
   <script runat="server">
     Private EmployeeList As List（Of Employee）

     Protected Sub Page_Load（）
       If Not IsPostBack Then
         EmployeeList = New List（Of Employee）
         EmployeeList.Add（New Employee（1, "Jump", "Dan"））
         EmployeeList.Add（New Employee（2, "Kirwan", "Yvette"））
         ViewState（"EmployeeList"） = EmployeeList
       Else
         EmployeeList = CType（ViewState（"EmployeeList"）, List（Of Employee）） 
       End If

       EmployeesGridView.DataSource = EmployeeList
       EmployeesGridView.DataBind（）
     End Sub

     Protected Sub InsertButton_Click（ByVal sender As Object, ByVal e As  EventArgs）
       If String.IsNullOrEmpty（FirstNameTextBox.Text） Or _
         String.IsNullOrEmpty（LastNameTextBox.Text） Then Return

       Dim employeeID As Integer = EmployeeList（EmployeeList.Count -  1）.EmployeeID + 1

       Dim lastName As String = Server.HtmlEncode（FirstNameTextBox.Text）
       Dim firstName As String = Server.HtmlEncode（LastNameTextBox.Text） 

       FirstNameTextBox.Text = String.Empty
       LastNameTextBox.Text = String.Empty

       EmployeeList.Add（New Employee（employeeID, lastName, firstName））
       ViewState（"EmployeeList"） = EmployeeList

       EmployeesGridView.DataBind（）
       EmployeesGridView.PageIndex = EmployeesGridView.PageCount
     End Sub

     Protected Sub CancelButton_Click（ByVal sender As Object, ByVal e As  EventArgs）
       FirstNameTextBox.Text = String.Empty
       LastNameTextBox.Text = String.Empty
     End Sub

     <Serializable（）> _
     Public Class Employee
       Private _employeeID As Integer
       Private _lastName As String
       Private _firstName As String

       Public ReadOnly Property EmployeeID（） As Integer
         Get
           Return _employeeID
         End Get
       End Property

       Public ReadOnly Property LastName（） As String
         Get
           Return _lastName
         End Get
       End Property

       Public ReadOnly Property FirstName（） As String
         Get
           Return _firstName
         End Get
       End Property

       Public Sub New（ByVal employeeID As Integer, ByVal lastName As  String, ByVal firstName As String）
         _employeeID = employeeID
         _lastName = lastName
         _firstName = firstName
       End Sub
     End Class

   </script>
</head>
<body>
   <form id="form1" runat="server">
   <div>
     &nbsp;</div>
     <asp:ScriptManager ID="ScriptManager1" runat="server"  EnablePartialRendering="true" />
     <table>
       <tr>
         <td style="height: 206px" valign="top">
           <asp:UpdatePanel ID="InsertEmployeeUpdatePanel" runat="server"  UpdateMode="Conditional">
             <ContentTemplate>
              <table cellpadding="2" border="0" style="background-color:#7C6F57">
               <tr>
                <td><asp:Label ID="FirstNameLabel" runat="server"  AssociatedControlID="FirstNameTextBox"
                        Text="First Name"  ForeColor="White" /></td>
                <td><asp:TextBox runat="server" ID="FirstNameTextBox" /></td>
               </tr>
               <tr>
                <td><asp:Label ID="LastNameLabel" runat="server"  AssociatedControlID="LastNameTextBox"
                        Text="Last Name"  ForeColor="White" /></td>
                <td><asp:TextBox runat="server" ID="LastNameTextBox" /></td>
               </tr>
               <tr>
                <td></td>
                <td>
                 <asp:LinkButton ID="InsertButton" runat="server" Text="Insert"  OnClick="InsertButton_Click" ForeColor="White" />
                 <asp:LinkButton ID="Cancelbutton" runat="server" Text="Cancel"  OnClick="CancelButton_Click" ForeColor="White" />
                </td>
               </tr>
              </table>
              <asp:Label runat="server" ID="InputTimeLabel"><%=DateTime.Now % ></asp:Label>
             </ContentTemplate>
           </asp:UpdatePanel>
         </td>
         <td style="height: 206px" valign="top">
           <asp:UpdatePanel ID="EmployeesUpdatePanel" runat="server"  UpdateMode="Conditional">
             <ContentTemplate>
               <asp:GridView ID="EmployeesGridView" runat="server" BackColor="LightGoldenrodYellow"  BorderColor="Tan"
                 BorderWidth="1px" CellPadding="2" ForeColor="Black"  GridLines="None" AutoGenerateColumns="False">
                 <FooterStyle BackColor="Tan" />
                 <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
                 <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue"  HorizontalAlign="Center" />
                 <HeaderStyle BackColor="Tan" Font-Bold="True" />
                 <AlternatingRowStyle BackColor="PaleGoldenrod" />
                 <Columns>
                   <asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" />
                   <asp:BoundField DataField="LastName" HeaderText="Last Name" />
                   <asp:BoundField DataField="FirstName" HeaderText="First Name" />
                 </Columns>
                 <PagerSettings PageButtonCount="5" />
               </asp:GridView>
               <asp:Label runat="server" ID="ListTimeLabel"><%=DateTime.Now % ></asp:Label>
             </ContentTemplate>
             <Triggers>
               <asp:AsyncPostBackTrigger ControlID="InsertButton" EventName="Click" />
             </Triggers>
           </asp:UpdatePanel>
         </td>
       </tr>
     </table>
   </form>
</body>
</html>