6.7. Client-Side Updates

Using the client-side history APIs is just as easy as using them server-side. To illustrate, Listing 6-6 (AlbumSearchClient.aspx) shows the original album search application converted to work using client-side techniques.

Example 6-6. AlbumSearchClient.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
    TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Phish Album Search</title>
    <script type="text/javascript">
    var Albums = [
        { title: "A Live One", date: "1995/06/27" },
        { title: "Hampton Comes Alive", date: "1999/11/23" },
        { title: "Live In Vegas", date: "2002/11/12" },
        { title: "Vida Blue", date: "2002/06/25" },
        { title: "The Illustrated Band (Vida Blue)", date: "2003/10/14" }
    ];

    function executeSearch() {
        var term = $get('txtSearch').value.toLowerCase();
        var results = [];
        for (var i = 0; i < Albums.length; i++) {
            var album = Albums[i];
            if (album.title.toLowerCase().indexOf(term) !== −1) {
                results.push(album);
            }
        }
        printResults(results);
        document.title = 'Phish Album Search - "' + term + '"';
    }

    function printResults(results) {
        var list = $get('albumList'),
        list.innerHTML = "";

        var sb = new Sys.StringBuilder();
        for (var i = 0; i < results.length; i++) {
            var album = results[i];
            if (!sb.isEmpty()) {
                sb.append("<hr/>");
            }

sb.append("<div style='font-weight:bold'>");
            sb.append(album.title);
            sb.append("</div><div style='font-style:italic'>Released ");
            sb.append(new Date(album.date).format("MMM dd, yyyy"));
            sb.append("</div>");
        }
        list.innerHTML = sb.toString();
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />

    <input type="text" id="txtSearch" />
    <input type="button" value="Search" onclick="executeSearch()" />

    <div id="albumList">
    </div>
    </form>
</body>
</html>

Rather than use a ListView control on the server to render data that came from the server, this code builds the HTML dynamically on the client based on data retrieved only on the client side, via the printResults() function. For simplicity, the data is declared inline on the page in the Albums global array. Normally, this data would be retrieved by other means, such as by calling a Web service. The executeSearch() function filters the Albums array based on the occurrence of the search term in the album titles. Also for simplicity, sort functionality is missing, but could easily be added. Figure 6-6 shows the page running after performing a search.

Figure 6-6. Figure 6-6

Notice the back button is disabled, as expected based on what the code is doing. Similar to the UpdatePanel based solution, there is no page reloading here, so the browser does not create any history points.

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

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