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.

1. EmptyDataText Property
2. 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">

Editing Details View control with Templates

You can add validation when editing in the DetailsView control by using templates.

• Click on the DetailsView smart tag
• Select Edit Fields

• Click on TemplateField
• Click the Add button

• Click on all but the primary key field and delete it by clicking the red x button

• Click the OK button
• Click the smart tag again and select Edit templates

• Select the smart tag and choose ItemTemplate

The Item template is used to display the data

• Add a label for each field and text describing them

• Click the first label and select the smart tag
• Select Edit Data binding

Make sure text is selected and add this code to the Code Expression
Do this for each label
You can add formatting as well

• Make sure Enable Editing is checked

• Now you can select EditItemTemplate

• Add a two textboxes and text to label them

• Click the smart tag on the first textbox
• Select Edit DataBinding

• Type

bind(“fieldname”)
You must use BIND instead of EVAL

• Click OK

• Do the same for the next textbox

Add a requiredFieldValidator to the template

• Set the controlToValidate property to the name of the first textbox
• Do the same for each textbox

 

• Click the smart tag and select End Template Editing

• Make sure EnablePagingCalls is false