03.11.2016 Views

Beginning ASP.NET 4.5 in CSharp and VB Opsylum

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

Data Source <strong>and</strong> Data-Bound Controls Work<strong>in</strong>g Together x 463<br />

Insert<strong>in</strong>g Data with DetailsView<br />

Just as display<strong>in</strong>g, updat<strong>in</strong>g, <strong>and</strong> delet<strong>in</strong>g data with the GridView are pretty easy, so is <strong>in</strong>sert<strong>in</strong>g<br />

data with the DetailsView control. The DetailsView supports a number of templates that enable<br />

you to customize the look <strong>and</strong> feel of the control <strong>in</strong> different modes. For example, the control has<br />

a , a , <strong>and</strong> a element that enable you to<br />

def<strong>in</strong>e the look of the top <strong>and</strong> bottom parts of the control. In addition, the control has a <br />

element that enables you to def<strong>in</strong>e the rows that should appear <strong>in</strong> the control, much like the<br />

element of the GridView.<br />

The DetailsView is able to display data <strong>in</strong> a few different modes. First of all, it can display an exist<strong>in</strong>g<br />

row <strong>in</strong> read-only mode. In addition, you can use the control to <strong>in</strong>sert new rows <strong>and</strong> to update<br />

exist<strong>in</strong>g ones. You control the mode of the DetailsView with the DefaultMode property, which you<br />

can set to ReadOnly, Insert, <strong>and</strong> Edit, respectively. You see how to configure the DetailsView<br />

<strong>and</strong> set the DefaultMode property next.<br />

TRY IT OUT<br />

Insert<strong>in</strong>g Data with the DetailsView Control<br />

In this exercise, you see how to use the DetailsView control to let your users <strong>in</strong>sert new rows <strong>in</strong>to the<br />

Genre table. As with the GridView example, the next exercise requires no cod<strong>in</strong>g from your side. All<br />

you need to do is drag <strong>and</strong> drop a few controls, set a few properties, <strong>and</strong> you’re done. Obviously, these<br />

code-free pages have limitations that make them less useful <strong>in</strong> more advanced scenarios. Therefore,<br />

later <strong>in</strong> this chapter, you see how to extend <strong>and</strong> customize these controls.<br />

1. Go back to the Genres.aspx page <strong>in</strong> VS <strong>and</strong> make sure it’s <strong>in</strong> Design View.<br />

2. Drag <strong>and</strong> drop a DetailsView control from the Data category of the Toolbox immediately<br />

below the GridView. If you have trouble dropp<strong>in</strong>g the control below the GridView but above the<br />

SqlDataSource control, you can simply drop it on the SqlDataSource; VS then adds the markup<br />

of the dropped control before the one you drop it on.<br />

3. Open the control’s Smart Tasks panel if it didn’t open automatically <strong>and</strong> hook up the control to<br />

the exist<strong>in</strong>g SqlDataSource1 by select<strong>in</strong>g that name from the Choose Data Source drop-down list.<br />

4. On the same Smart Tasks panel, select the Enable Insert<strong>in</strong>g item.<br />

5. Open the control’s Properties Grid by press<strong>in</strong>g F4 <strong>and</strong> then locate the DefaultMode property <strong>in</strong> the<br />

Behavior category. Set the DefaultMode to Insert. The code for the DetailsView should now<br />

look like this:<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!