Ajax advanced

As explained by Microsoft,  there is an ASP.NET AJAX UpdatePanel which is an alternative to my previous post without web methods and without full post-back.

headertop_img

Lessons learned:

  1. the fact that the load event of the page is fired again doesn’t imply a full post-back, because the page itself is not reloaded: notice the details of the network request from the browser where X-Requested-With XMLHttpRequest!
  2. in this case you can manage an async reply without any special hack

 

The simple source from Microsoft sample (with only a few little changes).

<body>
    <form id="form1" runat="server">
         <asp:ScriptManager EnablePartialRendering="true" 
            ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div>
            <asp:UpdatePanel ID="UpdatePanel2" runat="server"
               UpdateMode="Conditional">
               <ContentTemplate>
                  <asp:Label ID="Label1" runat="server" />
                  <br />
                  <asp:Button ID="Button1" runat="server"
                     Text="Update Both Panels Async" OnClick="Button1_Click" />
                  <asp:Button ID="Button2" runat="server"
                     Text="Update This Panel Full PostBack" OnClick="Button2_Click" />
                  <br />
                  <asp:Label ID="Label2" runat="server" ForeColor="red" />
               </ContentTemplate>
               <Triggers>
                  <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
                  <asp:PostBackTrigger ControlID="Button2" />
               </Triggers>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
public partial class PageAjax2 : System.Web.UI.Page
{
    static int test = 0;
    protected void Page_Load(object sender, EventArgs e)
    {
        test++;
    }

    protected async void Button1_Click(object sender, EventArgs e)
    {
        await Task.Delay(2000); // no .ConfigureAwait(false) needed!
        Label1.Text = DateTime.Now.ToLongTimeString();
        Label2.Text = DateTime.Now.ToLongTimeString();
    }
    protected async void Button2_Click(object sender, EventArgs e)
    {
        await Task.Delay(2000); // no .ConfigureAwait(false) needed!
        Label1.Text = DateTime.Now.ToLongTimeString();
    }
}
Advertisements

4 thoughts on “Ajax advanced

    • Yes, thanks for reading, they are already present in the source I’ve reported here in fact. In particular the latter – namely AsyncPostBackTrigger – is the one responsible to initiate the XMLHttpRequest shown also in the image from the network developer tools.

      Like

      • I have already read your code example, all I wanted to stress is that for many use cases triggers MUST be used with UpdatePanels, but there are some simpler use cases where you just use UpdatePanels with no triggers.

        Like

        • Correct, in this case I can drop the triggers and both requests will be ajax, sure. The above sample is only to make a comparison between the two different types of requests, I think.
          Anyway, an example of why you need a PostBackTrigger in the UpdatePanel is to download a file (e.g. a report xlsx) by Response.TransmitFile

          Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s