DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> asp.net ajax學習系列功能強大的Updatepanel控件
asp.net ajax學習系列功能強大的Updatepanel控件
編輯:AJAX詳解     

先給一個簡單的例子,後面給一個比較復雜的例子。

改進後的UpdatePanel使頁面部分更新(Partial-Page Updates)實現起來非常容易。
要想在已有web頁面或新建頁面中加入部分更新內容,都十分容易,下面幾個步驟:
<1>在頁面中加入ScriptManager控件。並保證ScriptManager控件的EnablePartialRendering屬性值為true。若EnablePartialRendering=false,那麼下面所做的對頁面部分更新的任何設置都不能實現。EnablePartialRendering的默認值是true,不作修改就行。

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

<2>把UpdatePanel控件加到頁面中。在 <ContentTemplate></ContentTemplate>中加入想部分更新的內容就行了。


<ASP:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
              <fIEldset>
                <legend>In UpdatePanel</legend>
                  UpdatePanel content refreshed at <%=DateTime.Now.ToString() %>
                 <ASP:Button ID="Button1"  Text="RefreshUpdatePanel" runat="server" />
               </fIEldset>
            </ContentTemplate>
  </ASP:UpdatePanel>
為了對比,在UpdatePanel外面加一行代碼

<div>Out of UpdatePanel,refreshed at <%=DateTime.Now.ToString() %></div>
這樣部分更新功能就實現了,或許都不敢相信。
看看效果吧。

兩部分更新時間不一樣!

UpdatePanel控件的功能是很強大的。這是最簡單的應用。
部分更新時,提交給服務器的數據跟一般的postback沒有什麼區別,所有數據包括vIEwstate中的數據被傳回服務器。不同的地方在於從服務器只返回部分更新部分的數據。由於UpdatePanel控件的引入,postback被分為兩種,asynchronous postback和normal postback,asynchronous postback引起UpdatePanel的更新,normal postback引發整個頁面的更新。使用ScriptManager的IsInAsyncPostBack屬性可以判斷回傳的類型。
介紹一下UpdatePanel的屬性。
<1>Triggers
有兩種AsyncPostBackTrigger,PostBackTrigger。
AsyncPostBackTrigger
來指定某個控件的某個事件引發異步回傳(asynchronous postback),即部分更新。屬性有ControlID和EventName。分別用來指定控件ID和控件事件,若沒有明確指定EventName的值,則自動采用控件的默認值,比如button就是click。把ContorlID設為UpdatePanel外部控件的ID,可以使外部控件控制UpdatePanel的更新。
PostBackTrigger
來指定UpdatePanel內的某個控件引發整個頁面的更新(normal postback)。

<Triggers>
            <ASP:PostBackTrigger ControlID="Button1"/>
            <ASP:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
</Triggers>
<2>UpdateMode
有兩個值:Always,Conditional。總是更新,有條件更新。
確定當asynchronous postbacks發生時,是否總是更新。若頁面中只有一個UpdatePanel控件,這個值好像沒有什麼意義。但是當頁面中存在多個UpdatePanel,或者UpdatePanel中包含UpdatePanel的復雜情況時,這個值的設定就可以使各個UpdatePanel在各種合適時機更新。
<3>ChilderAsTriggers
bool值,默認是true。若設為false,則UpdatePanel的子控件引發異步回傳(asynchronous postback),但是不更新當前UpdatePanel(在多個UpdatePanel的頁面中發現的)。這裡比較難於理解,甚至我理解的是錯誤的。請高手指點。
該屬性只在UpdateMode=Conditional條件下有意義。右UpdateMode為Always,ChilderAsTriggers=false就則引發異常。

另外UpdatePanel還提供了一個方法Update(),可以通過代碼控件部分更新。
先說這麼多。下面給個代碼,使用了這些屬性。


<%@ Page Language="C#" %>
<!DOCTYPE Html PUBLIC "-//W3C//DTD XHtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
<script runat="server">

    protected void Button4_Click(object sender, EventArgs e)
    {
        UpdatePanel1.Update();
    }
</script>
<html XMLns="http://www.w3.org/1999/xHtml" >
<head runat="server">
<title>Untitled Page</title>
    <style type="text/CSS">
    .UpdatePanelTitle
    {
    color:red;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ASP:ScriptManager ID="ScriptManager1" runat="server">
        </ASP:ScriptManager>
   
      <fIEldset>
      <legend class="UpdatePanelTitle">UpdatePanel控件外</legend>
      <ASP:Button runat="server" ID="Button5" Text="引發常規回傳" /><br />
        <ASP:Button runat="server" ID="Button1" Text="引發異步回傳" /><br />       
        Refrest at <%=DateTime.Now.ToUniversalTime()%>
        </fIEldset>
       
        <ASP:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
        <Triggers>
        <ASP:PostBackTrigger ControlID="Button2" />
        </Triggers>
        <ContentTemplate>       
        <fIEldset>
        <legend class="UpdatePanelTitle">UpdatePanel1</legend>
        <ASP:Button runat="server" ID="Button2" Text="引發常規回傳" />
        Refresh at <%=DateTime.Now.ToUniversalTime()%>
        </fIEldset>
        </ContentTemplate>
        </ASP:UpdatePanel>
       
       
        <ASP:UpdatePanel ID="UpdatePanel2"  UpdateMode="Conditional" runat="server">
        <Triggers>
        <ASP:AsyncPostBackTrigger ControlID="Button1" />
        </Triggers>
        <ContentTemplate>            
        <fIEldset>         
        <legend class="UpdatePanelTitle">UpdatePanel2</legend>
        <ASP:Button runat="server" ID="Button3" Text="InPanel2" />
        Refresh at <%=DateTime.Now.ToUniversalTime() %><br />
              
        <ASP:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Always">
        <ContentTemplate>
        <fIEldset>
        <legend class="UpdatePanelTitle">UpdatePanel3:I'm Child of UpdatePanel2</legend>
        <ASP:Button runat="server" ID="Button4" Text="InPanel3" />
        Refresh at <%=DateTime.Now.ToUniversalTime()%>
        </fIEldset>
        </ContentTemplate>
        </ASP:UpdatePanel>
        </fIEldset>

        </ContentTemplate>
        </ASP:UpdatePanel>
       
        <ASP:UpdatePanel ID="UpdatePanel4" UpdateMode="Conditional" runat="server" ChildrenAsTriggers="false">
        <ContentTemplate>       
        <fIEldset>
        <legend class="UpdatePanelTitle">UpdatePanel4</legend>
        <ASP:Button runat="server" ID="Button6" Text="引發常規回傳,但不更新自己" />
        Refresh at <%=DateTime.Now.ToUniversalTime()%>
        </fIEldset>
        </ContentTemplate>
        </ASP:UpdatePanel>            
       
        </div>
    </form>
</body>
</Html>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved