ASP.NETではUpdatePanelを用いて局所非同期リフレッシュ方法と攻略を実現

35950 ワード

asp.NetUpdatePanel非同期ローカルリフレッシュを実現するには、同じように、栄欣に堪えません.転載する場合は、最近のプロジェクトの必要性に鑑み、UpdatePanelコントロールの使用方法を検討してください.次に、UpdatePanelのローカルリフレッシュを直接開始します.ScriptManagerとUpdatePanelコントロールを組み合わせて使用すると、ページの非同期ローカル更新の効果が得られます.UpdatePanelは、ScriptMangerコントロールによって、クライアント・スクリプトのUpdatePanelの生成と管理を行う機能を提供するため、ScriptManagerに依存する必要があるページ内の非同期ローカル更新領域を設定します.ScriptManagerコントロールの重要な属性:ScriptManagerコントロールのEnablePartialRendering属性:true-ページの非同期ローカル更新を実現することを示す;false-は、全ページのリフレッシュを実現することを示す.この属性のデフォルト値はtrue UpdatePanelコントロールの重要な属性です:UpdatePanelコントロールのRenderMode属性:InLine、UpdatePanelコントロールはHTMLのタグに解析されます;Block,UpdatePanelコントロールはHTMLコントロールの
.
UpdatePanelコントロールのUpdateMode属性:Always、UpdatePanelページのいずれかで発生した再送操作はページのローカル更新を生成します.Conditionalでは、UpdatePanelコントロールのupdate()メソッドを実行したり、指定したトリガの操作でUpdatePanelコントロールのUpdateModeが「Always」にデフォルト設定されているなど、特定の場合にのみページの再送が生成されます.
UpdatePanelコントロールのChildAsTriggerプロパティ:UpdatePanel内部コントロールによる再送が現在のUpdatePanelコントロールのローカル更新を生成するかどうかを示します.UpdateModeがAlwaysに設定されている場合、ChildAsTriggerプロパティはTrueに設定する必要があります.そうしないと、実行エラーが発生します.
一、UpdatePanel内部のコントロールによる再送により、現在のUpdatePanel内部のコントロール内容を更新する:
1.ScriptManager、UpdatePanelコントロール、およびLabelコントロール、ID="Label 1"をページに追加します.
2.UpdatePanelにButton、Label、ID="Label 2"を追加します.
3.Buttonをダブルクリックしてイベントハンドラに次のコードを書き込む:Label 2.Text = DateTime.Now.ToString();
4.Page_でLoadイベントには、次のコードが書き込まれます:Label 1.Text = DateTime.Now.ToString();
5.ページを実行すると、ボタンをクリックするたびに非同期のローカルステップリフレッシュが発生し、Label 2の内容だけが変更され、ページ上のLabel 1時間は変更されていないことがわかります.
     <asp:Label ID="Label1" runat="server" Text="Label">asp:Label>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="True">
            <ContentTemplate>
                <asp:Label ID="Label2" runat="server">asp:Label>
                <br />
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
            ContentTemplate>
        asp:UpdatePanel>
        :
        protected void Button1_Click(object sender, EventArgs e)
        {
            Label2.Text = DateTime.Now.ToString(); ;
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            Label1.Text = DateTime.Now.ToString();
        } 
     :   ScriptManager EnablePartialRendering     true(    true)。UpdatePanel UpdateMode     Always(    Always)。ChildAsTrigger     true(    true)。

二、UpdatePanelコントロール外部のコントロールによる再送は、UpdatePanel内部の内容を非同期で更新することで簡単に非同期ローカル更新の機能を実現することができるが、性能面では、データが確実に変化するコントロールだけをUpdatePanelに置くべきであり、再送を引き起こすコントロールがUpdatePanel内にない場合がある.この時、私たちはこの効果を実現する2つの方法があります.A.Page_LoadメソッドではScriptManager 1を用いる.RegisterAsyncPostBackControl()を使用して、非同期更新を実行するコントロールを登録します.B.フリップフロップで実現する.
1、ScriptManager1.RegisterAsyncPostBackControl()             UpdatePanel       。
     :ScriptManager1.RegisterAsyncPostBackControl(this.Button2);   Button2   ,   Button2            (      ),          UpdatePanel      。
      :   ScriptManager EnablePartialRendering     true。UpdatePanel UpdateMode     Always。
2、ScriptManager1.RegisterAsyncPostBackControl()             UpdatePanel       。
    a.       UpdatePanel   UpdateMode  Conditional。
    b.ScriptManager1.RegisterAsyncPostBackControl(this.Button2);   Button2   。
    c. Button2   Click            :UpdatePanel1.Update(); 
      Button2    UpdatePanel1            。
      :   UpdatePanel      Conditional,      UpdatePanel      Always  ,   UpdatePanel          。
         Button2    UpdatePanel1.Update()   UpdatePanel   Conditional ,   UpdatePanel         ,     UpdatePanel 
                ,   UpdatePanel UpdateMode    Conditional   
3、   
            UpdatePanel  ,                  UpdatePanel    ,          UpdatePanel         。
    a.          UpdatePanel  。 
    b.        Triggers          。
    c.                  AsyncPostBackTriggers  。
    d.  AsyncPostBackTriggers   ControlID EventName,           ID       。
           ,   HTML          :
    
        
            
        
            
        
    
    
     <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"/>
                <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click"/>
                <asp:PostBackTrigger ControlID="Button3" EventName="Click"/>
            Triggers>

3、2つのUpdatePanelコントロール、そのうちの1つのUpdatePanel内のコントロールは2つのUpdatePanelコントロールを同時にリフレッシュさせる.a.ページに2つのUpdatePanelと1つのScriptManagerコントロールを入れます.b.UpdatePanel 1にラベルLabel 1、ボタンButton 1、UpdatePanel 2にラベルLabel 2を加える.c.UpdatePanel 1とUpdatePanel 2の2つのコントロールのUpdateMode属性を「Always」c.Button 1のClickイベントに次のコードを追加します.
      protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = DateTime.Now.ToString();
            Label2.Text = DateTime.Now.ToString();
        }
d.    Page_Load           
      protected void Page_Load(object sender, EventArgs e)
        {
            Label1.Text = DateTime.Now.ToString();
            Label2.Text = DateTime.Now.ToString();
        }

4、2つのUpdatePanelコントロール、そのうちの1つのUpdatePanel内のコントロールは現在のUpdatePanelコントロールのリフレッシュを開始し、もう1つはリフレッシュしない.a.ステップは上記(3)と同様b.UpdatePanel 1とUpdatePanel 2の2つのコントロールのUpdateMode属性をConditionalに設定するには、1つをConditionalに設定し、1つをAlwaysに設定すると両方がリフレッシュされることに注意する
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:Label ID="Label1" runat="server" Text="Label">asp:Label>
            <br />
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click1" Text="    UpdatePanel" />
        ContentTemplate>
    asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:Label ID="Label2" runat="server" Text="Label">asp:Label>
        ContentTemplate>
    asp:UpdatePanel>

5、2つのUpdatePanelコントロール、そのうちの1つのUpdatePanel内のコントロールは別のUpdatePanelコントロールのリフレッシュを開始し、それ自体はリフレッシュしない.a.ステップは上記(4)と同様(両方ともConditionalに設定)の後、b.UpdatePanel 1とUpdatePanel 2のChildrenAsTriggers属性をfalse c.とし、UpdatePanel 2コントロールにトリガを加え、トリガ源をUpdatePanel 1コントロール内のButton 1のClickイベントに設定する必要がある.
  <asp:ScriptManager ID="ScriptManager1" runat="server">
    asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False">
        <ContentTemplate>
            <asp:Label ID="Label1" runat="server" Text="Label">asp:Label>
            <br />
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click1" Text="   UpdatePane2" />
        ContentTemplate>
    asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:Label ID="Label2" runat="server" Text="Label">asp:Label>
        ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
        Triggers>
    asp:UpdatePanel>

開発中にUpdatePanelコントロールの複雑な使用は避けられない.たとえば、UpdatePanelコントロールのネスト、マスターページでのUpdatePanelの使用、ユーザーコントロールでのUpdatePanelの使用、GridViewでのUpdatePanelの使用などです.これらの操作は、UpdatePanelコントロールのUpdateModeプロパティ、ChildrenAsTriggerプロパティ、トリガの使用も避けられません.以下はシステム的に説明します.1、2つのネストされたUpdatePanelコントロール、外部のUpdatePanel内のコントロールの再送開始2つは、ページに1つのScriptManagerとUpdatePanelコントロール(UpdatePanel 1)を同時に更新し、UpdatePanel 1に1つのラベルコントロール(lb 1)、1つのボタン(Button 1)、もう1つのUpdatePanelコントロール(UpdatePanel 2)を入れ、UpdatePanel 2コントロールに1つのラベルコントロールlb 2を置く.
  <asp:ScriptManager ID="ScriptManager1" runat="server">
    asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:Label ID="lb1" runat="server">asp:Label>
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click2" Text="Button" />
            <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Label ID="lb2" runat="server">asp:Label>
                ContentTemplate>
            asp:UpdatePanel>
        ContentTemplate>
    asp:UpdatePanel>
 Button1    Click          :
   protected void Button1_Click2(object sender, EventArgs e)
    {
        lblIn.Text = DateTime.Now.ToString();
        lblOut.Text = DateTime.Now.ToString();
    }
     UpdatePanel               UpdatePanel         ,     UpdatePanel    UpdateMode   Conditional,    UpdatePanel             UpdatePanel     。
  :  UpdatePanel   ChildrenAsTrigger     True,  UpdatePanel   UpdateMode     Conditional,  UpdateMode  Always        UpdatePanel       ,            UpdatePanel       。

2つのネストされたUpdatePanelコントロール、内部のUpdatePanel内のコントロールの再送開始2つは、ページに1つのScriptManagerとUpdatePanelコントロール(UpdatePanel 1)を同時に更新し、UpdatePanel 1に1つのラベルコントロール(lb 1)と別のUpdatePanelコントロール(UpdatePanel 2)を入れ、UpdatePanel 2コントロールに1つのラベルコントロールlb 2とボタン(Button 1)を置く.
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:Label ID="lb1" runat="server" >asp:Label>
            <br />
            <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Label ID="lb2" runat="server" >asp:Label>
                    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
                ContentTemplate>
            asp:UpdatePanel>
        ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
        Triggers>
    asp:UpdatePanel>
    Click    ( )    。
  :
      UpdatePanel   UpdateMode    Conditional,      ChildrenAsTrigger   True。     UpdatePanel            ,       UpdatePanel     ,        UpdatePanel  ,          UpdatePanel         ,      Button1   Click   。

3、2つのネストされたUpdatePanelコントロール、外部のUpdatePanel内のコントロールの再送は内部コントロールの更新のみを引き起こし、ページに1つのScriptManagerとUpdatePanelコントロール(UpdatePanel 1)を配置し、UpdatePanel 1に1つのラベルコントロール(lb 1)、1つのボタン(Button 1)、もう1つのUpdatePanelコントロール(UpdatePanel 2)、UpdatePanel 2に1つのラベルコントロールlb 2を配置する.
  <asp:ScriptManager ID="ScriptManager1" runat="server">
    asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False">
        <ContentTemplate>
            <asp:Label ID="lb1" runat="server" >asp:Label>
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /><br />
            <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Label ID="lb2" runat="server" >asp:Label> 
                ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
                Triggers>
            asp:UpdatePanel>
        ContentTemplate>
    asp:UpdatePanel>
           Click    ( )    。
  :
        UpdatePanel   UpdateMode  Conditional,   UpdatePanel    ChildrenAsTrigger  false。    UpdatePanel       ,        UpdatePanel        ,       UpdatePanel   Button1 Click   。

四、マスターページでUpdatePanelコントロールを使用するマスターページにScriptManagerコントロールを追加すると、各コンテンツページにScriptManagerコントロールを追加する必要はありません.UpdatePanelコントロールを追加するだけでいいです.マスターページとコンテンツページは将来1ページのインスタンスを生成しますが、1ページに2つのScriptManagerコントロールが同時に存在することは許されません.マスターページにScriptManagerコントロールが追加されていない場合は、ScriptManagerコントロールを1つのコンテンツページに追加するしかありません.各コンテンツページにScriptManagerコントロールを追加しないでください.1、コンテンツページのUpdatePanel内のコントロールが再送され、現在のコンテンツページの内容のみが更新されます.このときボタンはそれぞれのUpdatePanelコントロール内にあります.2つのコンテンツページ内の2つのUpdatePanelコントロールのUpdateModeをConditional、ChildrenAsTriggerをTrueに設定します.ボタンのClickイベントの中で(一)と同じです.これにより各コンテンツページのUpdatePanel内のボタンが現在のコンテンツページにのみ機能するようになる.2、マスターページのボタンが再送され、指定されたコンテンツページの情報が更新されます.2つのボタンがあります.ButtonOutはマスターページにあり、ButtonInはコンテンツページ1にあります.ButtonOutをクリックすると、2つのコンテンツページの情報が非同期で更新されます.ButtonInをクリックすると、マスターページのUpdate Panel 1の情報が非同期で更新されます.マスターページHTMLコードは次のとおりです.
マスターページ
3、
コンテンツページのHTMLコードは次のとおりです.
     "C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Child.aspx.cs" Inherits="Child" Title="UpdatePanel Test Page" %>
        "~/MasterPage.master" %>
        <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Label ID="Label1" runat="server" Text="Label">asp:Label>
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="ButtonInner" />
                ContentTemplate>
            asp:UpdatePanel>
        asp:Content>
        <asp:Content ID="Content2" runat="server" ContentPlaceHolderID="ContentPlaceHolder2">
            <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                <ContentTemplate>
                    <asp:Label ID="Label2" runat="server" Text="Label">asp:Label>
                ContentTemplate>
            asp:UpdatePanel>
        asp:Content>
        CS    :
     protected void Page_Load(object sender, EventArgs e)
        {
            ScriptManager1.RegisterAsyncPostBackControl(this.Button1);
        }
        protected void Button1_Click(object sender, EventArgs e)
        {
            Label lbl1 = (Label)this.ContentPlaceHolder1.FindControl("Label1");
            lbl1.Text = DateTime.Now.ToString();
            Label lbl2 = (Label)this.ContentPlaceHolder2.FindControl("Label2");
            lbl2.Text = DateTime.Now.ToString();
        }
        public string BindTitle
        {
            get
            {
                return lbl.Text;
            }
            set
            {
                lbl.Text = value;
            }
        } 
       Child     CS    :
        protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = Master.BindTitle;
            Master.BindTitle = "ContentPage1's Action";
            ((UpdatePanel)Master.FindControl("UpdatePanel1")).Update(); ;
        }

五、ユーザーコントロールでUpdatePanelコントロールを使用する親ページにScriptManagerコントロールがある場合、ユーザーコントロールのページにScriptManagerコントロールを入れるべきではなく、ユーザーコントロールにUpdatePanelを加えるだけである.そのコントロールの再送と更新の法則と使用方法はマスターページと同じです.自分で资料を见て総括して、もし足りないところを発见したら、斧正を頼んで、私はとても感谢して、共に勉强して、共に进歩して、ありがとうございます.の
原文住所:http://blog.csdn.net/chenhongwu666/article/details/41392529