6.2. Sample Application

In this section you look at an application that does not useASP.NET AJAX to see how it behaves with regard to browser history points and some of the problems they cause. Listing 6-1 (AlbumSearch.aspx), included in the sample code for this chapter, along with Listing 6-2 (AlbumSearch.aspx.cs), is a Web page that allows the user to search for a Phish album by name by typing in a search box and clicking the search button. Search results are displayed in a ListView control, and there are buttons for sorting the results by Title or Release Date.

Example 6-1. AlbumSearch.aspx
<%@ Page Language="C#" CodeFile="AlbumSearch.aspx.cs" Inherits="AlbumSearch" %>
<!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>
</head>
<body>
    <form id="form1" runat="server">
    <asp:TextBox id="txtSearch" runat="server" />
    <asp:Button ID="cmdSearch" runat="server" Text="Search" />

    <asp:ListView ID="AlbumList" runat="server">
        <LayoutTemplate>
            <p>
            Sort Order:
            [<asp:LinkButton ID="SortByTitle" runat="server"
                CommandName="Sort" CommandArgument="Title"
                Text="Title" /> |
            <asp:LinkButton ID="SortByDate" runat="server"
                CommandName="Sort" CommandArgument="ReleaseDate"
                Text="Release Date" />]
            </p>
            <div id="itemPlaceholder" runat="server"></div>
        </LayoutTemplate>
        <ItemTemplate>
            <div style="font-weight:bold">
                <%# Eval("Title") %>
            </div>
            <div style="font-style:italic">
                Released
                <%# Eval("ReleaseDate", "{0:MMM dd, yyyy}") %>
            </div>
        </ItemTemplate>
        <ItemSeparatorTemplate>
            <hr />

</ItemSeparatorTemplate>
    </asp:ListView>
    </form>
</body>
</html>

A textbox and button serve as the search area. A ListView control displays the search results, and contains two LinkButton controls for sorting by Title or Release Date. The code-behind in Listing 6-2 (AlbumSearch.aspx.cs) shows how it is wired all together.

Example 6-2. AlbumSearch.aspx.cs
using System;
using System.Linq;
using System.Web.UI;
using Wrox.ASPAJAX.Samples;

public partial class AlbumSearch : System.Web.UI.Page
{
    protected override void OnInit(EventArgs e) {
        cmdSearch.Click += cmdSearch_Click;
        AlbumList.Sorting += AlbumList_Sorting;
        base.OnInit(e);
    }

    private void AlbumList_Sorting(object sender, System.Web.UI.WebControls.
        ListViewSortEventArgs e) {
        AlbumList.DataSource = FindAlbums(ViewState["CurrentTerm"] as string,
        e.SortExpression);
        AlbumList.DataBind();
    }

    private void cmdSearch_Click(object sender, EventArgs e) {
        string term;
        ViewState["CurrentTerm"] = term = txtSearch.Text;
        AlbumList.DataSource = FindAlbums(term, "");
        AlbumList.DataBind();
    }

    protected override void Render(HtmlTextWriter writer) {
        string term = ViewState["CurrentTerm"] as string;
        if (!String.IsNullOrEmpty(term)) {
            Page.Title = "Phish Album Search - "" + Server.HtmlEncode(term) +
""";
        }
        else {
            Page.Title = "Phish Album Search";
        }
        base.Render(writer);

}

    private object FindAlbums(string searchTerm, string orderBy) {
        return from album in Album.PhishAlbums
                where album.Title.IndexOf(searchTerm,
 StringComparison.OrdinalIgnoreCase) != −1
                orderby orderBy == "Title" ? (object)album.Title :
 (object)album.ReleaseDate
                   select album;
    }
}

Note that both searching and sorting causes a full page refresh, as it posts back to the server. Figure 6-1 shows the results after performing the following sequence.

  1. Search for "blue."

  2. Sort by Release Date.

  3. Search for "live."

  4. Sort by Release Date.

  5. Sort by Title.

Figure 6-1. Figure 6-1

The back button menu shown in Figure 6-1 displays all of the history points the browser created while performing these steps. Notice that the page title includes the search term, and that each one is listed twice. This is because after each search the results are sorted, resulting in another postback with the same search term. Also, clicking back doesn't do what you want it to do here. For the purpose of this Web page, you want the back and forward buttons to jump between different searches, not including any sorting the user has performed between searches. But currently, clicking back will merely change the sort order back to Release Date. You have to click back a second time to get back to the search results for "live."

There is yet another problem with this Web page. Because each of these operations is a postback, the browser displays a scary warning dialog stating that it must resubmit the data to the server if the user attempts to refresh the page. Figure 6-2 shows what this dialog looks like in Internet Explorer. Other browsers have similar dialogs.

Figure 6-2. Figure 6-2

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

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