Using the DataGrid SB
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.
Let's find out how we did. Press F12 to preview the
page in a browser and click the Edit button in the first row. The page posts
to itself and, lo and behold, Update and Cancel buttons appear in the Edit column. Use the
drop-down menus to change the Category and Room values, and enter a new Description
for the item.
Click Update (you may want to back up the realty.mdb database first so you
can restore it later). The form is submitted and your changes are reflected
immediately.
So far, so good. But what if we change the URL parameter to ListingID=2.
Egad. The broken images appear because the second listing doesn't include photos
for every room. To address this, we'll use the VB IIf
function.
Using the IIf Function
Double-click dgEditDetails in the Server Behaviors
panel and select the Photo column. Click Edit. Replace the existing ItemTemplate
code with the following:
<img width="50" height="50" src="../images/
<%# IIf( (dsListingRooms.FieldValue("ListingRoomPic", Container)
= ""),
"nopic.gif", "listings/details/" &
dsListingRooms.FieldValue("ListingRoomPic", Container) ) %>">
Click OK to close the dialog boxes and save your work. Select View | Live Data
Settings and change the Value column to 2. Click OK and press
F12 to preview the page in a browser. Instead of unsightly
icons, an alternative image is displayed (nopic.gif). The VB IIf
function is essentially a shorthand method for writing an If-Else
statement. In the example above, if the ListingRoomPic
column is empty, nopic.gif is displayed. Otherwise, the listing photo is displayed.
Tweaking the DataGrid
The DataGrid is essentially complete. To customize its appearance, you can
edit the values of the DataGrid's attributes and the <HeaderStyle>,
<ItemStyle>, and <AlternatingItemStyle>
tags. For instance, I'm not crazy about the default color scheme, so I changed
the BackColor attribute of <HeaderStyle>
to dark blue and the ForeColor to white: BackColor="#336699"
ForeColor="#FFFFFF". To alter the width, cellpadding, and other
style attributes of the DataGrid table, switch to Code view and locate the opening
<asp:DataGrid> tag. Right-click the tag and
choose Edit Tag, or press CTRL-F5. This opens the Datagrid
tag editor. Select the Layout category and change the values to those shown
in the screenshot below:
Last, but not least, we have to display the address of the current listing
at the top of the page. In the Document window, select the dark blue "ListingAddress"
text placeholder and expand dsListingRooms in the
Bindings panel. Select the ListingAddress column
and click Insert. The completed page should look something like this:
Save your work and preview the page in a browser. If you have any questions
or comments, feel free to contact
me. Congratulations on surviving this epic tutorial!
Download
Sample Code
Author of "The Joy of Dreamweaver MX: Recipes for Data-Driven Web Sites," Paul Newman is President of BRAVE NEW WURLD, a New York web design firm. He has a BA in English and Creative Writing from Binghamton University and an MFA in Film Production from the UCLA Department of Film, Television, and Digital Media.
Paul's computer experience dates back to 1985, when he bought one of the first Apple Macintosh computers in his senior year of college. He has been building web sites since 1997, and his clients include RaikaUSA.com, VoiceoverAmerica.com, Officetek.com, and BarbaraTyson.com.
See All Postings From P.R. Newman >>