當前位置：首頁 >

Ajax系列之三：UpdatePanel

發布時間：2024/10/12 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 Ajax系列之三：UpdatePanel 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

? ? ? ? ?UpdatePanel控件也是Ajax里用得最多的控件之中的一個，UpdatePanel控件是用來局部更新網頁上的內容。網頁上要局部更新的內容必須放在UpdatePanel控件里。他必須和上一次說的ScriptManager控件一起使用。

如今來看UpdatePanel的屬性

UpdatePanel重要的屬性例如以下：

屬性	說明
ChildrenAsTriggers	當UpdateMode屬性為Conditional時，UpdatePanel中的子控件的異步回送是否會引發UpdatePanle的更新。
RenderMode	表示UpdatePanel終于呈現的HTML元素。Block（默認）表示<div>，Inline表示<span>
UpdateMode	表示UpdatePanel的更新模式，有兩個選項：Always和Conditional。Always是無論有沒有Trigger，其它控件都將更新該UpdatePanel。Conditional表示僅僅有當前UpdatePanel的Trigger。或ChildrenAsTriggers屬性為true時當前UpdatePanel中控件引發的異步回送或者整頁回送，或是服務器端調用Update()方法才會引發更新該UpdatePanel。

? ? ? ? ? ChildrenAsTriggers：當UpdateMode屬性為Conditional時，UpdatePanel中的子控件的異步回送是否會引發UpdatePanle的更新。

? ? ? ? ? ?RenderMode:表示UpdatePanel終于呈現的HTML元素。Block（默認）表示<div>。Inline表示<span>。表示UpdatePanel終于呈現的HTML元素。UpdateMode：表示UpdatePanel的更新模式。有兩個選項：Always和Conditional。Always是無論有沒有Trigger，其它控件都將更新該UpdatePanel，Conditional表示僅僅有當前UpdatePanel的Trigger，或ChildrenAsTriggers屬性為true時當前UpdatePanel中控件引發的異步回送或者整頁回送，或是服務器端調用Update()方法才會引發更新該UpdatePanel。

? ? ? ? ? Contente Template：用來定義UpdatePanel的內容
? ? ? ? ?Triggers：分別為AsyncPostBackTrigger和PostBackTrigger
? ? ? ? ? AsyncPostBackTrigge用來指定某個服務器端控件以及其將觸發的服務器端事件作為該UpdatePanel的異步更新觸發器。它須要設置的屬性有控件ID和服務端控件的事件。

? ? ? ? ? PostBackTrigger用來指定在UpdatePanel中的某個服務端控件，它所引發的回送不使用異步回送，而仍然是傳統的整頁回送。

如今我們來做一個簡單的實例：

<span style="font-size:18px;">< %@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title>Untitled Page</title><style type="text/css">body { background-attachment:fixed;background-image:url(Blue hills.jpg);}.style1{background-position:top center;}</style></head><body onload="oSpan.className='style1'" ><form id="form1" runat="server"><span style="font-size:14; width:250;" ID="oSpan"onmouseover="this.className='style2'" onmouseout="this.className='style1'"></span><div><asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager></div><asp:UpdatePanel ID="uid" runat="server"><ContentTemplate><div ><asp:Button ID="Button1" runat="server" Text="異步回送" OnClick="Button1_Click1" />??<asp:Button ID="Button2" runat="server" Text="整頁回送" OnClick="Button2_Click" /><br /><asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Width="197px"><Columns><asp:BoundField DataField="au_lname" FooterText="aaaa" HeaderText="au_lname" /></Columns></asp:GridView><br /><asp:Label ID="Label1" runat="server" Text="當前時間" Font-Bold="True" Font-Size="Large"></asp:Label></div></ContentTemplate><Triggers><asp:AsyncPostBackTrigger ControlID="Button1" /><asp:PostBackTrigger ControlID="Button2" /></Triggers></asp:UpdatePanel><div id="div1" ></div></form></body></html> </span>

里面包括了一個Triggers,里面第一個屬性AsyncPostBackTrigger指定Button1實現異步更新，而PostBackTrigger
指定Button2實現整頁更新。

.CS代碼為：

<span style="font-size:18px;"> protected void Button1_Click1(object sender, EventArgs e){SqlConnection conn = new SqlConnection("server=.;uid=sa;pwd=;database=pubs");string sql1 = "select top 5 au_lname from authors ";SqlDataAdapter myAdapter = new SqlDataAdapter(sql1, conn);DataSet ds = new DataSet();myAdapter.Fill(ds, "bieminG");//來自web service的dataset,這里隨便一個ds就能夠;this.GridView1.DataSource = ds.Tables["bieminG"].DefaultView; ;this.GridView1.DataBind(); //數據綁定}protected void Button2_Click(object sender, EventArgs e){this.Label1.Text = "11111";} </span>? ? ? ??UpdatePanel是一個非常不錯的控件，有了這個控件你能夠不會寫javascript代碼，能夠不動Ajax的機制，你就能夠說你會用Ajax了！

轉載于:https://www.cnblogs.com/mqxnongmin/p/10661153.html

總結

以上是生活随笔為你收集整理的Ajax系列之三：UpdatePanel的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：什么是按揭贷款
下一篇：意外险最多可以买几份最好咨询不同的保