ASP.NET 4 Unleased - p 13 pps

In Listing 2.18, the Button control includes an OnClientClick property, which executes a JavaScript script when you click the button on the client.. For example, the page in Listing 2.19

Trang 1

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

protected void btnDelete_Click(object sender, EventArgs e)

{

lblResult.Text = “All pages deleted!”;

}

</script>

<title>Button OnClientClick</title>

</head>

<body>

<div>

<asp:Button

id=”btnDelete”

Text=”Delete Website”

OnClick=”btnDelete_Click”

OnClientClick=”return confirm(‘Are you sure?’);”

Runat=”server” />

<asp:Label

id=”lblResult”

</div>

</form>

</body>

</html>

Trang 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 confirmaconfirma-tion 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

<title>Button Expando</title>

</head>

<body>

<div>

FIGURE 2.14 Displaying a client-side confirmation dialog box

Trang 3

<asp:Button

id=”btnSubmit”

Text=”Submit”

onmouseover=”this.value=’Click Here!’”

onmouseout=”this.value=’Submit’”

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

<title>Button Search</title>

</head>

<body>

<div>

<asp:Label

id=”lblSearch”

Text=”Search:”

<asp:TextBox

id=”txtSearch”

Trang 4

<asp:Button

id=”btnSearch”

Text=”Go!”

PostBackUrl=”ButtonSearchResults.aspx”

</div>

</form>

</body>

</html>

LISTING 2.21 ButtonSearchResults.aspx

void Page_Load()

{

if (PreviousPage != null)

{

TextBox txtSearch = (TextBox)PreviousPage.FindControl(“txtSearch”);

lblSearch.Text = String.Format(“Search For: {0}”, txtSearch.Text);

}

</script>

<title>Button Search Results</title>

</head>

<body>

<div>

<asp:Label

id=”lblSearch”

</div>

</form>

</body>

</html>

Trang 5

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

public string SearchString

{

get { return txtSearch.Text; }

}

</script>

<title>Button Search Typed</title>

</head>

<body>

<div>

<asp:Label

id=”lblSearch”

Text=”Search:”

<asp:TextBox

id=”txtSearch”

<asp:Button

id=”btnSearch”

Text=”Go!”

PostBackUrl=”ButtonSearchResultsTyped.aspx”

</div>

</form>

Trang 6

</body>

</html>

LISTING 2.23 ButtonSearchResultsTyped.aspx

<%@ PreviousPageType VirtualPath=”~/ButtonSearchTyped.aspx” %>

void Page_Load()

{

if (Page.PreviousPage != null)

{

lblSearch.Text = String.Format(“Search For: {0}”, PreviousPage

➥SearchString);

}

</script>

<title>Button Search Results Typed</title>

</head>

<body>

<div>

<asp:Label

id=”lblSearch”

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

Trang 7

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

protected void btnSearch_Click(object sender, EventArgs e)

{

lblResult.Text = “Search for: “ + txtSearch.Text;

}

</script>

<title>Button Default Button</title>

</head>

<body>

<div>

<asp:Label

id=”lblSearch”

Text=”Search:”

AssociatedControlID=”txtSearch”

<asp:TextBox

id=”txtSearch”

<asp:Button

id=”btnSearch”

Text=”Search”

OnClick=”btnSearch_Click”

Trang 8

<asp:Button

id=”btnCancel”

Text=”Cancel”

<hr />

<asp:Label

id=”lblResult”

</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 also 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

<%@ Import Namespace=”System.Collections.Generic” %>

Trang 9

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>

Trang 10

<title>Button Command</title>

</head>

<body>

<div>

<asp:Button

id=”btnSortAsc”

Text=”Sort ASC”

CommandName=”Sort”

CommandArgument=”ASC”

OnCommand=”Sort_Command”

<asp:Button

id=”btnSortDESC”

Text=”Sort DESC”

CommandName=”Sort”

CommandArgument=”DESC”

OnCommand=”Sort_Command”

<asp:BulletedList

id=”bltGroceries”

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

Định dạng
Số trang	10
Dung lượng	501,44 KB