To understand how the UpdatePanel work in ASP.NET...

To understand how the UpdatePanel work in ASP.NET...
Basically I put up a file with TWO updatepanels instead

protected void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterAsyncPostBackControl(Button1);
lblStatic.Text = DateTime.Now.ToString();
}


protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Panel refreshed at " + DateTime.Now.ToString();
Label2.Text = "Panel refreshed at " + DateTime.Now.ToString();
}
protected void Button2_Click(object sender, EventArgs e)
{
Label1.Text = "Page refreshed.";
Label2.Text = "Page refreshed.";
}

HTML

<asp:Label ID="lblStatic" runat="server"></asp:Label>
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />

        <asp:UpdatePanel ID="UpdatePanel1" runat="server" >
            <ContentTemplate>
                <fieldset>
                <legend>Update Panel</legend>
                <asp:Label ID="Label1" runat="server">Initial postback occurred.</asp:Label>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        
        <asp:UpdatePanel ID="UpdatePanel2" runat="server" >
            <ContentTemplate>
                <fieldset>
                <legend>Update Panel 2</legend>
                <asp:Label ID="Label2" runat="server">Initial postback occurred.</asp:Label>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        
        <asp:Button ID="Button1" runat="server" Text="Update Panel" OnClick="Button1_Click" />
        <asp:Button ID="Button2" runat="server" Text="Refresh Page" OnClick="Button2_Click" />

Here we are using RegisterAsyncPostBackControl to set the Button1 class to just perform an Async postback instead of a regular (full page refresh) postback.

What would you think happen when we click on the Button1? Answer is that BOTH Label1.Text and Label2.Text gets updated in the client browser. That's understandable - since semantically we have never said anything else. I mean the RegisterAsyncPostBackControl is called on the global scriptmanager object - and
not tied to any specific updatepanel.

Now lets do these changes:

protected void Page_Load(object sender, EventArgs e)
{
//        ScriptManager1.RegisterAsyncPostBackControl(Button1);
lblStatic.Text = DateTime.Now.ToString();
}

(commenting the RegisterAsyncPostbackControl out) and instead use the trigger - lets put a trigger inside the Updatepanel control


<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
            <ContentTemplate>
                <fieldset>
                <legend>Update Panel</legend>
                <asp:Label ID="Label1" runat="server">Initial postback occurred.</asp:Label>
                </fieldset>
            </ContentTemplate>
        <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
        </Triggers>
            
        </asp:UpdatePanel>
        
        <asp:UpdatePanel ID="UpdatePanel2" runat="server" >
            <ContentTemplate>
                <fieldset>
                <legend>Update Panel 2</legend>
                <asp:Label ID="Label2" runat="server">Initial postback occurred.</asp:Label>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

Now when clicking on the button - would would you expect to happen. Sematically - since we have defined the trigger in the scope of UpdatePanel1 I expected only Label1 to be updated. However turns out that both labels are indeed updated on the client.

I couldn't buy that. I even thought it was a miss in Microsofts object model - I mean
if triggers seems to work globally - why do we define them inside the UpdatePanel?

However - I found the answer:


  <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
...
  </asp:UpdatePanel>

  <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
...
  </asp:UpdatePanel>


did the trick. I.e an updatepanel is by default set to UpdateMode="Always" which gave me that behaviour.

So far so good. I do also see the need to override the Updating - I mean in our example under certain conditions we might want to update UpdatePanel2 as well (inside the trigger belonging to UpdatePanel1)

Solution:

protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Panel refreshed at " + DateTime.Now.ToString();
Label2.Text = "Panel refreshed at " + DateTime.Now.ToString();
UpdatePanel2.Update();
}



By using the Update() method we can "override" the defined UpdateModel and make sure
any UpdatePanel is "flagged as dirty" and updated on the client.

Once again - it took me a while to grasp this - but now I see the need for all these type of
updating methods. And, I agree, MS was right and I was wrong - again...

Nhận xét

Bài đăng phổ biến từ blog này

UpdatePanel Tips and Tricks

Các website về Kinh tế và Quản lý