ASP.NET 4 Unleased - p 13 pps
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (501.44 KB, 10 trang )
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”
“
<script runat=”server”>
protected void btnDelete_Click(object sender, EventArgs e)
{
lblResult.Text = “All pages deleted!”;
}
</script>
<html xmlns=” >
<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”
“
<html xmlns=” >
<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”
“
<html xmlns=” >
<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”
“
<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=” >
<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”
“
<script runat=”server”>
public string SearchString
{
get { return txtSearch.Text; }
}
</script>
<html xmlns=” >
<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”
“
<script runat=”server”>
void Page_Load()
{
if (Page.PreviousPage != null)
{
lblSearch.Text = String.Format(“Search For: {0}”, PreviousPage.
➥
SearchString);
}
}
</script>
<html xmlns=” >
<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”
“
<script runat=”server”>
protected void btnSearch_Click(object sender, EventArgs e)
{
lblResult.Text = “Search for: “ + txtSearch.Text;
}
</script>
<html xmlns=” >
<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”
“
<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=” >
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
