This chapter covers controls that display and maintain data on web sites, including the GridView, DetailsView, and SqlDataSource controls. It discusses how to display, insert, edit, and delete data using these controls while maintaining data integrity. The chapter also covers storing connection strings and using templates and paging with data controls.

1. Chapter 12 – Displaying and Updating Data
Dr. Stephanos Mavromoustakos

2. Chapter Overview
This chapter will cover:
Controls that display and maintain data in your web site
How to display data using the GridView control
How to access the database to retrieve and update data
using a SqlDataSource control
How to insert, edit, and delete data using the data
controls like the GridView and the DetailsView
How to create a rich interface that allows a user to insert
and edit data while maintaining data integrity with the
ASP.NET validation controls
The best way to store your connection strings in your
application so they are easily updateable

3. Data Controls
ASP.NET comes with two sets of data-aware controls:
the data-bound and the data source controls.
Data-bound controls
These are used to display and edit data. The GridView,
DataList, ListView, and Repeater are all able to
display multiple records at the same time, whereas
the DetailsView and the FormView are designed
to show a single record at a time. The DataPager is
used to provide paging capabilities to the ListView
controls.

4. Data Controls
List Controls
GridView – Supports automatic paging, sorting, editing,
deleting, and selecting. It does not allow you to insert records in
the data source directly. It is often used for complex list of data,
such as a list of reviews in the management section of the
PlanetWrox web site, items in a shopping cart, and so on
DataList – Presents your data not only in rows as with the
GridView, but in columns as well. Also, you can define the
look and feel of the data through a set of templates. As a
downside, the control does not support paging and sorting
natively, and doesn’t allow you to insert new records or update
or delete existing ones. It is often used to display repeating data
in rows and columns, e.g. pictures in a photo album or products
in a product catalog.

5. Data Controls
Repeater – It gives you the greatest flexibility in terms of
the HTML that you output to the browser as the control
by itself does not add any HTML to the page output. The
control has no built-in capabilities for the paging, sorting
and modification of data. It is often used when you need
precise control over the markup that is generated by the
control. As such, it’s often used for HTML ordered or
unordered lists (<ol> and <ul>), etc.
ListView – New to the ASP.NET 3.5, it is a very good
combination of the GridView, the DataList, and the
Repeater. It supports editing, deleting, and paging of
data, multi-column and multi-row layouts, and it allows
you to completely control the markup generated by the
control, just as the Repeater does.

6. Data Controls
Single Item Controls - Display one record at a time
DetailsView – It uses a built-in tabular form to
display data
FormView – It uses templates to let you define the
look and feel of your data
Paging Controls
DataPager – It enables paging on other controls

7. Data Controls
Data Source Controls
These are used to bind data to your data-bound
controls. The XmlDataSource and
SiteMapSource, are used to bind hierarchical,
XML-based data to these controls.
The AccessDataSource is used to display data from
a Microsoft Access database in your web pages.
The ObjectDataSource allows you to connect your
data-bound controls to separate objects in your
application.

8. Practice – Using the GridView and
SqlDataSource Controls
In this exercise, you start building the Management
section of the web site that will be your main entry
point to manage things like reviews and genres in
your site.
Open the Planet Wrox project
Right-click the MasterPages folder, choose Add New
Item, and add a new Master Page called
ManagementMaster.master to the site. Make sure it’s
not based on an existing master page (see figure next)

9. Practice – Using the GridView and
SqlDataSource Controls

10. Practice – Using the GridView and
SqlDataSource Controls
 Change the HTML inside the <form> element to the following code.
<form id="form1" runat="server">
<div>
<div style="width: 200px; float: left;">
<ul>
<li><a href="~/Management/Default.aspx"
runat="server">Management Home</a></li>
<li><a href="~/Management/Genres.aspx"
runat="server">Manage Genres</a></li>
</ul>
</div>
<div style="width: 750px; float: left;">
<asp:ContentPlaceHolder id="ContentPlaceHolder1"
runat="server"></asp:ContentPlaceHolder>
</div>
</div>
</form>

11. Practice – Using the GridView and
SqlDataSource Controls
Add a new folder to the root of the site and call it Management.
Right-click this new folder, choose Add New Item, and create a
new page called Default.aspx. Make sure the page is based on
the new ManagementMaster.master file

12. Practice – Using the GridView and
SqlDataSource Controls
Add some text to the cpMainContent block:
<asp:Content ID="Content2"
ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<h1>Planet Wrox Management Section</h1>
<p>Welcome to the Management Section of this
web site. Please choose an item from the
menu on the left to continue.</p>
</asp:Content>
Give the page a Title of Planet Wrox – Management -
Home

13. Practice – Using the GridView and
SqlDataSource Controls
Create another page in the Management folder and call it
Genres.aspx. Base it on the same master page and then
change its Title to Planet Wrox – Management – Genres
Switch the page into Design View. Expand the
PlanetWrox.mdf database from the Database Exxplorer,
and then the Tables node. Then drag the Genre table from
the Database Explorer and drop it in the cpMainContent
area of the Genres page. VWD creates a GridView and a
SqlDataSource for you automatically
On the Smart Tasks panel for the GridView control that
should open automatically, select all the available options
as shown:

14. Practice – Using the GridView and
SqlDataSource Controls

15. Practice – Using the GridView and
SqlDataSource Controls
Right-click the Management folder and choose Add New Item.
Click Web Configuration File once and then click Add to add a
web.config file that applies to the Management folder only. In
the file that opens, add a <pages> element between the
<system.web> elements that sets the theme to an empty
string:
<system.web>
<pages theme=""></pages>
</system.web>
Save all changes and request Genres.aspx from the Management
folder in your browser. The links in the left columns allow you
to edit, delete, and select the relevant genres. Note that you
can’t delete genres that have reviews attached to them. If the
list with reviews ends up below the menu on the left, you may
need to make your browser window a little wider

16. Practice – Using the GridView and
SqlDataSource Controls
You can click the column headers to sort the data in the grid on
that column. If you click the same header again, the data is
sorted in reversed order
Click the Edit link for one of the genres, change the name in the
text box that has appeared and click the Update button. The
GridView should now display the new name

17. Inserting Data with DetailsView
The DetailsView has a <FooterTemplate>, a
<HeaderTemplate>, and a <PageTemplate>
element that enable you to define the looks of the top
and bottom parts of the control. In addition, the
control has a <Fields> element that allows you to
define the rows that should appear in the control.
The DetailsView allows you to display records in
read-only mode, to insert new records, and to update
records. You control the mode of the DetailsView
with the DefaultMode property that you can set to
ReadOnly, Insert, and Edit.

18. Practice – Inserting Data with the
DetailsView Control
Go back to the Design View of the Genres.aspx in
VWD
Drag and drop a DetailsView from the Data
category below the GridView (see figure next)
Open the control’s Smart Tasks (it should open
automatically) and then hook it up to
SqlDataSource1 by selecting that name from the
Choose Data Source drop-down list
On the same Smart Tasks panel, select the item
Enable Inserting

19. Practice – Inserting Data with the
DetailsView Control

20. Practice – Inserting Data with the
DetailsView Control
 Open the control’s Properties Grid by pressing F4 and then locate the DefaultMode
property in the Behavior category. Set the DefaultMode to Insert. The code for the
DetailsView should now looks like this:
<asp:DetailsView ID="DetailsView1" runat="server"
AutoGenerateRows="False"
DataKeyNames="Id" DataSourceID="SqlDataSource1"
DefaultMode="Insert"
Height="50px" Width="125px">
<Fields>
<asp:BoundField DataField="Id" HeaderText="Id"
InsertVisible="False"
ReadOnly="True" SortExpression="Id" />
<asp:BoundField DataField="Name" HeaderText="Name"
SortExpression="Name" />
<asp:BoundField DataField="SortOrder"
HeaderText="SortOrder"
SortExpression="SortOrder" />
<asp:CommandField ShowInsertButton="True" />
</Fields>
</asp:DetailsView>

21. Practice – Inserting Data with the
DetailsView Control
Save the changes to the page, and press Ctrl+F5 to open it
up in your browser. Insert a new Genre. Make sure you
enter both a name and a sort order and then click the
Insert link.

22. Practice – Inserting Data with the
DetailsView Control
Close your browser and go back to VWD and switch the page into
Markup View. Wrap the markup inside the cpMainContent
Content block (ContentPlaceHolder1) inside an Ajax
UpdatePanel1 that you can drag from the Toolbox into the code
editor. Don’t forget to also add a ContentTemplate:
<asp:Content ID="Content2"
ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server"
AllowPaging="True"
. . .
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>

23. Practice – Inserting Data with the
DetailsView Control
Open up the master page for the Management section
(ManagementMaster.master) and add a ScriptManager
right after the opening <form> tag:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1"
runat="server">
</asp:ScriptManager>
<div>
Save all your changes and open Genres.aspx again. Enter a
few more genres. Notice how the addition of the
UpdatePanel made the insert operation flicker-free

24. Practice – Inserting Data with the
DetailsView Control
 If you click one of the numbers at the bottom of the screen in the Pager bar,
the GridView switches to that page showing the next set of rows. The page
switching, sorting, and editing now all occurs within the UpdatePanel
without page postback

25. Filtering Data
Filtering is done with WHERE clause. VWD and
ASP.NET come with many tools that make creating
filters very easy. To filter data, the SqlDataSource
control (and other controls) has a
<SelectParameters> element that enables you to
supply values at run time that are used for filtering.

26. Practice – Setting up the Filter
To make long lists of data easier to manage, it’s good
idea to offer then to the user in smaller, bite-size
blocks. For example, when you need to present a list
with reviews in your database, it’s a good idea to allow
your users to filter them by genre. A DropDownList
with the genres right above the GridView with
reviews would be the perfect solution for that.
Create a new page called Reviews.aspx in the
Management folder and make sure it’s based on the
Management master page. Change the Title of the
page to Planet Wrox – Management - Reviews

27. Practice – Setting up the Filter
Add a link to this page in the master page for the Management
section:
<li><a href="~/Management/Genres.aspx"
runat="server">Manage Genres</a></li>
<li><a
href="~/Management/Reviews.aspx"
runat="server">Manage Reviews</a></li>
</ul>
Go back to Reviews.aspx and switch the page into Design View.
From the Standard category of the Toolbox, drag a
DropDownList control into the page. On its Smart Tasks
panel, select Enable AutoPostBack and then click the Edit Items
link. Insert an item with its Text set to Please make a
selection, and then clear its Value that was inserted for you
automatically.

28. Practice – Setting up the Filter
Click the Choose Data Source dialog box and choose <New
data source> from the drop-down list.
Click Database, leave the ID set to SqlDataSource1, and
click OK
In the dialog box that follows, select the connection string
called PlanetWroxConnectionString1 from the drop-down
list and click Next
Verify that the radio button for Specify Columns from a
Table or View is selected. Also ensure that Genre is
selected in the drop-down list with table names and then
select the Id and Name columns in the Columns section.
Click the ORDER BY button and choose SortOrder from
the Sort by drop-down list and click OK. (see figure next)

29. Practice – Setting up the Filter

30. Practice – Setting up the Filter
Click Next and then Finish. Choose Name for the first drop-
down list. Leave the second drop-down list set to Id.

31. Practice – Setting up the Filter
Click OK to close the dialog box and finish setting up the data source
for the drop-down list
With the DropDownList control still selected, press F4 to open up
its Properties Grid and set the property AppendDataBoundItems to
True. Switch to Markup View and if the static ListItem that
instructs your users to select an item does not have a Value attribute,
add it manually and set it to an empty string.
<asp:DropDownList ID="DropDownList1" runat="server"
AppendDataBoundItems="True"
AutoPostBack="True"
DataSourceID="SqlDataSource1" DataTextField="Name"
DataValueField="Id">
<asp:ListItem Value="">Please make a
selection</asp:ListItem>
</asp:DropDownList>
Save all your changes and then press Ctrl+F5 to open the page in your
browser. You should see the drop-down list. Nothing happens so far
because you didn’t tie any logic to the DropDownList control yet.

32. Practice – Setting up the Filter

33. Practice – Applying the Filter
Switch the page Reviews.aspx to Design View and drag a
GridView on top of the existing SqlDataSource control.
The GridView is added right above it and the Smart Tasks
panel opens
In the Choose Data Source drop-down list, choose <New data
source>. In the Data Source Configuration Wizard, click
Database and click OK
In the dialog box that follows, select the Planet Wrox
connection string from the drop-down list and click Next again
Select the Review table in the Name drop-down list and then
click the asterisk (*) in the Columns list
Click the WHERE button and in the dialog box that follows
enter the details as shown in the next figure:

34. Practice – Applying the Filter
Each of
your
controls
may show
up twice in
the control
ID drop-
down list.
It doesn’t
matter
which of
the
DropDown
List1
options you
choose

35. Practice – Applying the Filter
Click the Add button and then click OK
Back in the Configure Data Source wizard, click Next.
To test the query, click the Test Query button. Enter a
number at Value that you know exists in the Genre
table and click OK. If there are records in the Review
table for the chosen genre, they are displayed in the
Test Query window.

36. Practice – Applying the Filter
Finally, click Finish to finalize the wizard. If you get a dialog
box about refreshing parameters, click Yes.

37. Practice – Applying the Filter
Wrap the markup inside the cpMainContent Content block
(ContentPlaceHolder1) inside an Ajax UpdatePanel1 that you
can drag from the Toolbox into the code editor. Don’t forget to also
add a ContentTemplate:
<asp:Content ID="Content2"
ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<asp:UpdatePanel ID="UpdatePanel1"
runat="server">
<ContentTemplate>
. . .
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
Save all your changes and open Reviews.aspx in your browser. If you
get an error, ensure that you set the Value of the static ListItem in
the drop-down list to an empty string(““)

38. Practice – Applying the Filter
Select a new item in the drop-down list. The page refreshes, and
now shows the reviews that belong to the chosen genre.

39. Practice - Customizing GridView
Columns
In Reviews.aspx, open the Smart Tasks panel for the
SqlDataSource2 control and click Configure Data Source

40. Practice - Customizing GridView
Columns
Click Next to skip the connection and then complete the screen as
shown:

41. Practice - Customizing GridView
Columns
Then click the WHERE button and set up a WHERE clause for the
GenreId column that gets its value from the DropDownList1 control
(as we did before)

42. Practice - Customizing GridView
Columns
Click the Advanced button and have VWD generate
commands for the INSERT, UPDATE, and DELETE
statements. Leave the Optimistic Concurrency check box
unchecked. Click OK to close the Advanced SQL
Generation Options dialog box, then click Next and finally
Finish to update the SQL statement in the source for the
page. When asked whether you want to reset the fields
and keys for the GridView, click Yes
Open the Smart Tasks panel for the GridView and click
Edit Columns. If the Selected Fields list already contains
items, use the Delete button to clear the list first.

43. Practice - Customizing GridView
Columns
In the Available Fields list, select Authorized and then click the Add
button to copy the item to the Selected Fields list. Repeat this for the
CreateDateTime field

44. Practice - Customizing GridView
Columns
In the Available Fields at the top of the screen, select
HyperLinkField and then click the Add button to add the
item to the selected Fields list as well. Move the
HyperLinkField to the top of the list by clicking the button
with the up arrow twice. Then, using the Properties Grid on the
right, set the following properties on the HyperLinkField:
Property Set Its Value To
HeaderText Title
DataNavigateUrlFields Id
DataNavigateUrlFormatString AddEditReview.aspx?={0}
DataTextField Title

45. Practice - Customizing GridView
Columns
Click CommandField from the Available Fields and the add button
again. Then set the HeaderText to Delete and
ShowDeleteButton to True

46. Practice - Customizing GridView
Columns
Click the Authorized column in the Selected Fields
list and then click the blue “Convert This Field into a
TemplateField” link at the bottom right of the dialog
box.
Click the CreateDateTime column on the left and
set its DataFormatString to {0:g}
Click OK to apply the changes
Save all your changes and request the Reviews.aspx in
the browser.

47. Practice - Customizing GridView
Columns