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 ...

Get Professional ASP.NET 3.5 AJAX now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial