ASP.NET 4 Unleased - p 54 pot

When you page through the records rendered by the GridView control, the time does not change.. Customizing the Paging Interface By default, when paging is enabled, GridView renders a lis

Trang 1

<asp:ScriptManager ID=”sm1” runat=”server” />

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

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

<asp:GridView

id=”grdMovies”

DataSourceID=”srcMovies”

AllowPaging=”true”

EnableSortingAndPagingCallbacks=”true”

PageSize=”3”

Runat=”server” />

</ContentTemplate>

</asp:UpdatePanel>

<asp:SqlDataSource

id=”srcMovies”

ConnectionString=”<%$ ConnectionStrings:Movies %>”

SelectCommand=”SELECT Id,Title,Director FROM Movies”

</div>

</form>

</body>

</html>

The page in Listing 11.10 includes an UpdatePanel control Because the GridView is

contained in the UpdatePanel, the page containing GridView is not posted back to the

server when you page through GridView

The page in Listing 11.10 displays the current time at the top of the page When you page

through the records rendered by the GridView control, the time does not change Only

the contents of the GridView control are modified

Customizing the Paging Interface

By default, when paging is enabled, GridView renders a list of page numbers at the bottom

of the grid You can modify the user interface for paging through records by modifying

the GridView control’s PagerSettings property For example, the page in Listing 11.11

contains a GridView that renders First, Previous, Next, and Last links at both the top and

bottom of GridView (see Figure 11.7)

Trang 2

LISTING 11.11 PageGridPreviousNext.aspx

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

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

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

<title>Page Grid Previous Next</title>

</head>

<body>

<div>

<asp:GridView

id=”grdMovies”

PageSize=”3”

PagerSettings-Mode=”NextPreviousFirstLast”

PagerSettings-Position=”TopAndBottom”

PagerStyle-HorizontalAlign=”Center”

FIGURE 11.7 Modifying pager settings

Trang 3

<asp:SqlDataSource

id=”srcMovies”

</div>

</form>

</body>

</html>

The PagerSettings class supports the following properties:

FirstPageImageUrl—Enables you to display an image for the first page link

FirstPageText—Enables you to specify the text for the first page link

LastPageImageUrl—Enables you to display an image for the last page link

LastPageText—Enables you to specify the text for the last page link

Mode—Enables you to select a display mode for the pager user interface Possible

values are NextPrevious, NextPreviousFirstLast, Numeric, and NumericFirstLast

NextPageImageUrl—Enables you to display an image for the next page link

NextPageText—Enables you to specify the text for the next page link

PageButtonCount—Enables you to specify the number of page number links to

display

Position—Enables you to specify the position of the paging user interface Possible

values are Bottom, Top, TopAndBottom

PreviousPageImageUrl—Enables you to display an image for the previous page link

PreviousPageText—Enables you to specify the text for the previous page link

Visible—Enables you to hide the paging user interface

The PageButtonCount requires more explanation Imagine that you display the contents of

a database table that contains 3 billion records and you display two records per page In

that case, you need to render an overwhelming number of page numbers The

PageButtonCount property enables you to limit the number of page numbers displayed at

once When PageButtonCount has a value less than the number of page numbers,

GridView renders ellipses, which enables a user to move between ranges of page numbers

The GridView control includes a PagerTemplate, which enables you to completely

customize the appearance of the paging user interface For example, the page in Listing

11.12 uses a Menu control in a PagerTemplate to display a list of page numbers The

Trang 4

PagerTemplate also includes two LinkButton controls, which represent a Previous and

Next link (see Figure 11.8)

FIGURE 11.8 Using a template for the paging interface

LISTING 11.12 PageTemplateGrid.aspx

protected void grdMovies_DataBound(object sender, EventArgs e)

{

Menu menuPager = (Menu)grdMovies.BottomPagerRow.FindControl(“menuPager”);

for (int i = 0; i < grdMovies.PageCount; i++)

{

MenuItem item = new MenuItem();

item.Text = String.Format(“”,i + 1);

item.Value = i.ToString();

if (grdMovies.PageIndex == i)

item.Selected = true;

menuPager.Items.Add(item);

}

Trang 5

}

protected void menuPager_MenuItemClick(object sender, MenuEventArgs e)

{

grdMovies.PageIndex = Int32.Parse(e.Item.Value);

}

</script>

.menu td

{

padding:5px 0px;

}

.selectedPage a

{

font-weight:bold;

color:red;

}

</style>

<title>Page Template Grid</title>

</head>

<body>

<div>

<asp:GridView

id=”grdMovies”

PageSize=”3”

Runat=”server” OnDataBound=”grdMovies_DataBound”>

<table>

<asp:LinkButton

id=”lnkPrevious”

Text=”< Prev”

CommandName=”Page”

CommandArgument=”Prev”

ToolTip=”Previous Page”

</td><td>

<asp:Menu

id=”menuPager”

Trang 6

Orientation=”Horizontal”

OnMenuItemClick=”menuPager_MenuItemClick”

StaticSelectedStyle-CssClass=”selectedPage”

CssClass=”menu”

</td><td>

<asp:LinkButton

id=”lnkNext”

Text=”Next >”

CommandName=”Page”

CommandArgument=”Next”

ToolTip=”Next Page”

</td></tr>

</table>

</PagerTemplate>

</asp:GridView>

<asp:SqlDataSource

id=”srcMovies”

</div>

</form>

</body>

</html>

The GridView in Listing 11.12 includes a PagerTemplate that contains a Menu control

When GridView is bound to its data source, the grdMovies_DataBound() method executes

and creates menu items that correspond to each page in GridView When you click a

menu item, the page index of GridView is updated

To customize the PagerTemplate, you can add button controls to the template such as the

Button, ImageButton, or LinkButton controls Set the CommandName property of the Button

control to the value Page and the CommandArgument property to one of the following values:

Next—Causes the GridView to display the next page of data items

Prev—Causes the GridView to display the previous page of data items

First—Causes the GridView to display the first page of data items

Last—Causes the GridView to display the last page of data items

Integer Value—Causes the GridView to display a particular page of data items

Trang 7

Editing Data

The GridView control also enables you to edit database data The amazing thing is that

you can use the GridView to edit the contents of a database table row without writing a

single line of code

The page in Listing 11.13 illustrates how you can update and delete records in the Movies

database table by using the GridView control (see Figure 11.9)

FIGURE 11.9 Editing records with the GridView

LISTING 11.13 EditGrid.aspx

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

<title>Edit GridView</title>

</head>

<body>

<div>

<asp:GridView

id=”grdMovies”

Trang 8

DataKeyNames=”Id”

AutoGenerateEditButton=”true”

AutoGenerateDeleteButton=”true”

<asp:SqlDataSource

id=”srcMovies”

UpdateCommand=”UPDATE Movies SET Title=@Title, Director=@Director

WHERE Id=@Id”

DeleteCommand=”DELETE Movies WHERE Id=@Id”

</div>

</form>

</body>

</html>

In Listing 11.13, the GridView control has both its AutoGenerateEditButton and

AutoGenerateDeleteButton properties enabled When these properties are enabled, Edit

and Delete links are automatically rendered next to each row in the GridView

NOTE

You can take advantage of the <%@ Page %> directive’s

MaintainScrollPositionOnPostback attribute to scroll a page back automatically to

the same position whenever the page is posted back to the server For example, if you

add this attribute and click an Edit link rendered by a GridView, the page automatically

scrolls to the record being edited This attribute works with Internet Explorer 6+, Firefox

1+, and Opera 8+

When you click an Edit link, you can edit a particular database row The GridView

auto-matically renders a check box for any Boolean columns and a text field for any other

type of column

NOTE

The GridView control does not support inserting new records into a database table If

you need to insert new records, use the ListView, DetailsView, or FormView control

Trang 9

Furthermore, the GridView control includes a DataKeyNames property When editing and

deleting rows with the GridView, you need to assign the name of the primary key field

from the database table being modified to this property In Listing 11.13, the Movies ID

column is assigned to the DataKeyNames property

Finally, the SqlDataSource control associated with the GridView control includes a

SelectCommand, UpdateCommand, and DeleteCommand property These properties contain

the SQL statements executed when you display, insert, and delete records with the

GridView control

The SQL statements contained in both the UpdateCommand and DeleteCommand include

parameters For example, the UpdateCommand looks like this:

UPDATE Movies SET Title=@Title, Director=@Director

WHERE Id=@Id

The @Title and @Director parameters represent the new values for these columns that a

user enters when updating a record with the GridView control The @Id parameter

represents the primary key column from the database table

Handling Concurrency Issues

The GridView control can track both the original and modified value of each database

column The GridView control tracks the original and updated values of a column so that

you can handle concurrency conflicts Imagine that you are building a massive order entry

system Your company has hundreds of employees modifying orders with a page that

contains a GridView control If two employees open the same customer record at the same

time, one employee might overwrite changes made by the other employee You can

prevent this type of concurrency conflict by using the page in Listing 11.14

LISTING 11.14 Concurrency.aspx

protected void srcMovies_Updated(object sender, SqlDataSourceStatusEventArgs e)

{

if (e.AffectedRows == 0)

lblMessage.Text = “Could not update record”;

}

</script>

<title>Concurrency</title>

</head>

Trang 10

<body>

<div>

<asp:Label ID=”lblMessage” EnableViewState=”false” runat=”server” />

<asp:GridView

id=”grdMovies”

DataKeyNames=”Id”

AutoGenerateEditButton=”true”

<asp:SqlDataSource

id=”srcMovies”

ConflictDetection=”CompareAllValues”

OldValuesParameterFormatString=”original_{0}”

UpdateCommand=”UPDATE Movies SET Title=@Title, Director=@Director

WHERE Id=@original_Id AND Title=@original_Title AND

Director=@original_Director”

Runat=”server” OnUpdated=”srcMovies_Updated” />

</div>

</form>

</body>

</html>

In Listing 11.14, the SqlDataSource control includes both a ConflictDetection and

OldValuesParameterFormatString property These two properties cause the SqlDataSource

control to track both the original and modified versions of each column

The ConflictDetection property can have one of the following two values:

CompareAllValues

OverwriteChanges

By default, the ConflictDetection property has the value OverwriteChanges, which

causes the SqlDataSource control to overwrite the previous value of a column with its

new value When ConflictDetection is set to the value CompareAllValues, the

SqlDataSource tracks both the original and modified version of each column

The OldValuesParameterFormatString property provides a distinguishing name for the

original value of a column For example, the value of the SqlDataSource control’s

UpdateCommand looks like this:

Tiêu đề	Using the GridView Control
Trường học	University of Wow!
Chuyên ngành	Computer Science
Thể loại	Essay
Năm xuất bản	2025
Thành phố	Wow City

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