ASP.NET 2.0: A Developeramp;#039;s Notebook [Electronic resources] نسخه متنی

4.4. Display One Record at a Time

Note: The GridView control comes with the companion DetailsView
control, which displays one record at a time.

Besides the GridView control, there
is another new control that is similar to it but presents a slightly
different view. Instead of displaying multiple records on one page,
the DetailsView control displays one record at a time. The
DetailsView control is located in the Toolbox on the Data tab (see
Figure 4-33).

Figure 4-33. The DetailsView control

4.4.1. How do I do that?

To see how the DetailsView control differs from the GridView control,
you will replace the GridView control created in the previous lab
with a DetailsView control. You will also see how the DetailsView
control allows new records to be inserted into the database, which is
not allowed in the GridView control.

Using the project created in the previous lab, replace the GridView
control with the DetailsView control in the default form.

Apply the Mocha theme to the DetailsView control (via the Auto
Format... link in the DetailsView Tasks menu).

In the DetailsView Tasks menu, select
SqlDataSource2 as its data source and select the
following checkboxes (see Figure 4-34):

Enable Paging

Enable Inserting

Enable Editing

Enable Deleting

The checkboxes available are dependent on how the data source is
configured. For example, Enable Editing and Enable Deleting are
available only if the data source that is being used supports them.
If you have configured your data source to support Inserting as well,
there is also an Enable Inserting checkbox.

Figure 4-34. Enabling the DetailsView control for paging, inserting, editing, and deleting

Press F5 to test the application. Figure 4-35 shows
the DetailsView in action. You can also edit and insert new records.

Figure 4-35. Using the DetailsView control

Tip: By default the GridView and DetailsView controls use the field name
of the table as header text. For example, you see au_id and au_fname
used as the header for both the GridView and DetailsView controls in
this and previous labs.To customize the header text of a DetailsView control, click on the
Edit Fields... link in the DetailsView Tasks menu and then configure
it in the Fields dialog (see Figure 4-36) via the
HeaderText property.To customize the header text of a GridView control, click on the Edit
Columns... link in the GridView Tasks menu and then configure it in
the Fields dialog via the HeaderText property.

Figure 4-36. Customizing the header text of a DetailsView control

4.4.2. What about...

...creating a Master/Detail view of records in
a table?

The GridView and DetailsView controls together make a good pair of
controls for displaying a Master/Detail view of records. For example,
the GridView control could display all the employee IDs, and clicking
on a particular employee ID could trigger the DetailsView control to
display the details of the selected employee.

To create a Master/Detail view, follow these steps:

Add a new Web Form to the project and name it
Default2.aspx.

Add a 2 1 table to the Web Form
(Layout Insert Table), and
add a GridView control to the left cell of the table and a
DetailsView control to the right cell of the table (see Figure 4-37).

Figure 4-37. Adding GridView (left) and DetailsView (right) controls to the form

Configure the GridView control to bind to a new SqlDataSource control
and retrieve the au_id field from the authors table in the pubs
database (see the lab Section 4.1
for detailed instruction on how to do this). The Source View of the
GridView control and the newly created SqlDataSource control now
looks like Example 4-2.

Tip: For this example, I strongly suggest you download the sample code
from http://www.oreilly.com/catalog/aspnetadn/.

Example 4-2. Source View of the GridView and SqlDataSource controls

<asp:GridView ID="GridView1" runat="server" 
Width="158px" 
DataSourceID="SqlDataSource1"
AutoGenerateColumns="False" 
DataKeyNames="au_id" 
AllowPaging="True" 
PageSize="4"
AllowSorting="True">
<Columns>
<asp:CommandField ShowSelectButton="True">
</asp:CommandField>
<asp:BoundField ReadOnly="True" 
HeaderText="au_id" 
DataField="au_id" 
SortExpression="au_id">
</asp:BoundField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"  
SelectCommand="SELECT [au_id] FROM [authors]"
ConnectionString="<%$ ConnectionStrings:
pubsConnectionString %>">
</asp:SqlDataSource>

Configure the DetailsView control to bind to a new SqlDataSource
control and retrieve all the fields from the authors table in the
pubs database. In particular, the au_id field is dependent on the
record selected in the GridView control (see Figure 4-38).

Figure 4-38. Selecting a record in the GridView control

The Source View of the DetailsView control and the newly created
SqlDataSource control should now look like the source shown in Example 4-3.

Example 4-3. Source view of the DetailsView and SqlDataSource controls

<asp:DetailsView ID="DetailsView1" runat="server" 
Height="50px" Width="286px" 
DataSourceID="SqlDataSource2"
AutoGenerateRows="False" 
DataKeyNames="au_id">
<Fields>
<asp:BoundField ReadOnly="True" HeaderText="au_id" 
DataField="au_id" SortExpression="au_id">
</asp:BoundField>
<asp:BoundField HeaderText="au_lname" DataField="au_lname" 
SortExpression="au_lname">
</asp:BoundField>
<asp:BoundField HeaderText="au_fname" DataField="au_fname" 
SortExpression="au_fname">
</asp:BoundField>
<asp:BoundField HeaderText="phone" DataField="phone" 
SortExpression="phone">
</asp:BoundField>
<asp:BoundField HeaderText="address" DataField="address" 
SortExpression="address">
</asp:BoundField>
<asp:BoundField HeaderText="city" DataField="city" 
SortExpression="city">
</asp:BoundField>
<asp:BoundField HeaderText="state" DataField="state" 
SortExpression="state">
</asp:BoundField>
<asp:BoundField HeaderText="zip" DataField="zip" 
SortExpression="zip">
</asp:BoundField>
<asp:CheckBoxField HeaderText="contract" 
SortExpression="contract" DataField="contract">
</asp:CheckBoxField>
</Fields>
</asp:DetailsView>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" 
SelectCommand="SELECT * FROM 
[authors] WHERE ([au_id] = @au_id)"
ConnectionString="<%$ ConnectionStrings:
pubsConnectionString %>">
<SelectParameters>
<asp:ControlParameter Name="au_id" ControlID="GridView1" 
PropertyName="SelectedValue"
Type="String" />
</SelectParameters>
</asp:SqlDataSource>

Apply the Sand & Sky theme to both the GridView and DetailsView
controls.

Press F5 to test the application. You should now be able to select a
record in the GridView control and see the details of the selected
record in the DetailsView control (see Figure 4-39).

Figure 4-39. Details of the selected record

4.4.3. Where can I learn more?

One particular operation with the GridView and DetailsView control
that you should take note of is deletion. You
wouldn't want the user to delete a record mistakenly
without giving him a second chance. The GridView
and DetailsView will gladly delete the record
without any warning (if you have enabled deleting). Before a record
is deleted, it is your duty to ensure that the user is asked to
confirm his action. You can do so via a client-side script. To learn
more about writing this kind of script,
check out the following sites:

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dndive/html/data01102002.asp

http://www.dotnetbips.com/displayarticle.aspx?id=108

http://www.dotnetjunkies.com/Article/17F2328F-ECB8-478F-A393-3D0E0F024EC0.dcik

To learn more about the DetailsView control, check out the MSDN Help
topic "DetailsView class."