Build Your Own ASP.NET 2.0 Web Site Using C# & VB, Second Edition

File: SkinFile.skin (excerpt)

<asp:DetailsView runat="server" CssClass="GridMain"

CellPadding="4" GridLines="None">

<RowStyle CssClass="GridRow" />

<HeaderStyle CssClass="GridHeader" />

</asp:DetailsView>

Here, we’ve defined a similar style to the GridView control, which will ensure

that our page has a consistent appearance. Save your work, open AddressBook.as-

px in the browser, and select an employee. You should see something similar to

Figure 11.11.

We’re really making progress now. There’s only one problem—our employee re-

cords don’t include any addresses, and at this moment there’s no way to add

any! Let’s take care of this.

GridView and DetailsView Events

In order to use the GridView and DetailsView controls effectively, we need to

know how to handle their events. In this section, we’ll learn about the events

raised by these controls, with an emphasis on the events that relate to editing

and updating data, as our next goal will be to allow users to edit the employee

details in the DetailsView.

Earlier, you learned how to respond to the user’s clicking of the Select button by

handling the GridView’s SelectedIndexChanged event. Soon you’ll implement

editing functionality, which you’ll achieve by adding an Edit button to the

DetailsView control. The editing features of the GridView and the DetailsView

are very similar, so you can apply the same principles, and even almost the same

code, to both of them.

Both the GridView and DetailsView controls support Edit command buttons,

which will place Edit buttons in the control when the page loads. Once one of

the Edit buttons has been clicked, the row (in case of GridView) or the entire

form (in case of DetailsView) will become editable, and instead of an Edit button,

users will see Update and Cancel buttons.

These features are pretty amazing, because you can achieve this “edit mode”

without writing any HTML at all: the columns know how to render their editable

modes by themselves. If you don’t like their default edit mode appearances, you

can customize them using templates.

452

Chapter 11: Managing Content Using Grid View and Details View

Before writing any code, let’s see what this edit mode looks like. Figure 11.12

shows a GridView control with one of its rows in edit mode.

Figure 11.12. GridView in edit mode

Figure 11.13 shows a DetailsView control in edit mode.

Figure 11.13. DetailsView in edit mode

453

GridView and DetailsView Events

When command buttons such as Edit are clicked, they raise events that we can

handle on the server side. The GridView supports more kinds of command but-

tons, each of which triggers a certain event that we can handle. The action types

and the events they trigger are listed in Table 11.1.

Table 11.1. GridView action types and the events they trigger

Events triggered when clickedAction

SelectedIndexChanging, SelectIndexChangedSelect

RowEditingEdit

RowUpdating, RowUpdatedUpdate

RowCancelingEditCancel

RowDeleting, RowDeletedDelete

RowSorting, RowSorted(sorting buttons)

RowCommand(custom action)

The DetailsView control, on the other hand, has buttons and events that refer

to items, rather than rows, which makes sense when you realize that DetailsView

is used to display the items in one record, while GridView displays a few items

from many records. The DetailsView action types, and the events they generate,

are listed in Table 11.2.

Table 11.2. DetailsView action types and the events they trigger

Events triggered when clickedAction

PageIndexChanging, PageIndexChanged(paging controls)

ItemDeleting, ItemDeletedDelete

ItemInserting, ItemInsertedInsert

ModeChanging, ModeChangedEdit

ItemUpdating, ItemUpdatedUpdate

RowDeleting, RowDeletedDelete

ItemCommand(custom action)

Notice that, except for the RowCommand (for the GridView) and the ItemCommand

(for the DetailsView) events, we have events that are named in the present tense

(i.e. those that end in “ing,” such as SelectedIndexChanging and ItemUpdating),

454

Chapter 11: Managing Content Using Grid View and Details View