使用UpdatePanel控件(二)
UpdatePanel可以用來創建豐富的局部更新Web應用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一個控件,其強大之處在于不用編寫任何客戶端腳本,只要在一個頁面上添加幾個UpdatePanel控件和一個ScriptManager控件就可以自動實現局部更新。通過本文來學習一下UpdatePanel其他的一些使用方法(第二篇)。
?
主要內容
1.用編程的方法控制UpdatePanel的更新
2.UpdatePanel的嵌套使用
3.同一頁面上使用多個UpdatePanel
?
一.用編程的方法控制UpdatePanel的更新
對于UpdatePanel,我們也可以使用編程的方法來控制它的更新,可以通過ScriptManager的RegisterAsyncPostBackControl()方法注冊一個異步提交的控件,并且調用UpdatePanel的Update()方法來讓它更新。再次用我在前面的文章中用到的一個無聊的時間更新例子來看一下,有時候我覺得例子過于復雜更加不好說明白所要講的內容,如下代碼所示,注意Button1并不包含在UpdatePanel中:
?
<script?runat="server">
????void?Button1_Click(object?sender,?EventArgs?e)
????{
????????this.Label2.Text?=?DateTime.Now.ToString();
????}
</script>
<html?xmlns="http://www.w3.org/1999/xhtml">
<head?runat="server">
????<title>Refreshing?an?UpdatePanel?Programmatically</title>
</head>
<body>
????<form?id="form1"?runat="server">
????????<asp:ScriptManager?ID="ScriptManager1"?runat="server"/>
????????<div>
????????????<asp:UpdatePanel?ID="UpdatePanel1"?runat="server"?UpdateMode="Conditional">
????????????????<ContentTemplate>
????????????????????<asp:Label?ID="Label1"?runat="server"?Text="更新時間:"></asp:Label>
????????????????????<asp:Label?ID="Label2"?runat="server"?Text="Label"?ForeColor="Red"></asp:Label><br/><br/>
????????????????????
????????????????</ContentTemplate>
????????????</asp:UpdatePanel>
?????????????<asp:Button?ID="Button1"?runat="server"?Text="Button"??OnClick?=?"Button1_Click"/>
????????</div>
????</form>
</body>
</html>
這時候不用多說,肯定是整頁提交了,運行如下圖所示:
?
再次修改上面的例子,使用ScriptManager的RegisterAsyncPostBackControl()注冊Button1為一個異步提交控件,并且調用UpdatePanel的Update()方法:
<script?runat="server">
????void?Page_Load(object?sender,?EventArgs?e)
????{
????????ScriptManager1.RegisterAsyncPostBackControl(Button1);
????}
????
????void?Button1_Click(object?sender,?EventArgs?e)
????{
????????this.Label2.Text?=?DateTime.Now.ToString();
????????this.UpdatePanel1.Update();
????}
</script>
<html?xmlns="http://www.w3.org/1999/xhtml">
<head?runat="server">
????<title>Refreshing?an?UpdatePanel?Programmatically</title>
</head>
<body>
????<form?id="form1"?runat="server">
????????<asp:ScriptManager?ID="ScriptManager1"?runat="server"/>
????????<div>
????????????<asp:UpdatePanel?ID="UpdatePanel1"?runat="server"?UpdateMode="Conditional">
????????????????<ContentTemplate>
????????????????????<asp:Label?ID="Label1"?runat="server"?Text="更新時間:"></asp:Label>
????????????????????<asp:Label?ID="Label2"?runat="server"?Text="Label"?ForeColor="Red"></asp:Label><br/><br/>
????????????????????
????????????????</ContentTemplate>
????????????</asp:UpdatePanel>
?????????????<asp:Button?ID="Button1"?runat="server"?Text="Button"??OnClick?=?"Button1_Click"/>
????????</div>
????</form>
</body>
</html>
這時候可以看到,已經是異步提交了:
?
二.?UpdatePanel的嵌套使用
UpdatePanel還可以嵌套使用,即在一個UpdatePanel的ContentTemplate中還可以放入另一個UpdatePanel。當最外面的UpdatePanel被觸發更新時,它里面的子UpdatePanel也隨著更新,里面的UpdatePanel觸發更新時,只更新它自己,而不會更新外層的UpdatePanel。看下面的例子:
<script?runat="server">
</script>
?
<html?xmlns="http://www.w3.org/1999/xhtml">
<head?id="Head1"?runat="server">
????<title>UpdatePanelUpdateMode?Example</title>
????<style?type="text/css">
????div.NestedPanel
????{
??????position:?relative;
??????margin:?2%?5%?2%?5%;
????}
????</style>
</head>
<body>
????<form?id="form1"?runat="server">
????????<div>
????????????<asp:ScriptManager?ID="ScriptManager"?
???????????????????????????????runat="server"?/>
????????????<asp:UpdatePanel?ID="OuterPanel"?
?????????????????????????????UpdateMode="Conditional"?
?????????????????????????????runat="server">
????????????????<ContentTemplate>
????????????????????<div>
????????????????????????<fieldset>
????????????????????????????<legend>Outer?Panel?</legend>
????????????????????????????<br?/>
????????????????????????????<asp:Button?ID="OPButton1"?
????????????????????????????????????????Text="Outer?Panel?Button"?
????????????????????????????????????????runat="server"?/>
????????????????????????????<br?/>
????????????????????????????Last?updated?on
????????????????????????????<%=?DateTime.Now.ToString()?%>
????????????????????????????<br?/>
????????????????????????????<br?/>
????????????????????????????<asp:UpdatePanel?ID="NestedPanel1"?
???????????????????????????????????????????????UpdateMode="Conditional"
???????????????????????????????????????????????runat="server">
????????????????????????????????<ContentTemplate>
????????????????????????????????????<div?class="NestedPanel">
????????????????????????????????????????<fieldset>
????????????????????????????????????????????<legend>Nested?Panel?1</legend>
????????????????????????????????????????????<br?/>
????????????????????????????????????????????Last?updated?on
????????????????????????????????????????????<%=?DateTime.Now.ToString()?%>
????????????????????????????????????????????<br?/>
????????????????????????????????????????????<asp:Button?ID="NPButton1"
????????????????????????????????????????????????????????Text="Nested?Panel?1?Button"?
????????????????????????????????????????????????????????runat="server"?/>
????????????????????????????????????????</fieldset>
????????????????????????????????????</div>
????????????????????????????????</ContentTemplate>
????????????????????????????</asp:UpdatePanel>
????????????????????????</fieldset>
????????????????????</div>
????????????????</ContentTemplate>
????????????</asp:UpdatePanel>
????????</div>
????</form>
</body>
</html>
運行后如下:
?
三.同一頁面上使用多個UpdatePanel
使用UpdatePanel的時候并沒有限制在一個頁面上用多少個UpdatePanel,所以我們可以為不同的需要局部更新的頁面區域加上不同的UpdatePanel。由于UpdatePanel默認的UpdateMode是Always,如果頁面上有一個局部更新被觸發,則所有的UpdatePanel都將更新,這是我們不愿看到的,我們只需要UpdatePanel在它自己的觸發器觸發的時候更新就可以了,所以需要把UpdateMode設置為Conditional。
來看一下官方網站上提供的一個例子:包括兩個UpdatePanel,其中一個用來用戶輸入而另一個則用來顯示數據,每一個UpdatePanel的UpdateMode屬性都設置為Conditional。當我們單擊Cancel按鈕時,只有用來用戶輸入的那個UpdatePanel刷新,當單擊Insert按鈕時,兩個UpdatePanel都刷新。代碼如下:
?
<%@?Import?Namespace="System.Collections.Generic"?%>
?
<html?xmlns="http://www.w3.org/1999/xhtml"?>
<head?id="Head1"?runat="server">
????<title>Enter?New?Employees</title>
????<script?runat="server">
????????private?List<Employee>?EmployeeList;
?
????????protected?void?Page_Load()
????????{
????????????if?(!IsPostBack)
????????????{
????????????????EmployeeList?=?new?List<Employee>();
????????????????EmployeeList.Add(new?Employee(1,?"Jump",?"Dan"));
????????????????EmployeeList.Add(new?Employee(2,?"Kirwan",?"Yvette"));
????????????????ViewState["EmployeeList"]?=?EmployeeList;
????????????}
????????????else
????????????????EmployeeList?=?(List<Employee>)ViewState["EmployeeList"];
????????????
????????????EmployeesGridView.DataSource?=?EmployeeList;
????????????EmployeesGridView.DataBind();
????????}
????????
????????protected?void?InsertButton_Click(object?sender,?EventArgs?e)
????????{
????????????if?(String.IsNullOrEmpty(FirstNameTextBox.Text)?||
???????????????String.IsNullOrEmpty(LastNameTextBox.Text))?{?return;?}
?
????????????int?employeeID?=?EmployeeList[EmployeeList.Count-1].EmployeeID?+?1;
????????????
????????????string?lastName?=?Server.HtmlEncode(FirstNameTextBox.Text);
????????????string?firstName?=?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;
????????}
?
????????protected?void?CancelButton_Click(object?sender,?EventArgs?e)
????????{
????????????FirstNameTextBox.Text?=?String.Empty;
????????????LastNameTextBox.Text?=?String.Empty;
????????}
????
????????[Serializable]
????????public?class?Employee
????????{
????????????private?int?_employeeID;
????????????private?string?_lastName;
????????????private?string?_firstName;
?
????????????public?int?EmployeeID
????????????{
????????????????get?{?return?_employeeID;?}
????????????}
????????????
????????????public?string?LastName
????????????{
????????????????get?{?return?_lastName;?}
????????????}
????????????
????????????public?string?FirstName
????????????{
????????????????get?{?return?_firstName;?}
????????????}
????????????
????????????public?Employee(int?employeeID,?string?lastName,?string?firstName)
????????????{
????????????????_employeeID?=?employeeID;
????????????????_lastName?=?lastName;
????????????????_firstName?=?firstName;
????????????}
????????}
?
????</script>
</head>
<body>
????<form?id="form1"?runat="server">
????<div>
???????? </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>
運行后效果如下:
?
?
示例代碼下載: http://files.cnblogs.com/Terrylee/ASPNETAJAXUpdatePanelDemo2.rar
Worktile,新一代簡單好用、體驗極致的團隊協同、項目管理工具,讓你和你的團隊隨時隨地一起工作。完全免費,現在就去了解一下吧。
https://worktile.com
]??AJAX風云
?……?
2.ASP.NET AJAX 1.0的全部源碼已經發布。?
3.ASP.NET AJAX Control Toolkit也隨之發布了新版本,新增了如下四個控件:?
?AutoComplete?
?Calendar?
?MaskedEdit?
?Tabs?
4.未來開發計劃?
詳細大家可以訪問:http://ajax.asp.net/?
閱讀全文
從CTP版升級到RC 版?
從Beta2升級到RC版?
點擊下載ASP.NET AJAX 1.0 RC,從提供的文檔來看,主要的變化是命名空間,從Microsoft.Web變為了System.Web,如以前的用的Microsoft.Web.Script.Services.ScriptService,現在需要修改為System.Web.Script.Services.ScriptService。?
同時ASP.NET AJAX Control Toolkit已經更新到了RC版,可以從這里下載。?
點點:從最近發布的Beta2到RC版,可以看出ASP.NET AJAX v1.0已經逐步趨于穩定,不會再有CTP到Beta1的翻天覆地的變化,大家可以在項目中使用了。 閱讀全文
AJAX自去年火了之后到現在,不僅沒有被取代,而且有越來越熱之勢:現在各大網站都在爭相使用AJAX技術,似乎哪個網站不使用點AJAX就顯的落伍了,從Google、到Yahoo,以及國內各門戶網站都是如此,不使用AJAX技術,似乎就不夠Web2.0;各種AJAX框架也是風起云涌,微軟的ASP.NET AJAX,雅虎的Yahoo! UI,Google的Web Toolkit以及dojo,prototype等;再看看園子里朋友對AJAX的關注程度,遠遠超出了對其他技術的關注。?
那么AJAX到底命運如何,是否只是一種過渡技術?能否被Flex或者WPF所取代呢?我們不妨來一次討論,大家也都來說說自己的看法吧。 閱讀全文
主要內容?
在多個UpdatePanel中使用Timer控件?
閱讀全文
主要內容?
1.添加UpdatePanel控件到Content Page?
2.通過Master Page刷新UpdatePanel?
閱讀全文
主要內容 ?
1.在服務端自定義異常處理?
2.在客戶端腳本中自定義異常處理?
閱讀全文
文章及導讀 閱讀全文
主要內容 ?
1.通過客戶端腳本取消異步更新?
2.通過客戶端腳本顯示或者隱藏進度信息?
閱讀全文
主要內容 ?
1.UpdateProgress控件簡單使用?
2.使用多個UpdateProgress控件?
閱讀全文
主要內容?
1.用編程的方法控制UpdatePanel的更新?
2.UpdatePanel的嵌套使用?
3.同一頁面上使用多個UpdatePanel?
閱讀全文
主要內容 ?
1.UpdatePanel控件概述?
2.UpdatePanel工作原理?
3.ContentTemplate屬性?
4.ContentTemplateContainer屬性?
5.Triggers屬性?
閱讀全文
主要內容 ?
1.ScriptManagerProxy控件概述?
2.簡單示例?
閱讀全文
主要內容 ?
1.控件概述?
2.一個簡單的示例?
3.客戶端腳本模式?
4.錯誤處理?
5.Services屬性?
6.Scripts屬性 閱讀全文
ASP.NET AJAX Beta改動如此之大,鑒于又沒有很好的中文參考資料,所以決定最近開始寫作ASP.NET AJAX入門系列,這個系列我會把ASP.NET AJAX當作一個全新的東西去對待,不再考慮以前的Atlas,把自己對ASP.NET AJAX的研究與大家分享,便于初學的朋友少走一些彎路。對Atlas熟悉的朋友可以推薦看Dflying Chen的《擁抱變化——從Atlas到ASP.NET AJAX系列》,以及老趙的《深入Atlas系列》。由于個人的能力和掌握的程度有限 ,難免出現錯誤和遺漏的地方,還請大家多多理解和指正。?
OK,讓我們從這里開始!?
閱讀全文
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
