Incremental Page Loading using Just UpdatePanel controls

Home ›

ASP.NET Forums » ASP.NET AJAX » ASP.NET AJAX UI » Incremental Page Loading using Just UpdatePanel controls

Shortcuts

Previous Next

Incremental Page Loading using Just UpdatePanel controls

Last post 06-11-2007 1:15 AM by ConradCreel. 6 replies.

Sort Posts:

Incremental Page Loading using Just UpdatePanel controls

06-04-2007, 6:38 PM

Contact

1 point Member
ConradCreel
Member since 06-01-2007, 10:17 AM
Posts 7

Hey all,

I've been working on this problem for quite a while and was curious if anyone has a solution/example:

I have multiple Update Panels on a page. I want to load each one incrementally, e.g. a button is clicked and Update Panel 1 shows its UpdateProgress, it finishes updating, then Update Panel 2 shows its UpdateProgress, etc. until the last panel finishes. The update panels and controls within them are predetermined so if there's an event I can respond to and create a chain of calls, that's fine.... as long as this UI effect is kept.

I understand I can use WebServices and PageMethods to achieve Incremental Page Loading but what is contained in the UpdatePanels are server side controls which cannot accept Client Side inputs so any type of javascript won't fit the requirement.

Any suggestions, solutions, examples?

Thank you in advance,

-- Conrad Creel

Re: Incremental Page Loading using Just UpdatePanel controls

06-08-2007, 12:34 AM

Contact

21,273 point All-Star
Jin-Yu Yin - MSFT
Member since 04-30-2007, 7:41 AM
Posts 1,824

Ok,I think it is very easy,wait for a few minutes,I'll give you a demo Smile

Sincerely,
Jin-Yu Yin
Microsoft Online Community Support

Re: Incremental Page Loading using Just UpdatePanel controls

06-08-2007, 1:02 AM

Contact

1 point Member
ConradCreel
Member since 06-01-2007, 10:17 AM
Posts 7

Okay, cool. I have a current implementation but it is not as clean as I would like it. I would appreciate seeing what you come up with

Re: Incremental Page Loading using Just UpdatePanel controls

06-08-2007, 1:53 AM

Contact

21,273 point All-Star
Jin-Yu Yin - MSFT
Member since 04-30-2007, 7:41 AM
Posts 1,824

Hi, Conrad Creel

The demo:

<%@ 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 Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = "The time is: " + DateTime.Now.ToString();
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        Label2.Text = "The time is: " + DateTime.Now.ToString();
    }
    protected void Button3_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        Label3.Text = "The time is: " + DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>UpdatePanelTutorialIntro1</title>
    <style type="text/css">
    #UpdatePanel1 {
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div style="padding-top: 10px">
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                <ProgressTemplate>
                    Processing…
                </ProgressTemplate>
            </asp:UpdateProgress>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <fieldset>
                        <legend>UpdatePanel</legend>
                        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
                        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
                    </fieldset>
                </ContentTemplate>
            </asp:UpdatePanel>
            <br />
            <br />
            <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <fieldset>
                        <legend>UpdatePanel</legend>
                        <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label><br />
                        <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Button" />
                    </fieldset>
                </ContentTemplate>
            </asp:UpdatePanel>
            <br />
            <br />
            <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <fieldset>
                        <legend>UpdatePanel</legend>
                        <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label><br />
                        <asp:Button ID="Button3" runat="server" OnClick="Button3_Click" Text="Button" />
                    </fieldset>
                </ContentTemplate>
            </asp:UpdatePanel>
            <br />
            <br />
        </div>
    </form>

    <script type="text/javascript" language="javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
    var thebutton;
    function BeginRequestHandler(sender, args)
    {
         $get('UpdateProgress1').style.display = 'block';
         thebutton = args.get_postBackElement();
         thebutton.disabled = true;
    }
    function EndRequestHandler(sender, args)
    {
         $get('UpdateProgress1').style.display = 'none';
         thebutton.disabled = false;
         var str = thebutton.id
         if(document.getElementById("Button" + (parseInt(str.substring(6, str.length)) + 1)))
         document.getElementById("Button" + (parseInt(str.substring(6, str.length)) + 1)).click();
    }
    </script>

</body>
</html>

It works cool............:) ^_^.

Let me know if you need more info.

Sincerely,
Jin-Yu Yin
Microsoft Online Community Support

Re: Incremental Page Loading using Just UpdatePanel controls

06-08-2007, 10:55 AM

Contact

1 point Member
ConradCreel
Member since 06-01-2007, 10:17 AM
Posts 7

Cool, thank you for your time and the demo. It works in IE as a standalone page but when using a MasterPage it does a complete postback and only updates the first panel. Also, in Firefox it asynchronously loads the first panel, does a full postback and updates the second panel. Strange. Any thoughts on this? If not, don't worry about it, I'll just tell my boss the cool UI effect isn't worth the time needed to make it fit our requirement.

Re: Incremental Page Loading using Just UpdatePanel controls

06-11-2007, 1:08 AM

Contact

21,273 point All-Star
Jin-Yu Yin - MSFT
Member since 04-30-2007, 7:41 AM
Posts 1,824

Give me some codes of your project, I'll find out how to fix it!

Sincerely,
Jin-Yu Yin
Microsoft Online Community Support

Re: Incremental Page Loading using Just UpdatePanel controls

06-11-2007, 1:15 AM

Contact

1 point Member
ConradCreel
Member since 06-01-2007, 10:17 AM
Posts 7

Thanks, but that's okay, the actual project I use is ridiculously complicated (and proprietary). However, if you're interested in it for yourself, simply create a master page, add a child page and set the masterpagefile to the master page you just created. Then add the code you posted earlier in the child page. You'll see what I am talking about. Also, just run the single page in Firefox 2.0, and you'll see that the postbacks are full and not asynchronous.

Thanks for your help,

-- Conrad

Page 1 of 1 (7 items)

RSS Available