Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Creating Web Sites with ASP.NET Whidbey : Page 8

ASP.NET Whidbey adds a huge number of productivity features and enhancements. Although it's still early in the development process, Paul Sheriff and Ken Getz dig in and start playing with some of the new features, passing along what they've found.


advertisement
Figure 15: The bulleted list control bound to a data source makes creating lists quick and easy.
Investigating New Server Controls
As if all the previous functionality wasn't enough, the current version of ASP.NET Whidbey has added 38 new server controls! Obviously, we can't describe them all here (we haven't even managed to investigate them all), we'll try to point out some of the interesting new controls, focusing on new user interface elements and new data source controls.

It's also interesting to note that in ASP.NET Whidbey, all the server controls are device-aware. Rather than requiring you to create separate applications for rich browsers and for mobile devices, all the controls now can be used for either type of browser. ASP.NET renders the output correctly, depending on the type of device making the request for the page.

The BulletedList control allows you to display a bulleted list in almost any format you wish. (You could do this in ASP.NET 1.x using a Repeater control, but that seemed like a lot of effort.) All you have to do now is to bind this control to a data source (such as the DataSetDataSource), set the BulletStyle property to one of its many options, and it produces output that looks like Figure 15.

Figure 16: The TreeView control is ideal for navigation on Web sites.
Although it was possible in ASP.NET 1.x to download and incorporate a somewhat complex TreeView control, ASP.NET Whidbey includes a full-featured, easy-to-use TreeView control. With little or no code, you can easily bind the TreeView control to a data source, and display hierarchical data. Figure 16 shows a simple menu structure you can generate with just a little XML data and by setting a few properties.

To create your own TreeView control as shown in Figure 16, follow these steps:

  1. In the Solution Explorer window, right-click the Data folder, and select
Add New Item from the context menu.

  1. Select XML File from the list of templates, and name the new file Menus.xml.
  2. In the Solution Explorer
  3. window, double-click Menus.xml to load it into the code editor, and add the following XML data. Save the file when you're done.

<?xml version="1.0" encoding="utf-8"?> <Menus> <Menu Text="Browsing the Web Offline"> <SubMenu Text="Making Web Pages Available Offline" /> <SubMenu Text="Viewing Web Pages without being Connected" /> </Menu> <Menu Text="Printing and Saving Information"> <SubMenu Text="Printing and Saving Information" /> <SubMenu Text="Saving a Web Page on Your Computer" /> <SubMenu Text="Saving Text from a Web page" /> </Menu> </Menus>



Figure 17: The TreeViewBindings Editor assists you in getting the different levels of your tree view hooked up to your XML file.
  1. In the Solution Explorer window, right-click on the topmost node (the root folder) and select Add New Item from the context menu. Add a new Web Form, and name the page TreeView.aspx. If necessary, switch to Design view.
  2. From the Toolbox window, select the Data tab, and drag an XmlDataSource control onto your page.
  3. From the new control's smart tag, select the Configure DataSource link. In the Data File text box on the Configure Data Source dialog box, enter the path to your XML file (Data/Menus.xml) or click the browse button to browse to the location. Click Finish to dismiss the dialog box.
  4. In the Toolbox window, select the Core tab, and add a TreeView control to the page.
  5. In the TreeView control's smart tag, select the Auto Format link, and select the Windows Help option.
  6. In the TreeView control's smart tag, select the Connect to DataSource link, and select the XmlDataSource1 option from the list of available data sources.
  7. Select the Edit Bindings option from the smart tag, displaying the TreeView Bindings Editor dialog box.
  8. In the Available Bindings list, select the top item, Menus, and then click Add.
  9. In the Binding Properties grid to the right, set the Text property to Help Topics.
  10. In the Available Bindings list, select the next item, Menu, and then click Add.
  11. In the Binding Properties grid to the right, set the TextField property to Text. (This indicates which attribute of the Menu item within the XML you'd like to display for this node in the TreeView control.)
  12. In the Available Bindings list, select the next item, SubMenu, and then click Add.
  13. In the Binding Properties grid to the right, set the TextField property to Text.
  14. Uncheck the Auto-Generate Bindings check box in the lower left of this screen. Your dialog box should look like Figure 17.
  15. Click the OK button to save the changes.
  16. In the Solution Explorer window, select TreeView.aspx, and press F5 to run your project. Your page appears, showing the TreeView control as in Figure 16. (Note that pressing F5 now runs the selected page—you don't have to set the start page explicitly.)




Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date