This tutorial creates the ASP.NET/VB version of the Edit Listing Details page from Chapter 16 of The Joy of Dreamweaver MX. It includes coverage of DataGrids, DataSets, web controls, and setting up an ASP.NET site in Dreamweaver MX.
The Joy of Dreamweaver MX: Recipes for Data-Driven Web Sites is a web developer's cookbook filled with dozens of "secret" recipes that DMXers can really sink their teeth into.
Download the code for the tutorial from the book's companion web site, or read a sample chapter - "Uploads Made Simple" - here on DMXzone.
We want the Category column to display static text by default, and a drop-down
menu in edit mode. To do this, we'll take advantage of ASP.NET's <EditItemTemplate>
tag, which is conveniently supported by Dreamweaver MX. The source of the drop-down
menu is the dsRoomCats DataSet we created in the
beginning of this tutorial.
Double-click dgEditDetails in the Server Behaviors
panel to open the DataGrid SB. Click the plus (+) button and choose Free Form.
Type Category in the Title text box and enter the following
code in the Contents area:
<asp:label id="RoomCategory" runat="server"
Text=''></asp:label>
To add the RoomCategory column, click Add Data
Field and select RoomCategory from the Data Field
drop-down menu. Click OK. Cut and paste the data binding expression, <%#
dsListingRooms.FieldValue("RoomCategory", Container) %>,
within the single quotes in the Text attribute.
The completed code should look like this:
<asp:label id="RoomCategory" runat="server"
Text='<%# dsListingRooms.FieldValue("RoomCategory", Container)
%>'>
</asp:label>
Now for the cool part. To specify alternate content when the user clicks the
Edit button, simply choose EditItemTemplate from the Template drop-down menu.
The following instructions appear in the Contents area:
Replace this text with the contents that should appear
when an item is to be edited.
The DataGrid supports the following controls:
asp:textbox
asp:checkbox
asp:dropdown
The id of the control must match the name of the field
that it is bound to.
Following Macromedia's advice, let's use the <asp:dropdownlist>
tag in the EditItemTemplate.
NOTE: Macromedia erroneously uses the terms asp:dropdown when it
should say asp:dropdownlist.
Unfortunately, we can't access the Insert bar when the DataGrid server behavior
is open, so we're going to use a workaround. Type dropdownlist
in the Contents area and click OK to close the DataGrid SB. Switch to Code view
and locate the code we just inserted (it should be near the bottom of the page):
<EditItemTemplate>dropdownlist</EditItemTemplate>
Select the word "dropdownlist" in Code view and click the ASP.NET
tab on the Insert bar. Click the asp:dropdownlist button. This opens the Dropdownlist
tag editor. In the General category, enter RoomCatID in the
ID text box. Select the Data category and enter <%# dsRoomCats.DefaultView
%> in the Data Source text box (this is the DataSet we created at
the beginning of this tutorial). Enter RoomCategory in the
Data Text Field, and RoomCatID in the Data Value Field (these
are analagous to the Labels and Values fields in the Dynamic List/Menu SB).
Click OK.
In Code view, delete the word "dropdownlist" and add a SelectedIndex
attribute to the <asp:dropdownlist> tag (the
new code is shaded):
<asp:dropdownlist DataSource="<%# dsRoomCats.DefaultView
%>"
DataTextField="RoomCategory"
DataValueField="RoomCatID" ID="RoomCatID" runat="server"
SelectedIndex='<%# (dsListingRooms.FieldValue("RoomCatID",
Container)-1) %>'>
</asp:dropdownlist>
Open the dgDataGrid SB and use the up arrow to
move Category below the Photo column. Select Category and click Edit. Select
EditItemTemplate from the drop-down menu: the <asp:dropdownlist>
tag we inserted appears in the Contents area. To ensure that updates are inserted
into the correct database column, type RoomCatID in the Submit
Control With ID text box, and choose Integer from the Submit
As drop-down menu.
Click OK to close the dialog boxes and save your work.
The Room Column
To Room column is virtually identical to the Category column, except that the
data source is dsRoomNames.DefaultView, and the
Data Text Field and the Data Value Field are RoomName
and RoomNameID, respectively. Double-click dgEditDetails
in the Server Behaviors panel and see if you can add the Room column to the
DataGrid using the steps we followed above. If you get stuck, take a look at
the completed version of the Edit Listing Details page: edit-details_complete.aspx.
The Description Column
To create the Description column, double-click dgEditDetails
in the Server Behaviors panel. Click the plus (+) button and choose Free Form.
Enter Description in the Title text box and insert the following
code in the Contents area:
<asp:label id="ListingRooomDesc" runat="server"
Text='<%# dsListingRooms.FieldValue("ListingRoomDesc", Container)
%>'>
</asp:label>
Select EditItemTemplate from the Template drop-down menu and replace Macromedia's
instructions with the following code:
<asp:textbox id="ListingRoomDesc" width="80px"
runat="server"
text='<%# dsListingRooms.FieldValue("ListingRoomDesc", Container)
%>'>
</asp:textbox>
Enter ListingRoomDesc in the Submit Control With ID text box,
and select WChar from the Submit As drop-down menu. Click OK
to close the Free Form Column dialog box.
Use the up arrow to move Description below the Category and Room columns and
click OK. Save your work.
Download
Sample Code