Skip Navigation LinksASP.Net 2.0 Training : ASP.Net DetailsView
Banner for ASP.Net 2.0 training classes in Visual Basic 2005 

Skip Navigation Links
Visit my other site:

certification training

Free Flash tutorials and training

Free Dreamweaver Video Tutorials

Free PHP Training

Visual Basic Windows Training




If you like this site please link to it


Detailsview Control

ASP.Net DetailsView SeperatorBar

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


ASP.Net DetailsView SeperatorBar
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

 

 


      ASP.Net 2.0 tutorials & training