Detailsview Control

The DetailsView control in ASP.Net 2.0 is used to create an HTML table that displays the contents of a single database record.

Displaying Data with the Details View Control in ASP.Net 2.0

Open Visual Studio
Add a webForm to your website, name it DetailsView.aspx
Add a DataSource control to the page and configure it to a database

Add a DetailsView control to the webForm
Select the DetailsView control and click on the smart tag
Select Choose Data Source
Select the Data Source control you added

The DetailsView control now formats itself for your data

Test it and it displays the first record

1	< asp : SqlDataSource ID ="SqlDataSource1" runat ="server" ConnectionString =" <%$ ConnectionStrings:codecrumbsConnectionString %> " SelectCommand ="SELECT * FROM [Surveys]"></ asp : SqlDataSource >
2	< asp : DetailsView ID ="DetailsView1" runat ="server" AutoGenerateRows ="False" DataSourceID ="SqlDataSource1" Height ="50px" Width ="208px">
3	< Fields >
4	< asp : BoundField DataField ="Survey_id" HeaderText ="Survey_id" InsertVisible ="False" ReadOnly ="True" SortExpression ="Survey_id" />
5	< asp : BoundField DataField ="SurveyName" HeaderText ="SurveyName" SortExpression ="SurveyName" />
6	< asp : BoundField DataField ="SurveyComments" HeaderText ="SurveyComments" SortExpression ="SurveyComments" />
7	</ Fields >
8	</ asp : DetailsView >

1	SQL Sata Source Control Connection String to the database SelectCommand contains the SQL statement to retrieve the data
2	Open DetailsView Control Set the dataSourceID to our SQL Data Source
3	Set up fields
4	Create a dataBound field The HeaderText is SurveyID – This is the text that is used to label the textbox The dataField is set to the Survey_Id database field
5	Create a dataBound field The HeaderText is SurveyName – This is the text that is used to label the textbox The dataField is set to the SurveyName database field
6	Create a dataBound field The HeaderText is SurveyComments – This is the text that is used to label the textbox The dataField is set to the SurveyComments database field
7	Close the Fields
8	Close the DetailsView Control

DetailsView Fields in ASP.Net 2.0

You can control the appearance of the DetailsView

The DetailView control supports the following Fields
BoundField	Displays the value of a data item as text
CheckBoxField	Displays the value of the data item as a check box
CommandField	Displays links for editing, deleting and selecting rows
ButtonField	Displays the value of a data item as a button, imagebutton, linkbutton
HyperlinkField	Displays the value of a data item as a link
ImageField	Displays the value of a data item as an image
TemplateField	Customize the appearance of a data item

Change the text describing each row

Click on the DetailsView smart tag
Select Edit Fields

Select any of the fields

Select HeaderText
Change the value to whatever you want displayed to the left of the data field

<asp:BoundField DataField="SurveyName" HeaderText="Survey Name" SortExpression="SurveyName" />

You can also choose to not display a field
Select the field you do not want to display

Insert Visible – Determine if this field will be displayed when the detailsView’s mode is set to insert

ShowHeader – Determines if this field will display a header text

Visible – Determines if this field will be displayed

<asp:BoundField DataField="Survey_id" HeaderText="Survey_id" InsertVisible="False" ReadOnly="True" SortExpression="Survey_id" ShowHeader="False" Visible="False" />

Formatting Data

I’ve added another field in the database called PricePaid of type money to demonstrate the dataFormatString property

Select the field you want to format
Add your format string to the DataFormatString property

You must also set the HTMLEncode to false to let the DataFormatString work

<asp:BoundField DataField="PricePaid"
DataFormatString="{0:c}" HeaderText="PricePaid"
SortExpression="PricePaid" HtmlEncode="False" />

Change the order the rows are displayed

You can select one of the fields and click the up or down arrow buttons next to it to mode it up or down in the DetailsView

Displaying a message when there is no data

There are two ways to display a message when the data source is returning no results.

EmptyDataText Property
EmptyDataTemplate Property

EmptyDataText Property

Select the detailsView and click on the EmptyDataText property in the property window
Add a text message to display when no data is available

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataSourceID="SqlDataSource1" Height="50px" Width="208px" EmptyDataText="There is no data">

EmptyDataTemplate

You can display more complex messages when there is no data including ASP.Net controls.

Click on the smart tag
Select Edit Templates

Select EmptyDataTemplate from the dropdownlist

You can now drop controls into this box and set their properties

1	< EmptyDataTemplate >
2	< asp : Label ID ="Label1" runat ="server" Text ="Sorry, No Data"></ asp : Label >< br />
3	< asp : Image ID ="Image1" runat ="server" ImageUrl ="~/NoData.gif" />
4	</ EmptyDataTemplate >

Paging Data with the DetailsView Control in ASP.Net 2.0

To allow paging change the AllowPaging property to true

This can be done in the properties window or by clicking the smart tag

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataSourceID="SqlDataSource1"
Height="50px" Width="208px" EmptyDataText="There is no data" AllowPaging="True">

Paging with AJAX

You page is posted back to the server each time you page by default

You can use AJAX to page through the data in the DetailsView control

Set the EnablePagingCallBacks property to true

Now the paging is done on the client-side

To test this let’s add a label control to the page

Name it showTime

Clear the text property

Double click on the page and add this line of code in the page_load method

showTime.text=DateTime.Now

Test the page and do some paging, notice the date and time does not change. This shows that the page never posted back to the server.

Customize the DetailsView Paging Interface

By default, numbers are displayed for paging

You can change that by changing the PagerSettings property

Click the plus sign next to the pagerSettings in the properties window

You can add a URL for an image in the following properties:

FirstPageImageURL
LastPageImageURL
NextPageImageURL
PreviousPageImageURL

You can change the text links in the following properties:

FirstPageText
LastPageText
Next PageText
Previous PageText

You can change the format or the pager by changing the Mode property

Possible Values are:

Numeric (default)
NextPrevious
NextPreviousFirstLast
NumericFirstLast

You can change the position of the paging control by changing the Position property

Possible values are:

Bottom
Top
TopAndBottom

Change the amount of numbers that display by changing the PageButtonCount property

< PagerSettings PageButtonCount ="2" Mode ="NextPreviousFirstLast" />

Updating Data with the DetailsView Control in ASP.Net 2.0

Change the DetailsView control’s autoGenerateEditButton to true

This adds an Edit linkButton

You must set the DataKeyNames property to the primary key of the data source for this to work

Select the ellipsis button in the DataKeyNames value

Select the primary key and click the arrow button

The control will automatically generate textboxes to allow the user to change the values

It also automatically creates a Update and Cancel linkButton

You must also add an UpdateCommand in your dataSource control

Select the data Source control and click on the UpdateQuery property in the properties window

Add your query into the UpdateCommand

By default the detailsView uses the name of each field as the parameter name, you only need put an @ symbol in front of it (For SQL Server)

You can force the DetailsView control to appear in the Edit mode by setting the defaultMode to Edit

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString=" <%$ ConnectionStrings:codecrumbsConnectionString %>"
SelectCommand="SELECT * FROM [Surveys]"
UpdateCommand="Update Surveys set SurveyName=@SurveyName, SurveyComments=@SurveyComments,PricePaid=@PricePaid where Survey_ID=@Survey_ID"> </asp:SqlDataSource>

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataSourceID="SqlDataSource1"
Height="50px" Width="208px" EmptyDataText="There is no data"
AllowPaging="True" EnablePagingCallbacks="True" AutoGenerateEditButton="True" DataKeyNames="Survey_id">