ptg 94 CHAPTER 2 Using the Standard Controls Using Client Scripts with Button Controls All three Button controls support an OnClientClick property. You can use this property to execute any client-side code that you need when a button is clicked. The page in Listing 2.18 illustrates how you can use the OnClientClick property to display a confirmation dialog box (see Figure 2.14). LISTING 2.18 ButtonOnClientClick.aspx <%@ 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 btnDelete_Click(object sender, EventArgs e) { lblResult.Text = “All pages deleted!”; } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Button OnClientClick</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Button id=”btnDelete” Text=”Delete Website” OnClick=”btnDelete_Click” OnClientClick=”return confirm(‘Are you sure?’);” Runat=”server” /> <br /><br /> <asp:Label id=”lblResult” Runat=”server” /> </div> </form> </body> </html> From the Library of Wow! eBook ptg 95 Submitting Form Data 2 In Listing 2.18, the Button control includes an OnClientClick property, which executes a JavaScript script when you click the button on the client. The script displays a confirma- tion dialog box. If the confirmation box returns False, the button click is canceled, and the form containing the button is not posted to the server. Because the button controls, like most ASP.NET controls, support expando attributes, you can handle other client-side events simply by adding an arbitrary attribute to the control. If ASP.NET Framework does not recognize an attribute declared on a button control, the framework simply passes the attribute to the browser. For example, the page in Listing 2.19 contains a button control that includes onmouseover and onmouseout attributes. When you hover your mouse over the button, the text displayed in the button is changed. LISTING 2.19 ButtonExpando.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 id=”Head1” runat=”server”> <title>Button Expando</title> </head> <body> <form id=”form1” runat=”server”> <div> FIGURE 2.14 Displaying a client-side confirmation dialog box. From the Library of Wow! eBook ptg 96 CHAPTER 2 Using the Standard Controls <asp:Button id=”btnSubmit” Text=”Submit” onmouseover=”this.value=’Click Here!’” onmouseout=”this.value=’Submit’” Runat=”server” /> </div> </form> </body> </html> Performing Cross-Page Posts By default, if you click a button control, the page containing the control is posted back to itself, and the same page is reloaded. However, you can use the PostBackUrl property to post form data to another page. For example, the page in Listing 2.20 includes a search form. The Button control in the page posts the form to another page named ButtonSearchResults.aspx. The ButtonSearchResults.aspx page is contained in Listing 2.21. LISTING 2.20 ButtonSearch.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 id=”Head1” runat=”server”> <title>Button Search</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Label id=”lblSearch” Text=”Search:” Runat=”server” /> <asp:TextBox id=”txtSearch” Runat=”server” /> From the Library of Wow! eBook ptg 97 Submitting Form Data 2 <asp:Button id=”btnSearch” Text=”Go!” PostBackUrl=”ButtonSearchResults.aspx” Runat=”server” /> </div> </form> </body> </html> LISTING 2.21 ButtonSearchResults.aspx <%@ 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”> void Page_Load() { if (PreviousPage != null) { TextBox txtSearch = (TextBox)PreviousPage.FindControl(“txtSearch”); lblSearch.Text = String.Format(“Search For: {0}”, txtSearch.Text); } } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Button Search Results</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Label id=”lblSearch” Runat=”server” /> </div> </form> </body> </html> From the Library of Wow! eBook ptg 98 CHAPTER 2 Using the Standard Controls In the Page_Load event handler in Listing 2.21, the PreviousPage property gets a reference to the previous page (the ButtonSearch.aspx page in Listing 2.20). Next, the FindControl() method retrieves the txtSearch TextBox control from the previous page. Finally, the value entered into the TextBox displays in a label on the page. As an alternative to using the FindControl() method to retrieve a particular control from the previous page, you can expose the control through a page property. The page in Listing 2.22 exposes the txtSearch TextBox through a property named SearchString. The page posts the form data to a page named ButtonSearchResultsTyped.aspx, contained in Listing 2.23. LISTING 2.22 ButtonSearchTyped.aspx <%@ 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”> public string SearchString { get { return txtSearch.Text; } } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Button Search Typed</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Label id=”lblSearch” Text=”Search:” Runat=”server” /> <asp:TextBox id=”txtSearch” Runat=”server” /> <asp:Button id=”btnSearch” Text=”Go!” PostBackUrl=”ButtonSearchResultsTyped.aspx” Runat=”server” /> </div> </form> From the Library of Wow! eBook ptg 99 Submitting Form Data 2 </body> </html> LISTING 2.23 ButtonSearchResultsTyped.aspx <%@ Page Language=”C#” %> <%@ PreviousPageType VirtualPath=”~/ButtonSearchTyped.aspx” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <script runat=”server”> void Page_Load() { if (Page.PreviousPage != null) { lblSearch.Text = String.Format(“Search For: {0}”, PreviousPage. ➥ SearchString); } } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Button Search Results Typed</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Label id=”lblSearch” Runat=”server” /> </div> </form> </body> </html> Notice that the page in Listing 2.23 includes a <%@ PreviousPageType %> directive. This directive casts the value returned by the PreviousPage property as an instance of the ButtonSearchTyped class. Without this directive, the PreviousPage property would return the previous page as an instance of the generic Page class. From the Library of Wow! eBook ptg 100 CHAPTER 2 Using the Standard Controls You can use either method when performing cross-page posts. The first method provides you with an untyped method of retrieving values from the previous page, and the second method provides you with a typed method. Specifying a Default Button You can specify a default button for a form by using the DefaultButton property of the server-side Form control. If you specify a default button, pressing the keyboard Enter key invokes the button. For example, the page in Listing 2.24 contains a simple search form. The <form> tag sets the btnSearch Button control as the default button on the page. LISTING 2.24 ButtonDefaultButton.aspx <%@ 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 btnSearch_Click(object sender, EventArgs e) { lblResult.Text = “Search for: “ + txtSearch.Text; } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Button Default Button</title> </head> <body> <form id=”form1” defaultbutton=”btnSearch” runat=”server”> <div> <asp:Label id=”lblSearch” Text=”Search:” AssociatedControlID=”txtSearch” Runat=”server” /> <asp:TextBox id=”txtSearch” Runat=”server” /> <asp:Button id=”btnSearch” Text=”Search” OnClick=”btnSearch_Click” Runat=”server” /> From the Library of Wow! eBook ptg 101 Submitting Form Data 2 <asp:Button id=”btnCancel” Text=”Cancel” Runat=”server” /> <hr /> <asp:Label id=”lblResult” Runat=”server” /> </div> </form> </body> </html> If you open the page in Listing 2.24, type a search phrase, and press the keyboard Enter key, the form is submitted to the server. Pressing the Enter key causes the btnSearch_Click event handler to execute because the btnSearch button is the default button on the page. NOTE You can als o specify a DefaultButton with a Panel control. The Panel control is dis- cussed later in this chapter. Handling the Command Event All three Button controls support both the Click event and the Command event. The differ- ence between these events is that you can pass a command name and command argu- ment to a Command event handler but not to a Click event handler. For example, the page in Listing 2.25 contains two Button controls and a BulletedList control. When you click the first button, the items displayed by the BulletedList control are sorted in ascending order, and when you click the second button, the items displayed by the BulletedList control are sorted in descending order (see Figure 2.15). LISTING 2.25 ButtonCommand.aspx <%@ Page Language=”C#” %> <%@ Import Namespace=”System.Collections.Generic” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <script runat=”server”> From the Library of Wow! eBook ptg 102 CHAPTER 2 Using the Standard Controls private List<String> groceries = new List<String>(); void Page_Load() { groceries.Add(“Milk”); groceries.Add(“Steak”); groceries.Add(“Fish”); } protected void Sort_Command(object sender, CommandEventArgs e) { if (e.CommandName == “Sort”) { switch (e.CommandArgument.ToString()) { case “ASC”: groceries.Sort(SortASC); break; case “DESC”: groceries.Sort(SortDESC); break; } } } void Page_PreRender() { bltGroceries.DataSource = groceries; bltGroceries.DataBind(); } int SortASC(string x, string y) { return String.Compare(x, y); } int SortDESC(string x, string y) { return String.Compare(x, y) * -1; } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > From the Library of Wow! eBook ptg 103 Submitting Form Data 2 <head id=”Head1” runat=”server”> <title>Button Command</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Button id=”btnSortAsc” Text=”Sort ASC” CommandName=”Sort” CommandArgument=”ASC” OnCommand=”Sort_Command” Runat=”server” /> <asp:Button id=”btnSortDESC” Text=”Sort DESC” CommandName=”Sort” CommandArgument=”DESC” OnCommand=”Sort_Command” Runat=”server” /> <br /><br /> <asp:BulletedList id=”bltGroceries” Runat=”server” /> </div> </form> </body> </html> Both Button controls include CommandName and CommandArgument properties. Furthermore, both Button controls are wired to the same Sort_Command() event handler. This event handler checks the CommandName and CommandArgument properties when determining how the elements in the BulletedList should be sorted. From the Library of Wow! eBook . ButtonSearchResultsTyped.aspx <%@ Page Language=”C#” %> <%@ PreviousPageType VirtualPath=”~/ButtonSearchTyped.aspx” %> <!DOCTYPE html PUBLIC -/ /W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>. the PreviousPage property as an instance of the ButtonSearchTyped class. Without this directive, the PreviousPage property would return the previous page as an instance of the generic Page. you can expose the control through a page property. The page in Listing 2.22 exposes the txtSearch TextBox through a property named SearchString. The page posts the form data to a page named