ASP.NET 4 Unleased - p 172 pdf

Because the UpdatePanel control in Listing 38.4 contains both the FormView and GridView, you can interact with the page without performing a single postback.. For example, if a Button co

Trang 1

<asp:UpdatePanel

id=”up1”

Runat=”server”>

<asp:FormView

id=”frmFeedback”

DataSourceId=”srcFeedback”

DefaultMode=”Insert”

Runat=”server”>

<asp:Label

id=”lblName”

Text=”Name:”

AssociatedControlID=”txtName”

Runat=”server” />

<asp:RequiredFieldValidator

id=”valName”

Text=”Required”

ControlToValidate=”txtName”

<br />

<asp:TextBox

id=”txtName”

Text=’<%# Bind(“Name”) %>’

<asp:Label

id=”lblComment”

Text=”Comment:”

AssociatedControlID=”txtComment”

<asp:RequiredFieldValidator

id=”valComment”

Text=”Required”

ControlToValidate=”txtComment”

<br />

<asp:TextBox

id=”txtComment”

Text=’<%# Bind(“Comment”) %>’

TextMode=”MultiLine”

Columns=”50”

Rows=”3”

Trang 2

<asp:Button

id=”btnSubmit”

Text=”Submit”

CommandName=”Insert”

</InsertItemTemplate>

</asp:FormView>

<asp:GridView

id=”grdFeedback”

DataSourceID=”srcFeedback”

AllowSorting=”true”

</ContentTemplate>

</asp:UpdatePanel>

<asp:SqlDataSource

id=”srcFeedback”

ConnectionString=’<%$ ConnectionStrings:con %>’

SelectCommand=”SELECT Id,Name,Comment,DateSubmitted

FROM Feedback”

InsertCommand=”INSERT Feedback (Name,Comment)

VALUES (@Name,@Comment)”

</div>

</form>

</body>

</html>

Because the UpdatePanel control in Listing 38.4 contains both the FormView and

GridView, you can interact with the page without performing a single postback When

you submit the form, the form data is submitted back to the server using Ajax When you

sort the columns in the GridView, the sorted rows are retrieved from the server through an

Ajax call

The UpdatePanel control has six important properties:

ChildrenAsTriggers—Gets or sets a Boolean value that indicates whether child

controls should trigger an asynchronous postback automatically

Trang 3

ContentTemplateContainer—Gets the container for the UpdatePanel control’s

ContentTemplate You can add controls to the ContentTemplate programmatically

using this property

IsInPartialRendering—Gets a Boolean value indicating whether the UpdatePanel is

rendered in response to an asynchronous postback

RenderMode—Gets or sets a value that indicates whether the contents of an

UpdatePanel should be enclosed in an HTML <div> or <span> tag Possible values are

Block (the default) and Inline

Triggers—Gets a list of controls that trigger the UpdatePanel to perform either an

asynchronous or synchronous postback

UpdateMode—Gets or sets a value indicating when the content of the UpdatePanel is

updated Possible values are Always (the default) and Conditional

The UpdatePanel also supports the following single important method:

Update()—Causes the UpdatePanel to update its contents

You learn how to take advantage of these properties and methods in the following sections

Specifying UpdatePanel Triggers

By default, an UpdatePanel hijacks any postbacks that any of its child controls performs

For example, if a Button control is contained in an UpdatePanel, the UpdatePanel hijacks

the button Click event and performs an Ajax call instead of the normal postback

You can cause an UpdatePanel to refresh its contents from a control located outside of the

UpdatePanel by specifying a trigger For example, the page in Listing 38.5 contains a

Button control outside of an UpdatePanel that causes the UpdatePanel to refresh its

content

<%@ Page Language=”C#” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<title>Trigger Update Panel</title>

</head>

<body>

<div>

Trang 4

<asp:ScriptManager

id=”sm1”

Page Time: <%= DateTime.Now.ToString(“T”) %>

<br />

<asp:Button

id=”btnUpdate”

Text=”Update”

<asp:UpdatePanel

id=”up1”

Runat=”server”>

<asp:AsyncPostBackTrigger

ControlID=”btnUpdate”

EventName=”Click” />

</Triggers>

Update Panel Time: <%= DateTime.Now.ToString(“T”) %>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

The UpdatePanel in Listing 38.5 includes a Triggers subelement that contains a single

AsyncPostBackTrigger This trigger points to the Button control located outside of the

UpdatePanel named btnUpdate Because the UpdatePanel contains this trigger, clicking the

Button control causes the UpdatePanel to refresh its contents

If you want, you can prevent the UpdatePanel from refreshing its contents unless you

have explicitly created a trigger If you set the UpdatePanel control’s ChildrenAsTriggers

property to the value false, you must explicitly create a trigger to update the contents of

the UpdatePanel

Trang 5

The UpdatePanel supports two types of triggers: AsyncPostBackTrigger and

PostBackTrigger The AsyncPostBackTrigger causes an asynchronous (Ajax) postback

The PostBackTrigger causes a normal entire-page postback

You’ll rarely use a PostBackTrigger The only situation in which it makes sense to use a

PostBackTrigger is when you need to mix buttons that cause asynchronous postbacks

and normal postbacks in the same UpdatePanel control For example, because you cannot

perform a file upload without performing a normal entire-page postback, if a file-upload

button is contained in an UpdatePanel, you need to create a PostBackTrigger for the

file-upload button

Nesting UpdatePanel Controls

One UpdatePanel can contain another UpdatePanel You can nest UpdatePanels to your

heart’s content, just like Russian nesting dolls

Nesting UpdatePanel controls is useful when you want to control how much of a page

gets refreshed during an asynchronous postback Sometimes, you might need to update

only a tiny portion of a page, and other times you might need to update the entire page

For example, the page in Listing 38.6 contains two nested UpdatePanels The outer

UpdatePanel contains a DropDownList, FormView, and ListView control The inner

UpdatePanel contains only the ListView control (see Figure 38.6)

Trang 6

<title>Nested UpdatePanels</title>

fieldset

{

padding: 10px;

}

.comment

{

padding: 10px;

border: dotted 2px black;

margin: 10px;

}

</style>

</head>

<body>

<div>

<asp:ScriptManager

id=”sm1”

Page Time: <%= DateTime.Now.ToString(“T”) %>

<br />

<asp:DropDownList

id=”ddlMovie”

DataSourceID=”srcMovies”

DataValueField=”Id”

DataTextField=”Title”

AutoPostBack=”true”

<asp:SqlDataSource

id=”srcMovies”

SelectCommand=”SELECT Id, Title FROM Movie”

Trang 7

<asp:UpdatePanel ID=”upOuter” UpdateMode=”Conditional” runat=”server”>

<asp:AsyncPostBackTrigger ControlID=”ddlMovie” />

</Triggers>

Outer UpdatePanel Time: <%= DateTime.Now.ToString(“T”) %>

<br />

<asp:FormView

id=”frmMovie”

DataSourceID=”srcMovie”

Runat=”server”>

<legend>Movie</legend>

Title: <%# Eval(“Title”) %>

<br />

Director: <%# Eval(“Director”) %>

<asp:UpdatePanel ID=”upInner” runat=”server”>

<asp:ListView

id=”lstMovieComments”

DataSourceID=”srcMovieComments”

InsertItemPosition=”FirstItem”

Runat=”server”>

<legend>Comments</legend>

Inner UpdatePanel Time: <%= DateTime.Now.ToString(“T”) %>

</div>

</fieldset>

</LayoutTemplate>

<%# Eval(“Comment”) %>

</div>

</ItemTemplate>

<asp:Label

id=”lblComment”

Text=”Comment:”

Trang 8

<br />

<asp:TextBox

id=”txtComment”

Text=’<%# Bind(“Comment”) %>’

TextMode=”MultiLine”

Columns=”40”

Rows=”3”

<br />

<asp:Button

id=”btnInsert”

Text=”Add Comment”

CommandName=”Insert”

</InsertItemTemplate>

</asp:ListView>

</ContentTemplate>

</asp:UpdatePanel>

<asp:SqlDataSource

id=”srcMovieComments”

SelectCommand=”SELECT Id, Comment

FROM MovieComment

WHERE MovieId=@MovieId”

InsertCommand=”INSERT MovieComment (Comment,MovieId)

VALUES (@Comment,@MovieId)”

Runat=”server”>

<asp:ControlParameter Name=”MovieId” ControlID=”ddlMovie” />

</SelectParameters>

<asp:ControlParameter Name=”MovieId” ControlID=”ddlMovie” />

</InsertParameters>

</asp:SqlDataSource>

</fieldset>

</ItemTemplate>

</asp:FormView>

</ContentTemplate>

</asp:UpdatePanel>

<asp:SqlDataSource

id=”srcMovie”

SelectCommand=”SELECT Id, Title, Director

FROM Movie

Trang 9

Runat=”server”>

<asp:ControlParameter Name=”Id” ControlID=”ddlMovie” />

</SelectParameters>

</asp:SqlDataSource>

</div>

</form>

</body>

</html>

When you select a movie by using the DropDownList control, the entire page is updated

When you add a new comment to the movie with the ListView control, on the other

hand, only the comments portion of the page is updated

There are two UpdatePanel controls The first UpdatePanel control has an ID of upOuter

It includes a trigger that points to the DropDownList control used to select a movie This

UpdatePanel control has its UpdateMode property set to the value Conditional If the

UpdateMode property was not set to this value, the outer UpdatePanel would refresh its

content when the Add Comment button contained in the inner UpdatePanel control

was clicked

The inner UpdatePanel is named upInner This UpdatePanel surrounds the ListView used

to display the form for adding and displaying movie comments When you add a new

movie comment, only the comments area of the page is updated and not the entire page

The page, the outer UpdatePanel, and the inner UpdatePanel all display the current time

When you select a new movie, the time displayed by both the outer and inner

UpdatePanel—but not the page—changes When you add a new comment, only the time

displayed by the inner UpdatePanel changes

In general, for performance reasons, you should place the smallest possible area that you

need to update inside of an UpdatePanel control The larger the area contained in an

UpdatePanel, the more content that must be passed across the Internet when the

UpdatePanel is updated By nesting UpdatePanel controls, you have more granular control

over the content that gets updated in a page

Updating UpdatePanels Programmatically

The UpdatePanel control includes an Update() method You can use this method to

update the content of an UpdatePanel programmatically during an asynchronous

postback

Two properties determine when an UpdatePanel control updates its contents: UpdateMode

and ChildrenAsTriggers If you set the UpdateMode property to the value Conditional and

you set ChildrenAsTriggers to the value false (and you don’t define any triggers), the

only way to update an UpdatePanel control’s content is by calling the Update() method

Trang 10

For example, the page in Listing 38.7 enables you to search movies by title The page

contains two UpdatePanel controls The first UpdatePanel control contains a TextBox

control and a Button control The second UpdatePanel control contains a GridView

control, which uses a Movie class (which can be found in the source code on the book’s

website) to communicate with the datbase When you click the button, the Button Click

event is raised on the server through an asynchronous postback The second UpdatePanel

that contains the GridView of results is updated if, and only if, any results are found that

match the search query

protected void btnSearch_Click(object sender, EventArgs e)

{

ArrayList results = Movie.Search(txtSearch.Text);

if (results.Count > 0)

{

grdResults.DataSource = results;

grdResults.DataBind();

upResults.Update();

}

</script>

<title>Update UpdatePanel</title>

</head>

<body>

<div>

<asp:ScriptManager

id=”sm1”

<asp:UpdatePanel

id=”upSearch”

Runat=”server”>

<asp:TextBox

id=”txtSearch”

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