Creating a MasterDetail Page Set from Components

Creating a Master/Detail Page Set from Components

As we've mentioned, Dreamweaver MX uses a collection of Server Behaviors to build master/detail page sets. As you know by now, all but two Dreamweaver MX–supported languages let you build a master/detail page set using one simple interface for the Master Detail Page Set Server Behavior. However, the Dreamweaver MX ASP.NET and PHP interface does not offer the Master Detail Page Set Server Behavior. Still, both language interfaces do support the component Server Behaviors that collectively make up a master/detail page set. Therefore, you can easily build your own version of the master/detail page set using component Server Behaviors of ASP.NET and PHP.

Creating a Master/Detail Page Set Using ASP.NET

As you know, Dreamweaver MX does not offer the Master Detail Page Set Server Behavior for ASP.NET-based websites. Therefore, creating a master/detail page set in ASP.NET requires a slightly different process than simply inserting the straightforward Master Detail Page Set Server Behavior. We must create the master/detail page set component by component. That said, it's still quite simple to create a master/detail page set using standard Dreamweaver MX Server Behaviors. Let's create a master/detail page set of our running book category example. First we need to create a master page and a detail page. Follow these steps:

1. Open a new page in the ASP.NET website we defined earlier in the book.

2. Save the page as Master.aspx.

3. Open another new page and save that page as Detail.aspx.

To create our master page, we'll pull data from the Books database, so we'll need an active data connection. Luckily, we created a data connection in Chapter 10. Check that the pages can access that data connection. To do so, choose Windows ® Databases to activate the Databases panel. You should see the data connection(s) we created in Chapter 10. Using a data connection, create a DataSet of the information we need from the database. Follow these steps:

1. To create a DataSet for the master page, choose Insert ® Appplication Objects ® DataSet (or click the plus sign in the Server Behaviors tab of the Application panel and select the DataSet option) to open the DataSet dialog box, which is shown in Figure 21.21.

   
   Figure 21.21: The DataSet dialog box

2. In the Name text box, enter DS_Categories.

3. In the Connection drop-down list box, select your data connection.

4. Dreamweaver MX populates the Table drop-down list box with the tables available through the chosen data connection. Choose tblCategories from the Tables list box. At this point, the DataSet dialog box should appear similar to Figure 21.21.

5. Click OK to close and save the DataSet to the master page.

Now we need to display the information in the DataSet on the page—making sure to include links to our detail page. To do so, we'll use a DataGrid. As you recall from Chapter 15, a DataGrid is an ASP.NET server control that generates multicolumn tables from data sources such as a DataSet. You can format the columns in a DataSet in a variety of ways—data, button, hyperlink, templated, and so on. If your're not familiar with a DataGrid, take a moment to review Chapter 15.

To insert a DataGrid in the master page, follow these steps:

1. Choose Insert ® ASP.NET Objects ® DataGrid to open the DataGrid dialog box, which is shown in Figure 21.22.

   
   Figure 21.22: The DataGrid dialog box

2. In the ID text box, enter DataGrid_Categories.

3. In the DataSet drop-down list box, select DS_Categories.

4. In the Show section, click the All Records option.

   Now configure the columns of the DataGrid. As you can see in the DataGrid dialog box, Dreamweaver MX has added the CategoryID and Category column by default to our DataGrid. However, we want to show only the records from the Category column—each linked and passing its CategoryID to the detail page. To do so, first remove CategoryID from the DataGrid.

5. Select CategoryID from Columns section. Then click the minus (–) button to remove the column.

6. To configure the Category column as a Hyperlink column, select the Category column from the Columns list box.

7. Click the Change Column Type button to choose Hyperlink from the Change Column Type pop-up menu to open the Hyperlink Column dialog box, which is shown in Figure 21.23.

   
   Figure 21.23: The Hyperlink Column dialog box

8. In the Title text box, enter a title for the Hyperlink column such as CategoryLink.

   Following the Title text box are the Hyperlink Text and Linked Page sections. In the Hyper- link Text section, you set the text that will display to the user. The text can be static text, such as "View Book in…" or dynamic text, such as the data in the Category column. For our example, we want to apply the link directly to the information displayed in the Category column.

9. To apply the link to the information in the Category column, click the Data Field option button, and select Category in the Data Field drop-down list box.

   In the Linked Page section, you build the URL of the Hyperlink column. You can set a static URL that will display for each item in the Hyperlink column, such as detail.aspx?categoryid=1. Alternatively, you can choose to dynamically create the URL for each item in the Hyperlink column. In our example, we want each item to have a unique URL that passes the CategoryID to the Detail.aspx page.

10. Click the Data Field option button and select CategoryID from the Data Field drop-down list box.

    Next, build the URL that passes the CategoryID of each record in the Hyperlink column to the Detail.aspx page. Not sure how to do that? No problem, Dreamweaver MX can build this URL for you.

11. Click the Browse button, which opens a Browse dialog box, to locate and select our detail page, Detail.aspx.

12. Click OK to return to the Hyperlink Column dialog box.

    Notice that Dreamweaver MX has crafted the URL from the name of the selected file, the selected data field, and a default value. Figure 21.23 shows our completed Hyperlink Column dialog box.

13. Click OK to return to the DataGrid dialog box.

14. Click OK to insert the DataGrid into the master page.

Listing 21.11 shows the generated code of Master.aspx. Figure 21.24 shows the browser results of Master.aspx.

Listing 21.11: MASTER.ASPX

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" %>  <%@ Register TagPrefix="MM" Namespace="DreamweaverCtrls" _  Assembly="DreamweaverCtrls,version=1.0.0.0,_  publicKeyToken=836f606ede05d46a,culture=neutral" %> <MM:DataSet  runat="Server" IsStoredProcedure="false" ConnectionString='<%# System.Configuration.ConfigurationSettings.AppSettings(_  "MM_CONNECTION_STRING_BookTrackingSQL") %>' DatabaseType='<%# System.Configuration.ConfigurationSettings.AppSettings(_ "MM_CONNECTION_DATABASETYPE_BookTrackingSQL") %>'  CommandText='<%# "SELECT * FROM dbo.tblCategories" %>'  Debug="true" > </MM:DataSet>  <MM:PageBind runat="server" PostBackBind="true" />  <html> <head> <title>master.aspx</title>  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  </head> <body> <form runat="server">      <asp:DataGrid    runat="server"   AllowSorting="False"   AutoGenerateColumns="false"   CellPadding="3"   CellSpacing="0"   ShowFooter="false"   ShowHeader="true"   DataSource="<%# DS_Categories.DefaultView %>"   PagerStyle-Mode="NextPrev"   >  <HeaderStyle HorizontalAlign="center" BackColor="#E8EBFD" ForeColor="#3D3DB6" _  Font-Name="Verdana, Arial, Helvetica, sans-serif" Font-Bold="true" _  Font-Size="smaller" />    <ItemStyle BackColor="#F2F2F2" _ Font-Name="Verdana, Arial, Helvetica, sans-serif" Font-Size="smaller" />     <AlternatingItemStyle BackColor="#E5E5E5" _  Font-Name="Verdana, Arial, Helvetica, sans-serif" Font-Size="smaller" />     <FooterStyle HorizontalAlign="center" _  BackColor="#E8EBFD" ForeColor="#3D3DB6" _  Font-Name="Verdana, Arial, Helvetica, sans-serif" _  Font-Bold="true" Font-Size="smaller" />     <PagerStyle BackColor="white" _ Font-Name="Verdana, Arial, Helvetica, sans-serif" Font-Size="smaller" />   <Columns>     <asp:HyperLinkColumn        HeaderText="CategoryLink"        Visible="True"       DataTextField="Category"       DataNavigateUrlField="CategoryID"       DataNavigateUrlFormatString="detail.aspx?CategoryID={0}"/> </Columns>  </asp:DataGrid> </form> </body> </html> 

Figure 21.24: The browser result of Master.aspx

The Detail Page

To create the detail page, we follow a path similar to the one to create the master page. We use the data connection to contact our database and pull information into a DataSet. We then use the DataGrid to display the data. Let's begin.

First create a DataSet. This DataSet will be slightly different because we want to pull only the books that belong to the category of the CategoryID passed in the URL. To do so, we'll use a custom SQL statement that joins several tables together through their primary keys filtered on the URL- passed CategoryID. Follow these steps:

1. Choose Insert ® Application Objects ® DataSet(Query) to open the DateSet dialog box.

2. In the Name text box, enter DS_Categories and choose your data connection from the Connection list box.

   At this point, we really should switch to the Advanced view to enter our custom SQL statement. However, we like to let Dreamweaver MX do as much of our work as possible. So before we switch to Advanced view, we want Dreamweaver MX to create the filter for the URL-passed CategoryID.

3. Select tblCategories from the Tables list box.

4. Select CategoryID from the Filter list box, and select URLParameter.

5. Now click the Advanced button to switch to Advanced view.

   As you can see in the SQL text area and in the Parameters area, Dreamweaver MX has generated the appropriate code to filter the data based on the CategoryID URL parameter. Sweet! All we have to do is replace the basic SQL statement with our custom SQL statement.

6. Replace the SQL from the SELECT up to the equal sign (=) with the following code.

   SELECT      tblCategories.CategoryID,             tblCategories.Category,             tblBooks.BookID,             tblBooks.Title,             tblBooks.PageCount,             tblBooks.Lending FROM       (tblBooks  INNER JOIN tblBooksCategories   ON         tblBooks.BookID = tblBooksCategories.Book)  INNER JOIN tblCategories  ON         tblBooksCategories.Category = tblCategories.CategoryID  WHERE tblCategories.CategoryID    

   Your SQL statement should now be as follows:

   SELECT      tblCategories.CategoryID,             tblCategories.Category,             tblBooks.BookID,             tblBooks.Title,             tblBooks.PageCount,             tblBooks.Lending FROM       (tblBooks  INNER JOIN tblBooksCategories   ON         tblBooks.BookID = tblBooksCategories.Book)   INNER JOIN tblCategories  ON         tblBooksCategories.Category = tblCategories.CategoryID  WHERE tblCategories.CategoryID = @CategoryID

Now create the DataGrid to display the data in the DataSet. To do so, follow these steps:

1. Choose Insert ® ASP.NET Objects ® DataGrid to open the DataGrid dialog box.

2. In the ID text box, enter DG_Books, and choose the DS_Categories DataSet from the DataSet list box.

3. In the Show section, click the All Records option, and remove all columns from the Columns list box but BookID and Title.

4. Click OK to insert the DataGrid into the detail page.

That's it. You've just created a master/detail page set in ASP.NET. Listing 21.12 shows the code generated by Dreamweaver MX. Figure 21.25 shows the browser results of Detail.aspx.

Listing 21.12: DETAIL.ASPX

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" %>  <%@ Register TagPrefix="MM" Namespace="DreamweaverCtrls" _  Assembly="DreamweaverCtrls,version=1.0.0.0_ publicKeyToken=836f606ede05d46a,culture=neutral" %>  <MM:DataSet  runat="Server" IsStoredProcedure="false" ConnectionString='<%# System.Configuration.ConfigurationSettings.AppSettings(_  "MM_CONNECTION_STRING_BookTrackingSQL") %>' DatabaseType='<%# System.Configuration.ConfigurationSettings.AppSettings("_  MM_CONNECTION_DATABASETYPE_BookTrackingSQL") %>' CommandText='<%# "SELECT tblCategories.CategoryID, _ tblCategories.Category, tblBooks.BookID, tblBooks.Title, _  tblBooks.PageCount, tblBooks.Lending FROM (tblBooks INNER JOIN _  tblBooksCategories ON tblBooks.BookID = tblBooksCategories.Book) _  INNER JOIN tblCategories ON .tblBooksCategories.Category = _  tblCategories.CategoryID _ WHEREtblCategories.CategoryID = @CategoryID" %>' Debug="true"  >   <Parameters>    <Parameter Name="@CategoryID" _ Value='<%# IIf((Request.QueryString("CategoryID") <> Nothing), _  Request.QueryString("CategoryID"), "") %>' Type="Int" />   </Parameters>  </MM:DataSet>  <MM:PageBind runat="server" PostBackBind="true" />  <html> <head> <title>detail.aspx</title>  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  </head> <body> <form runat="server">      <asp:DataGrid    runat="server"   AllowSorting="False"   AutoGenerateColumns="false"   CellPadding="3"   CellSpacing="0"   ShowFooter="false"   ShowHeader="true"   DataSource="<%# DataSet1.DefaultView %>"   PagerStyle-Mode="NextPrev"   >     <HeaderStyle HorizontalAlign="center" _  BackColor="#E8EBFD" ForeColor="#3D3DB6" _  Font-Name="Verdana, Arial, Helvetica, sans-serif" _  Font-Bold="true" Font-Size="smaller" />     <ItemStyle BackColor="#F2F2F2" _ Font-Name="Verdana, Arial, Helvetica, sans-serif" _  Font-Size="smaller" />     <AlternatingItemStyle BackColor="#E5E5E5" _  Font-Name="Verdana, Arial, Helvetica, sans-serif" _  Font-Size="smaller" />     <FooterStyle HorizontalAlign="center" _  BackColor="#E8EBFD" ForeColor="#3D3DB6" _  Font-Name="Verdana, Arial, Helvetica, sans-serif" _  Font-Bold="true" Font-Size="smaller" />     <PagerStyle BackColor="white" _ Font-Name="Verdana, Arial, Helvetica, sans-serif" _  Font-Size="smaller" />   <Columns>    <asp:BoundColumn DataField="BookID"       HeaderText="BookID"       ReadOnly="true"       Visible="True"/>     <asp:BoundColumn DataField="Title"       HeaderText="Title"       ReadOnly="true"       Visible="True"/> </Columns>  </asp:DataGrid> </form> </body> </html>

Figure 21.25: The browser result of Detail.aspx