FIU and Murach

Exercise 15-1 Create an application that uses a

DetailsView control
In this exercise, youll create an application that lets the user select a customer from a
GridView control and maintain that customer in a DetailsView control. To make that easier
for you, youll start from an application with a page that contains a GridView control that
lists customers and validation summary and label controls that will be used to display error
messages.

Review the starting code for the application

1. Open the Ch15CustMaintDetailsView.
2. Review the aspx code for the SQL data source, and notice that it retrieves the Email, LastName, and
FirstName columns from the Customers table (hint: the smart tag > Configure Data Source > Next >
Next).

3. Display the page in Design view, and notice that only the LastName and FirstName columns are
displayed in the GridView control. Thats because the Visible property of the Email column has been
set to False. This column must be included in the data source, though, because its the primary key of
the Customers table, and it will be used to display the selected customer in a DetailsView control.

4. Run the application to see that you can page through the customers, but you cant select a customer.

FIU and Murach

Add a select function to the GridView control

5. Add a command field to the GridView control that will let the user select a customer.

6. Run the application again and click the Select button for any customer. Notice how the formatting for
the selected row changes. Thats because a SelectedRowStyle element is included for the control.

Add a default DetailsView control

7. Add a DetailsView control at the beginning of the division that contains the validation summary
control, and set its width to 350 pixels. Note that although this example shows 350px, the default of
the width property is pixel which means 350 is also fine.

FIU and Murach

8. Create a data source for the DetailsView control that retrieves each of the columns from the
Customers table for the customer thats selected in the GridView control. Be sure to generate Insert,
Update, and Delete statements and use optimistic concurrency.

9. Use the Add Field dialog box to add a command field that lets the user Edit, Delete, and Add rows.

FIU and Murach

10. Run the application, display the last page of customers in the GridView control, and select customer
Barbara White. The data for that customer should be displayed in the DetailsView control.

11. Click the Edit button to see that the text boxes that let you edit the data for a customer are all the same
size, and the text box for the address is too small to display the full address for this customer.

FIU and Murach

12. Click the Cancel button to exit from Edit mode, and close the browser window.

Create templates for the DetailsView control

13. Use the Fields dialog box (hint: the smart tag > Edit Field) to convert each of the bound fields in the
DetailsView control to a template field.

14. Modify the EditItem template for each field except the Email and State fields so the width of the text
box is appropriate for the data, and so the user cant enter more characters than are allowed by the
database LastName, FirstName, and PhoneNumber: 20 characters; Address 40 characters; City 30
characters; and ZipCode 9 characters. Note that you have to define the values for the MaxLength
property (not the width property). The default unit of the MaxLength is the character.

FIU and Murach

15. Assign a meaningful name to each text box you just modified. Then, add a required field validator to
each of these fields that displays an asterisk to the right of the text box and displays an error message
in the validation summary control if a value isnt entered in the field.

16. Add another data source to the page below the data source for the DetailsView control. This data
source should retrieve the StateCode and StateName columns from the States table and sort the
results by the StateName column.

17. Replace the text box in the EditItem template for the State field with a drop-down list, and bind the
list to the data source you just created so the state name is displayed in the drop-down list and the
state code is stored in the list. Then, use the DataBindings dialog box (hint: the smart tag of the drop
down list > Edit DataBindings and enter Bind(State) in Custom binding) to bind the SelectedValue
property of the drop-down list to the State field of the Customers table.

FIU and Murach

18. Run the application and click the Edit button in the DetailsView control to make sure you have the
controls in the EditItem template formatted properly.

19. Copy the text boxes, validation controls, and drop-down list you created for the EditItem templates to
the InsertItem templates of the same fields. In addition, add a required field validator to the InsertItem
template for the Email field, and modify the text box so its wider and accommodates a maximum of
25 characters. Note that the same controls (i.e., with the same IDs) can be used in different templates
because one template is rendered at a time. In general IDs should be unique in an aspx file which is
rendered as an html document.
20. Run the application again and click the New button. The InsertItem template should look just like the
EditItem template except that the email field is editable.

FIU and Murach

Add code to check for database and concurrency errors

21. Add event handlers for the ItemUpdated, ItemDeleted, and ItemInserted events of the DetailsView
control. The ItemUpdated and ItemDeleted procedures should check for both database and
concurrency errors, but the ItemInserted procedure should check only for database errors. Display an
appropriate error message in the label at the bottom of the page if an error is detected. Otherwise,
bind the GridView control so it reflects the current data. Recall that when we update, insert, and
delete an item in the GridView, we do not have to bind the data in order to display the changed
results. However, Note that in this case we need to call bind() function of the GridView to update the
data in the GridView since the data sources for the DetailsView and the GridView are different.
Protected Sub DetailsView1_ItemUpdated(ByVal sender As Object,
ByVal e As System.Web.UI.WebControls.DetailsViewUpdatedEventArgs) _
Handles DetailsView1.ItemUpdated
If e.Exception IsNot Nothing Then
lblError.Text = "A database error has occurred. " &
e.Exception.Message
e.ExceptionHandled = True
ElseIf e.AffectedRows = 0 Then
lblError.Text = "Another user may have updated that customer. " &
"Please try again."
Else
GridView1.DataBind()
End If
End Sub
Protected Sub DetailsView1_ItemDeleted(ByVal sender As Object,
ByVal e As System.Web.UI.WebControls.DetailsViewDeletedEventArgs) _
Handles DetailsView1.ItemDeleted
If e.Exception IsNot Nothing Then
lblError.Text = "A database error has occurred. " &
e.Exception.Message
e.ExceptionHandled = True
ElseIf e.AffectedRows = 0 Then
lblError.Text = "Another user may have updated that customer. " &
"Please try again."
Else
GridView1.DataBind()
End If
End Sub
Protected Sub DetailsView1_ItemInserted(ByVal sender As Object,
ByVal e As System.Web.UI.WebControls.DetailsViewInsertedEventArgs) _
Handles DetailsView1.ItemInserted

FIU and Murach

If e.Exception IsNot Nothing Then
lblError.Text = "A database error has occurred. " &
e.Exception.Message
e.ExceptionHandled = True
Else
GridView1.DataBind()
End If
End Sub

22. Run the application and test it to make sure it works correctly.

FIU and Murach

Exercise 15-2 Format the data in a FormView

control
In this exercise, youll modify an application that uses a FormView control for maintaining
customers. That will give you an idea of the flexible layouts you can create using this
control.
1
Open the Ch15CustMaintFormView application. Note that this is different from the
application used in Exercise 15-1.
23. Run the application, and experiment with it until you understand how it works.
24. Display the page in Design view, and select the Edit Templates command from the smart tag menu for
the FormView control. The Item template will be displayed with literal text and a label for each field
on a separate line.

25. Change the text City: to City, State, Zip:. Then, drag the State label so it follows the City label,
and drag the ZipCode label so it follows the State label.

26. Exit from Template Editing mode, and display the page in Source view. Locate the Item template that
you just modified, enter a comma and a space ( ) between the City and State labels, and enter a
space between the State and ZipCode labels.
<p class="label">City, State, Zip:</p>
<p class="display">
<asp:Label ID="CityLabel" runat="server" Text='<%# Bind("City") %>' />,&nbsp;
<asp:Label ID="StateLabel" runat="server" Text='<%# Bind("State") %>' />&nbsp;
<asp:Label ID="ZipCodeLabel" runat="server" Text='<%# Bind("ZipCode") %>' />
</p>

10

FIU and Murach

27. Delete the paragraphs from the Item template with the text State: and Zip Code:, along with the
paragraph that follows each of these paragraphs that previously contained the State and ZipCode
labels.
28. Run the application to see that the city, state, and zip code are now displayed on a single line when
the Item template is displayed.

11