UpdatePanel的簡單用法（非巢狀）

changuncle發表於2017-09-03

ScriptManager和UpdatePanel控制元件聯合使用可以實現頁面區域性非同步重新整理的效果。UpdatePanel用來設定頁面中區域性非同步重新整理的區域，它必須依賴於ScriptManager，因為ScriptManager控制元件提供了客戶端指令碼生成與管理UpdatePanel的功能。

ScriptManager屬性	解釋
EnablePartialRendering	如果啟用了部分呈現且禁止了整頁更新，則為 true；否則為 false。預設值為 true。

UpdatePanel屬性	解釋
ChildrenAsTriggers	當UpdateMode屬性為Conditional時，UpdatePanel中的子控制元件的非同步回送是否會引發UpdatePanel的更新；當UpdateMode屬性為Always時，ChildrenAsTriggers必須設定為true。
RenderMode	表示UpdatePanel最終呈現的HTML元素。Block（預設）表示< div>，Inline表示< span>。
UpdateMode	表示UpdatePanel的更新模式，有兩個選項：Always和Conditional，預設值是Always。Always表示不管有沒有Trigger，其他控制元件都將更新該UpdatePanel；Conditional表示只有當前UpdatePanel的Trigger或ChildrenAsTriggers屬性為true時，當前UpdatePanel中控制元件引發的非同步回送或整頁回送，或是伺服器端呼叫Update()方法才會引發更新該UpdatePanel。

一、例項一

UpdatePanel內部控制元件引起的回發，來非同步更新當前UpdatePanel內部其他控制元件的內容。
前臺程式碼如下：

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <div>    
        <asp:DropDownList ID="ddlCity" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlCity_SelectedIndexChanged"></asp:DropDownList>
        <br />
        <asp:DropDownList ID="ddlCounty" runat="server"></asp:DropDownList>
        <br />
        使用者名稱：<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
    </div>
    </ContentTemplate>
</asp:UpdatePanel>

後臺程式碼如下：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        ddlCity.Items.Add(new ListItem("annotate", "1"));
        ddlCity.Items.Add(new ListItem("diagram", "2"));
        ddlCity.Items.Add(new ListItem("cryptography", "3"));
        ddlCity.Items.Add(new ListItem("explicit", "4")); 
        ddlCity.Items.Add(new ListItem("implicit", "5"));

        ddlCounty.Items.Add(new ListItem("allot", "1"));
        ddlCounty.Items.Add(new ListItem("require", "2"));
        ddlCounty.Items.Add(new ListItem("assign", "3"));
        ddlCounty.Items.Add(new ListItem("redundant", "4"));
        ddlCounty.Items.Add(new ListItem("mandatory", "5"));

        txtUserName.Text = "guoguo";
    }
}

protected void ddlCity_SelectedIndexChanged(object sender, EventArgs e)
{
    ddlCounty.Items.Add(new ListItem("bonus", "6"));
    txtUserName.Text += "9";
}

注意：
此時ScriptManager的EnablePartialRendering屬性應設為true（預設即為true）；
UpdatePanel的UpdateMode屬性應設為Always（預設即為Always）；
UpdatePanel的ChildAsTrigger屬性應設為true（預設即為true）；

二、例項二

UpdatePanel外部控制元件引起的回發，來非同步更新UpdatePanel內部控制元件的內容。
上面的方式能夠實現簡單地非同步區域性更新的功能，但就效能方面考慮，我們應當只將資料確實會發生變化的控制元件放到UpdatePanel中，這就可能出現引起回發的控制元件不在UpdatePanel內的情況。我們有兩種方式實現這種效果：
A、在Page_Load中用ScriptManager1.RegisterAsyncPostBackControl()註冊一下要實現非同步回發的控制元件。
B、用觸發器來實現更新特定UpdatePanel。

（所有UpdatePanel都重新整理）方法A前臺程式碼：

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <div>    
        <asp:DropDownList ID="ddlCity" runat="server" AutoPostBack="True"></asp:DropDownList>
        <br />
        使用者名稱：<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><%=DateTime.Now %>
    </div>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
    <ContentTemplate>
    <div>    
        <asp:DropDownList ID="ddlCounty" runat="server" AutoPostBack="True"></asp:DropDownList>
        <br />
        密碼：<asp:TextBox ID="txtUserPwd" runat="server"></asp:TextBox><%=DateTime.Now %>
    </div>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btnPart" runat="server" Text="區域性重新整理" OnClick="btnPart_Click" />
<asp:Button ID="btnPage" runat="server" Text="整頁重新整理" OnClick="btnPage_Click" />

（所有UpdatePanel都重新整理）方法A後臺程式碼：

protected void Page_Load(object sender, EventArgs e)
{
    ScriptManager1.RegisterAsyncPostBackControl(this.btnPart);
    if (!IsPostBack)
    {
        ddlCity.Items.Add(new ListItem("annotate", "1"));
        ddlCity.Items.Add(new ListItem("diagram", "2"));
        ddlCity.Items.Add(new ListItem("cryptography", "3"));
        ddlCity.Items.Add(new ListItem("explicit", "4"));
        ddlCity.Items.Add(new ListItem("implicit", "5"));

        ddlCounty.Items.Add(new ListItem("allot", "1"));
        ddlCounty.Items.Add(new ListItem("require", "2"));
        ddlCounty.Items.Add(new ListItem("assign", "3"));
        ddlCounty.Items.Add(new ListItem("redundant", "4"));
        ddlCounty.Items.Add(new ListItem("mandatory", "5"));

        txtUserName.Text = "guoguo";
        txtUserPwd.Text = "bala";
    }
}

protected void btnPart_Click(object sender, EventArgs e)
{
    ddlCity.Items.Add(new ListItem("bonus", "6"));
    txtUserName.Text += "9";
}

protected void btnPage_Click(object sender, EventArgs e)
{
    ddlCity.Items.Add(new ListItem("bonus", "6"));
    txtUserName.Text += "9";
}

（特定UpdatePanel重新整理）方法A前臺程式碼：
需要在btnPart控制元件的Click事件方法體的後面加入程式碼：UpdatePanel1.Update();

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
    <div>    
        <asp:DropDownList ID="ddlCity" runat="server" AutoPostBack="True"></asp:DropDownList>
        <br />
        使用者名稱：<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><%=DateTime.Now %>
    </div>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode=" Conditional">
    <ContentTemplate>
    <div>    
        <asp:DropDownList ID="ddlCounty" runat="server" AutoPostBack="True"></asp:DropDownList>
        <br />
        密碼：<asp:TextBox ID="txtUserPwd" runat="server"></asp:TextBox><%=DateTime.Now %>
    </div>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btnPart" runat="server" Text="區域性重新整理" OnClick="btnPart_Click" />
<asp:Button ID="btnPage" runat="server" Text="整頁重新整理" OnClick="btnPage_Click" />

（特定UpdatePanel重新整理）方法A後臺程式碼：

protected void Page_Load(object sender, EventArgs e)
{
    ScriptManager1.RegisterAsyncPostBackControl(this.btnPart);
}

protected void btnPart_Click(object sender, EventArgs e)
{
    ddlCity.Items.Add(new ListItem("bonus", "6"));
    txtUserName.Text += "9";
    this.UpdatePanel1.Update();
}

protected void btnPage_Click(object sender, EventArgs e)
{
    ddlCity.Items.Add(new ListItem("bonus", "6"));
    txtUserName.Text += "9";
}

注意，特定重新整理UpdatePanel1時：
UpdatePanel1、UpdatePanel2的UpdateMode設為Conditional，可實現UpdatePanel1定向重新整理；
UpdatePanel1、UpdatePanel2的UpdateMode設為Always，則所有的UpdatePanel都不能重新整理；
UpdatePanel1的UpdateMode設為Conditional，UpdatePanel2的UpdateMode設為Always，則所有的UpdatePanel都重新整理；
UpdatePanel1的UpdateMode設為Always，UpdatePanel2的UpdateMode設為Conditional，則所有的UpdatePanel都不能重新整理；

方法B前臺程式碼：
a.選中要進行區域性更新的UpdatePanel控制元件
b.在屬性頁中點選Trigger(集合)屬性右邊的小按鈕
c.在對話方塊中的成員列表中新增一個AsyncPostBackTriggers成員
d.指定AsyncPostBackTriggers成員的ControlID和EventName
e.所有UpdatePanel的UpdateMode都設為Conditional，否則四種情況的效果與上一示例相同
f.一個UpdatePanel上可以有多個觸發器，實現在不同的情況下對該UpdatePanel控制元件內容地更新

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
    <div>    
        <asp:DropDownList ID="ddlCity" runat="server" AutoPostBack="True"></asp:DropDownList>
        <br />
        使用者名稱：<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><%=DateTime.Now %>
    </div>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnPart" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
    <div>    
        <asp:DropDownList ID="ddlCounty" runat="server" AutoPostBack="True"></asp:DropDownList>
        <br />
        密碼：<asp:TextBox ID="txtUserPwd" runat="server"></asp:TextBox><%=DateTime.Now %>
    </div>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btnPart" runat="server" Text="區域性重新整理" OnClick="btnPart_Click" />
<asp:Button ID="btnPage" runat="server" Text="整頁重新整理" OnClick="btnPage_Click" />

方法B後臺程式碼：

protected void btnPart_Click(object sender, EventArgs e)
{
    ddlCity.Items.Add(new ListItem("bonus", "6"));
    txtUserName.Text += "9";
    this.UpdatePanel1.Update();
}

protected void btnPage_Click(object sender, EventArgs e)
{
    ddlCity.Items.Add(new ListItem("bonus", "6"));
    txtUserName.Text += "9";
}

三、例項三

兩個UpdatePanel控制元件，其中一個UpdatePanel內部控制元件引發兩個UpdatePanel控制元件同時重新整理。
兩個UpdatePanel的UpdateM必須是Always。
前臺程式碼：

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
    <ContentTemplate>
    <div>    
        <asp:DropDownList ID="ddlCity" runat="server" AutoPostBack="True"></asp:DropDownList>
        <br />
        使用者名稱：<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><%=DateTime.Now %>
        <br />
        <asp:Button ID="btnPart" runat="server" Text="區域性重新整理" OnClick="btnPart_Click" />
    </div>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Always">
    <ContentTemplate>
    <div>    
        <asp:DropDownList ID="ddlCounty" runat="server" AutoPostBack="True"></asp:DropDownList>
        <br />
        密碼：<asp:TextBox ID="txtUserPwd" runat="server"></asp:TextBox><%=DateTime.Now %>
    </div>
    </ContentTemplate>
</asp:UpdatePanel>

後臺程式碼：

protected void btnPart_Click(object sender, EventArgs e)
{
    ddlCity.Items.Add(new ListItem("bonus", "6"));
    txtUserName.Text += "9";
}

四、示例四

兩個UpdatePanel控制元件，其中一個UpdatePanel內部控制元件引發當前UpdatePanel內部
其他控制元件重新整理，而另一個UpdatePanel不重新整理。
兩個UpdatePanel的UpdateM必須是Conditional。
前臺程式碼：

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
    <div>    
        <asp:DropDownList ID="ddlCity" runat="server" AutoPostBack="True"></asp:DropDownList>
        <br />
        使用者名稱：<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><%=DateTime.Now %>
        <br />
        <asp:Button ID="btnPart" runat="server" Text="區域性重新整理" OnClick="btnPart_Click" />
    </div>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
    <div>    
        <asp:DropDownList ID="ddlCounty" runat="server" AutoPostBack="True"></asp:DropDownList>
        <br />
        密碼：<asp:TextBox ID="txtUserPwd" runat="server"></asp:TextBox><%=DateTime.Now %>
    </div>
    </ContentTemplate>
</asp:UpdatePanel>

後臺程式碼：

protected void btnPart_Click(object sender, EventArgs e)
{
    ddlCity.Items.Add(new ListItem("bonus", "6"));
    txtUserName.Text += "9";
}

五、例項五

兩個UpdatePanel控制元件，其中一個UpdatePanel1內部控制元件引發另一個UpdatePanel2控制元件重新整理，但本身不重新整理。
a.兩個UpdatePanel的UpdateM必須是Conditional。
b.兩個UpdatePanel的ChildrenAsTriggers必須是false
c.在UpdatePanel2中新增一個觸發器，觸發源為UpdatePanel1中btnPart的Click事件

前臺程式碼：

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
    <ContentTemplate>
    <div>    
        <asp:DropDownList ID="ddlCity" runat="server" AutoPostBack="True"></asp:DropDownList>
        <br />
        使用者名稱：<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><%=DateTime.Now %>
        <br />
        <asp:Button ID="btnPart" runat="server" Text="區域性重新整理" OnClick="btnPart_Click" />
    </div>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
    <ContentTemplate>
    <div>    
        <asp:DropDownList ID="ddlCounty" runat="server" AutoPostBack="True"></asp:DropDownList>
        <br />
        密碼：<asp:TextBox ID="txtUserPwd" runat="server"></asp:TextBox><%=DateTime.Now %>
    </div>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnPart" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

後臺程式碼：

protected void btnPart_Click(object sender, EventArgs e)
{
    //ddlCity和txtUserName都是UpdatePanel1中的控制元件
    //雖然後臺做了處理但是前臺控制元件內容不會發生變化
    //因為btnPart的Click事件只能非同步更新UpdatePanel2中的內容
    ddlCity.Items.Add(new ListItem("bonus", "6"));
    txtUserName.Text += "9";
}

六、UpdateProgress

屬性：
DynamicLayout：隱藏時是否佔位，預設值為true
DisplayAfter：延遲多少時間後顯示，單位毫秒，預設值為500
AssociatedUpdatePanelID：關聯的UpdatePanel的ID，預設為NULL

七、總結

UpdatePanel確實很有用，但是我們在使用過程中一定要注意它可能給我們帶來的問題，例如：彈出框不顯示等。使用的話確保UpdatePanel包含的內容都是自己需要更新的部分。
如果遇到了彈出框不顯示的問題請參考：http://blog.csdn.net/xiaouncle/article/details/52290451

對比SQL中簡單巢狀查詢與非巢狀查詢CF
2022-03-21
SQL巢狀
ViewPager巢狀fragment簡單使用
2018-07-11
Viewpager巢狀Fragment
最佳化兩個簡單的巢狀迴圈
2024-04-15
巢狀
python 字典和列表巢狀用法
2021-06-28
Python巢狀
Vue案例引發的「巢狀元件」通訊的簡單方式
2019-02-27
Vue巢狀元件
angular ui-router：簡單的單頁面巢狀路由的實現過程
2017-06-03
AngularUI巢狀路由
WITH的簡單用法
2010-02-24
一種非巢狀滑動衝突的解決方案
2019-02-21
巢狀
element-ui的----el-form表單校驗巢狀表單校驗(表單多層巢狀)+el-table和el-form巢狀使用表單校驗
2020-11-27
UIORM巢狀
Promise的簡單用法
2022-11-28
Promise
[非專業翻譯] Mapster - 配置巢狀對映
2021-06-26
巢狀
集合的巢狀
2017-03-13
巢狀
盒子的巢狀
2017-04-28
巢狀
集合框架-集合的巢狀遍歷（HashMap巢狀HashMap）
2017-05-01
框架巢狀HashMap
集合框架-集合的巢狀遍歷（HashMap巢狀ArrayList）
2017-05-01
框架巢狀HashMap
集合框架-集合的巢狀遍歷（ArrayList巢狀HashMap）
2017-05-01
框架巢狀HashMap
集合框架-集合的巢狀遍歷（多層巢狀）
2017-05-01
框架巢狀
iterate的巢狀使用
2004-04-22
巢狀
less巢狀
2017-11-12
巢狀
Datalist巢狀
2008-09-10
巢狀
Transformation之Subquery Un-nesting（子查詢的非巢狀）SU【六】
2015-02-27
ORM巢狀
vue elementUI 表單校驗（多層巢狀）
2019-02-22
VueUI巢狀
getComputedStyle的簡單用法
2016-10-18
javascript的this用法簡單介紹
2017-03-27
JavaScript
execute immediate的簡單用法(oracle)
2017-06-22
Oracle
android:ListView 的簡單用法
2016-01-08
AndroidView
golang flag簡單用法
2018-07-09
Golang
mysqldumpslow簡單用法
2017-05-17
MySql
html的巢狀規則
2019-02-16
HTML巢狀
解決 ViewPager 巢狀導致的 Fragment 選單錯亂
2017-10-20
Viewpager巢狀Fragment
vue路由巢狀
2020-12-18
Vue路由巢狀
angular 巢狀路由
2018-01-23
Angular巢狀路由
迴圈_巢狀
2016-10-10
巢狀
oracle巢狀表
2009-02-28
Oracle巢狀
Oracle 巢狀表
2012-05-15
Oracle巢狀
列表巢狀操作
2024-03-05
巢狀
PLSQL Language Referenc-巢狀表-巢狀表和陣列間的重要區別(正確地使用巢狀表)
2014-03-12
SQL巢狀陣列
【react】實現動態表單中巢狀動態表單
2020-07-03
React巢狀

UpdatePanel的簡單用法（非巢狀）

一、例項一

二、例項二

三、例項三

四、示例四

五、例項五

六、UpdateProgress

七、總結

相關文章