Formview Control

Use the FormView control to:

• Display
• Insert
• Edit
• Delete
• Page

Database records

The formView control is completely template driven

You can also add validation controls

Display Data with the FormView Control

Use the itemTemplate to display database records

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

Using SQL Server:

• Select all the fields

• Click Next

• Click Finish
• Name the data Source control FVDataSource
• Add a formView to the control

• Configure the formView control to the dataSource by selecting the smart tag and click on

• Test it

It will show the first record in the data Source

Here is the code:

The itemTemplate has dataBinding expressions that display the value of the database columns

Visual Studio also added the InsertItemTemplate and the EditItemTemplate for you

The Eval() method retrieves the values of the columns

You can also format the value

Ex:

<%#Eval(“Amount”,”{0:c}”)%>

Paging

You can let the formView automatically create the paging interface or

you can customize it yourself with the PagerTemplate property

To let it automatically allow paging set the AllowPaging property to true

• Click the smart tag on the formView control
• Check Enable Paging

• Test it

Here is the code:

Currently the formView does not support AJAX

Paging is not exactly efficient

PagerTemplate

Allows you to customize the appearance of the paging interface

Properties of PagerTemplate
FirstPageImageURL	Display an image for the first page link
FirstPageText	The text for the first page link
LastPageImageURL	Display an image for the last page link
LastPageText	The text for the last page link
Mode	Display Mode NextPrevious NextPreviousFirstLast Numeric NumericFirstLast
NextPageImageURL	Image for the next page link
NextPageText	Text for the next page link
PageButtonCount	The number of page number links to display
Position	The position of the paging interface Bottom Top TopAndBottom
PreviousPageImageURL	Image for the previous page link
PreviousPageText	The text for the previous page link
Visible	Hides the paging interface

• Click the msart tag on the formView control
• Make sure Enable Paging is true
• Select Edit Templates

• Click the dropdownlist and select PageTemplate

• Add a LinkButton control, name it btnPrev
• Set the text property to Previous Page
• Set the CommandName property to Page
• Set the CommandArgument to Prev

Add another LinkButton control, name it btnNext

• Set the text property to Next Page
• Set the CommandName property to Page
• Set the CommandArgument to Next
• Click the smart tag again and select End Template Editing

Each button you has a CommandName and CommandArgument property

CommandName is set to Page

CommandArgument is set to one of the following

CommandArgument values
First	Navigate to the first page
Last	Navigate to the last page
Prev	Navigate to the previous page
Next	Navigate to the next page
Number	Navigate to a certain page number

• Click on the Source view
• Find the PagerTemplate in the code
• Add a blank line right after the pagerTemplate

• Type:

Page: <%#formView1.PageIndex+1%>

This returns the current page of the formview.

PageIndex is zero based so you must add 1 to it

• Test it

Editing with the formView control

• Click the smart tag
• Select Edit Templates

• Select EditItemTemplate from the dropDownList

Visual Studio automatically added labels and textboxes for each field

You can change these to other controls if you want

It also adds Update and Cancel linkbuttons with the functionality already added

Here is the code:

• All you have to do is add a button to get to this template
• Click the smarttag
• Select Edit Templates
• Select ItemTemplate
• Add a button to the itemTemplate and change the text to Edit
• Change the CommandName to Edit

When the user clicks the button it will take them to the EditItemTemplate

But first your datasource control needs to be configured for updating and deleting for this to work

Select the formView and double click on the dataKeyNames

• Select the column with your primary key and click OK

Add this to the Data Source Control

UpdateCommand="Update Surveys set SurveyName=@SurveyName, SurveyComments=@SurveyCommentswhere Survey_ID=@Survey_ID"

• Test it

Visual Studio automatically uses the same field names as the parameters

You can set the formview to the Edit mode by default by setting the DefaultMode property to Edit

Inserting Data with the formView control

• Add another button to the itemTemplate
• Name it btnNew
• Set the text to New
• Set the command Name to New

You can put the formView into Insert mode by default by setting the defaultMode to Insert

Add the InsertCommand to the data Source control

InsertCommand=”INSERT into surveys(SurveyName,SurveyComments) VALUES (@SurveyName,@SurveyComments)”

• Test it

Deleting Data with the formView control

Deleting also requires you set the dataKeyNames property

• Add another button called btnDelete
• Set the text to Delete
• Set the CommandName to Delete
• Add the SQL statement to the DeleteCommand to the data Source control

DeleteCommand=”Delete from Surveys where survey_id=@survey_id”

EmptyDataTemplate

You can specify a message to display if the data Source is empty

Click the smart tag and select EmptyDataTemplate

Type:

No records available

• Click the smart tag again and select End Template Editing

This message will show if no records are availabe