This section describes the steps for creating the user control that implements the text links and footer section for the pages in the PPQ site.
1.
Go to the Solution Explorer window, and select the folder named user-controls. Right-click, and select Add New Item . . . to open the Add New Item dialog (doing this from a folder in the Solution Explorer window means that the new item will be created within the selected folder, rather that at the root of the Web site). Select Web User Control, change the filename toFigure 5-42: Add New Item dialog
2.
Switch to Design view, and drag an XmlDataSourcecontrol from the Data section of the Toolbox onto the page. Click Configure Data Source in the XmlDataSource Tasks pane that appears to open the Configure Data Source dialog. Click the Browse . . . button next to the “Data file” text box to open the Select XML File dialog, change the “Files of type” list at the bottom to All Files (*.*). Then select Web.sitemapand click OK (see Figure 5-43). Notice that VWD adds the tilde character (~) to the start of the filename to indicate that it is in the root folder of the Web site’s ASP.NET application.3.
Click the Browse . . . button next to the “Transform file” text box to open the Select XML Transform File dialog. Select FooterLinksTransform.xslfrom the user-controlssubfolder (see Figure 5-44), and click OK. Then click OK again to close the Configure Data Source dialog.Figure 5-44: Filling in the Transform File dialog
4.
Drag a Divcontrol from the HTML section of the Toolbox onto the page, and then drag aRepeatercontrol from Data section of the Toolbox and drop it into the Divcontrol. Select
XmlDataSource1 in the Choose Data Source drop-down list of the Repeater Tasks pane (see Figure 5-45).
Figure 5-45: Repeater Tasks pane
5.
Drag another Divcontrol from the HTML section of the Toolbox onto the page, placing it belowthe Repeatercontrol. Then drag a Hyperlinkcontrol from Standard section of the Toolbox and
Figure 5-46: Adding a Hyperlink
control
6.
Switch to Source view, click on the first opening <div>element, and go to the Properties dia- log. Select the Styleproperty, and click the three dots (...) button to open the Style Builder dialog. In the Font page, go to the Size section in the middle of the dialog and select Specific; then enter 0.8and select em. Then go to the Text page and select Centeredfor Alignment, Horizontal. Finally, go to the Edges page, enter 5, select px for the Padding, Top setting (see Figure 5-47), and click OK to close the Style Builder dialog. Now, click on the second <div> element and apply the same settings. Together, they will center the text links on the page and use a slightly smaller than standard font.7.
Click on the opening <asp:Hyperlink>tag, and open the Properties dialog. Set the Textprop- erty to the Webmaster address you want to use for your site, set the Tooltipproperty to Emailthe Webmaster, and set the NavigateUrlproperty mailto:your-email-address. Remove
any content (such as “Hyperlink”) that VWD has inserted into the <asp:Hyperlink>element between the opening and closing tags. Also remove the width and height selectors that VWD adds to style attributes as the two <div>elements. Your code should now look something like Figure 5-48 (you can tidy up the layout and add line breaks to make it easier to read and assimilate).
Figure 5-48: Resulting code
8.
Now you can add the data binding statements that will pull the data from the XmlDataSource and display it in the page. To bind to the nodes in an XML file, you use the XPathstatement (rather than Evalor Bindthat you saw in earlier examples with a SqlDataSourcecontrol). The following listing shows the completed repeater control declaration, with the data binding statements highlighted. The statement XPath(“@url”)extracts the value of the attribute named urlfrom the current element as the Repeatercontrol is binding to each node in the XML document in turn. This sets the hrefattribute of a normal HTML anchor <a>element. Similarly, the values of the descriptionand titleattributes of the current element set thetitleattribute (the pop-up tooltip) and the text within the <a>and </a>tags that is displayed
in the page.
<asp:Repeater ID=”Repeater1” runat=”server” DataSourceID=”XmlDataSource1”> <ItemTemplate>
<a href=’<%#XPath(“@url”)%>’
title=’<%#XPath(“@description”)%>’><%#XPath(“@title”)%></a> </ItemTemplate>
Figure 5-49: Result of adding data-binding statements
9.
The final task now is to insert the new user control into the Master Page of the site where the placeholder is currently located. The easiest way to insert a user control into another page is to drag it from the Solution Explorer window into the target page. Open the page PPQ.masterin Design view, and drag the file FooterLinks.ascxfrom the user-controlssubfolder in the Solution Explorer window onto the PPQ.masterpage. Drop it into the bottom section of the page, next to the existing text placeholder (“Footer and text links go here”). Then delete the text placeholder. You will see the contents of your user control in the page (see Figure 5-50).Figure 5-50: Contents of user control
10.
Switch to Source view to see what VWD has done. At the top of the page, it added a Register directive that provides the link between the prefix and name of the element (tag) that will beYou can, of course, add these elements yourself rather than using the drag-and-drop method. To see the result, click the “run” button on the toolbar, or press F5. VWD executes the
Default.aspxpage, and the text links and footer can be seen at the bottom of the section of
the page that is generated by the Master Page (see Figure 5-51).
Figure 5-51: Master Page text links and footer