2.8. Working with Updates

Part of the complexity of partial page updates comes in establishing and maintaining relationships between elements on the page as the page evolves and as parts of the page are updated independently from one another. Of course, in real applications, you will have event handlers attached to DHTML Document Object Model (DOM) elements within an UpdatePanel that affect other parts of the page. When an asynchronous postback occurs, the event hookup will be lost and must be reestablished.

As updates occur, how do you effectively pull items out of the update and use these values elsewhere on the page? Listing 2-27 provides an example of how to accomplish this task.

Example 2-27. Using data from the updates that occur
<%@ Page Language="C#" %>

<script runat="server">
    protected override void OnLoad(EventArgs e)
    {
        string text = DateTime.Now.ToLongTimeString();
        theTime.Text = text;
        theTime2.Text = text;
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Managing Updates</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

        <script type="text/javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_pageLoaded(pageLoaded);

        function pageLoaded(sender, pageLoadedEventArgs)
        {
            var panelsCreated = pageLoadedEventArgs.get_panelsCreated();
            for(var i = 0; i < panelsCreated.length; i++) {
                if(panelsCreated[i].id === "panel1") {
                    hookupPanelOne();
                }
            }

            var panelsUpdated = pageLoadedEventArgs.get_panelsUpdated();
            for(var i = 0; i < panelsUpdated.length; i++) {
                if(panelsUpdated[i].id === "panel1") {
                    hookupPanelOne();
                }
            }
        }

        function hookupPanelOne()
        {
            $get('<%= theDuplicate.ClientID %>').innerHTML =
            $get('<%= theTime.ClientID %>').innerHTML;
        }
        </script>

        <asp:UpdatePanel runat="server" ID="panel1" UpdateMode="Conditional">
            <ContentTemplate>
                Panel One

<asp:Label runat="server" ID="theTime"></asp:Label><br />
                <asp:Button runat="server" Text="Refresh" ID="RefreshButton" />
                <br /><br />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <br />
    <div style="border-style: solid">
        <asp:UpdatePanel runat="server" ID="panel2" UpdateMode="Conditional">
            <ContentTemplate>
                Panel Two
                <asp:Label runat="server" ID="theTime2"></asp:Label><br />
                <asp:Button runat="server" Text="Refresh" ID="RefreshButton2" />
                <br /><br />
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
    </div>
    The Time from Panel One is:
    <asp:Label runat="server" ID="theDuplicate" /><br />
    </form>
</body>
</html>

If the dependency were as simple as getting one string and copying it as this example is trying to accomplish here, it would not merit any extra work. In this case, you could just copy it over in a pageLoaded() event handler and be done with it.

In a more realistic example, the dependencies would probably be more labor intensive. Instead of blindly doing the work each time any part of the page is updated, you would want to do the work only when necessary. In this case, that would be just when panel1 was changing. Instead of putting the code directly in the pageLoaded() event handler, it goes in a separate function:

function hookupPanelOne() {
   $get('<%= theDuplicate.ClientID %>').innerHTML =
   $get('<%= theTime.ClientID %>').innerHTML;
}

The $get syntax is a shortcut for locating the item in the browser's DOM. To tell when the hookupPanelOne() function needs to be called, this bit of code examines which UpdatePanel controls are being created and which are being updated in the pageLoaded() event handler. The PageLoadedEventArgs provides property accessors that return arrays of the newly created and updated UpdatePanel controls.

function pageLoaded(sender, pageLoadedEventArgs) {
    var panelsCreated = pageLoadedEventArgs.get_panelsCreated();
    for(var i = 0; i < panelsCreated.length; i++) {
        if(panelsCreated[i].id === "panel1") {
            hookupPanelOne();
        }
    }

var panelsUpdated = pageLoadedEventArgs.get_panelsUpdated();
    for(var i = 0; i < panelsUpdated.length; i++) {
        if(panelsUpdated[i].id === "panel1") {
            hookupPanelOne();
        }
    }
}

Yes, this looks like a lot of overhead for a simple example, but if you had cascading dependencies or were making additional Web Service calls as the result of an UpdatePanel control being refreshed, you could save extra work for the browser and the server by updating the dependency only when it's necessary. Putting it all together results in the page shown in Figure 2-19. The panels can update independently, and the Duplicate span is changed as a function of updates to the first panel only.

Figure 2-19. Figure 2-19

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset