FIU and MurachExercise 15-1Create an application that uses a DetailsView controlIn 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 applicationOpen the Ch15CustMaintDetailsView.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).

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.

Run the application to see that you can page through the customers, but you cant select a customer.Add a select function to the GridView controlAdd a command field to the GridView control that will let the user select a customer.

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 controlAdd 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.

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. Use the Add Field dialog box to add a command field that lets the user Edit, Delete, and Add rows.

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.

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.

Click the Cancel button to exit from Edit mode, and close the browser window.Create templates for the DetailsView controlUse 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.

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. 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. 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.

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.

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.

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. 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.

Add code to check for database and concurrency errorsAdd 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 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

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

Exercise 15-2Format the data in a FormView controlIn 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.Run the application, and experiment with it until you understand how it works.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. 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.

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.City, State, Zip:

,

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.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.

1