ASP.NET 4 Unleased - p 63 docx

The DetailsView control in Listing 12.14 includes an AutoGenerateInsertButton prop-erty that has the value True.. If you want the DetailsView control to display an insert form by default

Trang 1

The DetailsView control in Listing 12.14 includes an AutoGenerateInsertButton

prop-erty that has the value True This property automatically generates the user interface for

inserting a new record

After you open the page in Listing 12.14, you can click the New button to display a form

for inserting a new record When you click the Insert button, the SQL command

repre-sented by the SqlDataSource control’s InsertCommand property is executed

If you want the DetailsView control to display an insert form by default, you can assign

the value Insert to the DetailsView control’s DefaultMode property This approach is

illustrated by the page in Listing 12.15 (see Figure 12.10)

FIGURE 12.10 Inserting a record with the DetailsView control

LISTING 12.15 ShowInsertMode.aspx

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

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

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

html

{

background-color:silver;

Trang 2

font:14px Arial,Sans-Serif;

}

td,th

{

padding:10px;

}

#divDisplay

{

border:solid 1px black;

width:400px;

padding:15px;

background-color:#eeeeee;

}

#divInsert

{

display:none;

width:400px;

position:absolute;

top:30px;

left:100px;

padding:10px;

background-color:white;

}

</style>

function showInsert()

{

var divInsert = document.getElementById(‘divInsert’);

divInsert.style.display = ‘block’;

}

</script>

<title>Show Insert Mode</title>

</head>

<body>

<asp:GridView

id=”grdMovies”

DataSourceID=”srcMovies”

Runat=”server” />

<br />

<a href=”JavaScript:showInsert();”>Insert Movie</a>

</div>

Trang 3

<h1>Insert Movie</h1>

<asp:DetailsView

id=”dtlMovies”

AutoGenerateInsertButton=”true”

AutoGenerateRows=”false”

DefaultMode=”Insert”

Runat=”server”>

<asp:BoundField

DataField=”Title”

HeaderText=”Title:” />

<asp:BoundField

DataField=”Director”

HeaderText=”Director:” />

<asp:CheckBoxField

DataField=”InTheaters”

HeaderText=”In Theaters:” />

</Fields>

</asp:DetailsView>

</div>

<asp:SqlDataSource

id=”srcMovies”

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

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

InsertCommand=”INSERT Movies (Title,Director,InTheaters)

VALUES (@Title,@Director,

</form>

</body>

</html>

The page in Listing 12.15 contains both a GridView and DetailsView control The

DetailsView control is hidden until you click the Insert Movie link This link executes a

JavaScript function named ShowInsert(), which displays the DetailsView control

NOTE

You can hide a column when a DetailsView control is in Insert mode with the

BoundField control’s InsertVisible property This property is useful, for example,

when you want to prevent users from inserting a value for an identity column

Trang 4

Deleting Data with the DetailsView Control

You can delete records with the DetailsView control by enabling its AutoGenerateDelete

Button property The page in Listing 12.16 enables you to both insert and delete records

in the Movies database table

LISTING 12.16 ShowDelete.aspx

<title>Show Delete</title>

</head>

<body>

<div>

<asp:DetailsView

id=”dtlMovies”

AllowPaging=”true”

DataKeyNames=”Id”

AutoGenerateDeleteButton=”true”

AutoGenerateRows=”false”

Runat=”server”>

<asp:BoundField

DataField=”Id”

HeaderText=”ID:”

InsertVisible=”false” />

<asp:BoundField

DataField=”Title”

HeaderText=”Title:” />

<asp:BoundField

DataField=”Director”

HeaderText=”Director:” />

<asp:CheckBoxField

DataField=”InTheaters”

HeaderText=”In Theaters:” />

</Fields>

</asp:DetailsView>

<asp:SqlDataSource

Trang 5

id=”srcMovies”

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

DeleteCommand=”DELETE Movies WHERE id=@Id”

</div>

</form>

</body>

</html>

When deleting records, you need to supply a value for the DetailsView control’s

DataKeyNames property A parameter named @Id represents the value of the ID column in

the DeleteCommand property

Working with DetailsView Control Events

The DetailsView control supports the following events:

DataBinding—Raised immediately before the DetailsView control is bound to its

data source

DataBound—Raised immediately after the DetailsView control is bound to its data

source

ItemCommand—Raised when any control contained in the DetailsView raises an

event (for example, when you click a button rendered by a ButtonField)

ItemCreated—Raised when a DetailsView renders a data item

ItemDeleting—Raised immediately before a data item is deleted

ItemDeleted—Raised immediately after a data item is deleted

ItemInserting—Raised immediately before a data item is inserted

ItemInserted—Raised immediately after a data item is inserted

ItemUpdating—Raised immediately before a data item is updated

ItemUpdated—Raised immediately after a data item is updated

ModeChanging—Raised immediately before the DetailsView control’s mode is

changed

ModeChanged—Raised immediately after the DetailsView control’s mode is changed

PageIndexChanging—Raised immediately before the current page is changed

PageIndexChanged—Raised immediately after the current page is changed

Trang 6

FIGURE 12.11 Handling database insert errors

LISTING 12.17 InsertErrors.aspx

protected void dtlMovies_ItemInserted(object sender,

➥DetailsViewInsertedEventArgs e)

{

if (e.Exception != null)

{

e.ExceptionHandled = true;

e.KeepInInsertMode = true;

lblError.Visible = true;

Several of these events reflect similar events exposed by the DataSource controls For

example, the SqlDataSource control includes Inserting and Inserted events, which

mirror the DetailsView control’s ItemInserting and ItemInserted events

The page in Listing 12.17 demonstrates how to use the ItemInserted event to handle

any errors that might be raised when inserting a new record into a database table (see

Figure 12.11)

Trang 7

}

</script>

.error

{

color:red;

font:bold 14px Arial,Sans-Serif;

}

</style>

<title>Insert Errors</title>

</head>

<body>

<div>

<asp:Label

id=”lblError”

Text=”Could not insert record”

Visible=”false”

EnableViewState=”false”

CssClass=”error”

<asp:DetailsView

id=”dtlMovies”

OnItemInserted=”dtlMovies_ItemInserted”

<asp:SqlDataSource

id=”srcMovies”

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

</div>

</form>

</body>

</html>

Trang 8

If you attempt to insert a record without providing values for the Title or Director column,

the error message contained in the Label control displays

When you insert a record, the DetailsView control raises the ItemInserted event The

second parameter passed to the event handler for this method contains a property that

exposes any exceptions raised when inserting the record In Listing 12.17, if there is an

exception, the exception is suppressed with the ExceptionHandled property Furthermore,

the KeepInInsertMode property prevents the DetailsView from automatically switching

out of Insert mode

Formatting the DetailsView Control

The DetailsView control includes an abundance of properties for formatting the control I

recommend that you format the DetailsView control by taking advantage of Cascading

Style Sheets (CSS) All the following properties expose a Style object that includes a

CssClass property:

CssClass—Enables you to associate a style sheet class with the DetailsView control

AlternatingRowStyle—Represents every other row rendered by the DetailsView

control

CommandRowStyle—Represents the row that contains the edit buttons

EditRowStyle—Represents rows when the DetailsView control is in Edit mode

EmptyDataRowStyle—Represents the row displayed when the data source does not

return any data items

FieldHeaderStyle—Represents the cell displayed for the field labels

FooterStyle—Represents the footer row

HeaderStyle—Represents the header row

InsertRowStyle—Represents rows when the DetailsView control is in Insert mode

PagerStyle—Represents the row or rows that display the paging user interface

RowStyle—Represents the rows displayed by the DetailsView control

Furthermore, you can take advantage of the following properties when formatting a

DetailsView control:

GridLines—Enables you to specify the appearance of the rules that appear around

the cells of the table rendered by a DetailsView control Possible values are None,

Horizontal, Vertical, and Both

HeaderText—Enables you to specify text that appears in the header of the

DetailsView control

Trang 9

LISTING 12.18 FormatDetailsView.aspx

.movies td,.movies th

{

padding:10px;

}

.movies

{

border:double 4px black;

}

.header

FIGURE 12.12 Formatting a DetailsView control with CSS

FooterText—Enables you to specify text that appears in the footer of the

DetailsView control

The page in Listing 12.18 uses several of these properties to format a DetailsView control

(see Figure 12.12)

Trang 10

{

letter-spacing:8px;

font:bold 16px Arial,Sans-Serif;

}

.fieldHeader

{

font-weight:bold;

}

.alternating

{

}

.command

{

}

.command a

{

color:black;

font:14px Arials,Sans-Serif;

text-decoration:none;

padding:3px;

}

.command a:hover

{

background-color:yellow;

}

.pager td

{

padding:2px;

}

</style>

<title>Format DetailsView</title>

</head>

<body>

<div>

<asp:DetailsView

id=”dtlMovies”

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