Creating the My Account Page Using ASP.NET


Team-Fly

	Macromedia® DreamWeaver® MX Unleashed By Matthew Pizzi, Zak Ruvalcaba
	Table of Contents

	Chapter 29. Modifying the Database

Now that you've added the functionality for your customers to insert their information into the database, you'll want to add more functionality to allow them to modify it. Suppose a customer moved to a new location and you shipped their product to their old address. You can imagine the confusion. Fortunately, Dreamweaver MX provides a behavior in the Update Record server behavior that enables you to develop a page for user administrative purposes.

Using dynamic Web controls in conjunction with the Update Record server behavior, users will be able to see the information that resides in the database within editable Web controls. After your customers edit the appropriate information, they need only to submit the form to update the information that lies within the database.

Creating the My Account Form

Because all the information will be placed into Web controls, the My Account form will be constructed much the same way that the register.aspx form was. To create the My Account form, follow the steps outlined next:

Create a new page from the WebStore template by selecting New from the File menu; then select the Advanced tab and select the WebStore template.
Change the Header editable region to My Account and replace the Content editable region by inserting a new form.

CAUTION

When inserting a new form, don't forget to go into the code and add a runat="server" attribute.

TIP

You can view the outline of the form by selecting the View Option button from the toolbar, selecting Visual Aids, and clicking Invisible Elements.
Copy the entire table from the "register.aspx" page.
Paste the table into the form you just created within the My Account page. You will not need to change the names of any Web controls.
Save the page as "myaccount.aspx" and test it in the browser.

Binding Form Elements

Now that you have the My Account form created, you will want to make all those Web controls dynamic, meaning that when the page is loaded, text from the database automatically appears within them.

In the previous chapter, you learned how to create dynamic text by dragging an item from the DataSet onto the page. Dynamic Web controls are constructed much the same way in that you can drag an item from the DataSet directly onto the form object that you want to bind that field to. You can start binding all your Web controls using the following process:

Create a new DataSet by selecting DataSet from the Bindings panel. When the DataSet dialog box appears, enter a new DataSet name, select the connection, and choose the Customers_CreditCards view for the table. Figure 29.40 shows the results.

Figure 29.40. Enter all the appropriate information for your new DataSet.
Select OK. Figure 29.41 shows the Bindings panel with all the fields contained within your new DataSet.

Figure 29.41. Expand the DataSet to view all the fields.
Insert a new row into your table just below Last Name. Create a new caption for Customer Number and add a new text box control with the ID CustomerID. This field will be used later so that Dreamweaver MX knows which record it has to update. You may also want to add the Disabled attribute to the tag so that users cannot change the value of this number.
Drag each field from the DataSet into its corresponding control. When you have all the controls bound, the result will look similar to Figure 29.42.

Figure 29.42. Bind all the controls with fields from the DataSet.
Save your work and run it in the browser. The result should look similar to Figure 29.43. Notice all the data within the fields is bound according to the data that lies within the database.

Figure 29.43. All the information within the database will show within the form objects.

Updating an Existing User

Now that you have the form created and all the objects are bound to the appropriate data fields, you are ready to add the functionality that allows users to modify their particular information. Remember the CustomerID text field you added into the form? This number will be used to track which customer is modifying information. If it weren't for this field containing the CustomerID, the Update Record server behavior would not be able to function properly. To add the Update Record functionality, simply follow these steps:

Select Update Record from the Server Behaviors panel.

The Update Record dialog box allows you to select the connection, table or view to update, the form to select the object values from, the columns to update to, and a URL to redirect to after the update takes place. The Update Record dialog box also allows you to match the Web controls with the appropriate fields within the database. Figure 29.44 shows the dialog box with all the necessary modifications.

Figure 29.44. Complete the modifications within the Update Record dialog box.
Save your work and test it in the browser. Figure 29.45 shows how you can change the original phone number which was 5555555555 to 6666666666.

Figure 29.45. Change the default value for any of the form objects.
Click Submit.