更新面板示例

Created: November-22, 2018

第 1 步：將 ScriptManager 新增到你的頁面

<asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>

第 2 步：在 ScriptManager 之後立即將 UpdatePanel 新增到你的頁面。

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate></ContentTemplate>
        </asp:UpdatePanel>

第 3 步：將內容新增到 UpdatePanels 內容模板後，你的 aspx 頁面應如下所示：

<%@ Page Language="C#" %>

<!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 runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="padding-top: 10px">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1" runat="server" Text="Panel created."></asp:Label><br />
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        </div>

    </div>
    </form>
</body>
</html>

第 4 步：將此部分新增到你的 C#頁面：

protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Refreshed at " +
        DateTime.Now.ToString();
}

第 5 步：現在執行你的應用程式。

預期結果：

每次單擊按鈕時面板內容都會更改，但整個頁面不會重新整理。預設情況下，UpdatePanel 控制元件的 ChildrenAsTriggers 屬性為 true。當此屬性設定為 true 時，如果面板中的任何控制元件導致回發，則面板內的控制元件將參與部分頁面更新。