Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to create master pages and site navigation in ASP.NET 2.0. the editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Introduction

In general, user-friendly personalized sites have a consistent, unified page layout and navigation system. Two new features introduced by Asp.net 2.0 provide us with simple and effective tools for unifying the page layout and site navigation of the site, which are motherboard pages and site navigation. The motherboard page allows developers to create unified site templates and specified editable areas. In this way, the aspx page only needs to provide populated content to the editable area specified in the template page, and all other tags defined in the master page will appear in all aspx pages that use the master page. This model allows developers to uniformly manage and define the page layout of the site, so it is easy to get a page with a unified look and feel and easy to update.

The site navigation system allows developers to define site maps and provides API to query site map information through the program. The new navigation controls include Menu,TreeView and SiteMapPath, which makes it easy to render all or part of the site map in a general navigation user interface element. We will use the default site navigation provider, which means our site map will be defined in a file in xml format.

To illustrate these concepts and improve the usability of our tutorial's sample site, let's define a uniform page layout for the site, implement a site map, and add a navigation UI through this course. Our course sample site will have a beautiful design effect at the end of this course.

Figure 1: final results of this course

Step 1: create a motherboard page

The first step is to create a master page for our site. So far our site has only one typed DataSet (Northwind.xsd, located in the App_Code folder), business logic layer class libraries (ProductsBLL.cs,CategoriesBLL.cs, etc., all in the App_Code folder), database (NORTHWIND.MDF, located in the App_Data folder), configuration file (web.config), and a CSS file (Style.css).

I organize these pages and files to show that the data access layer and the business logic layer introduced in the previous two courses will reuse these examples in more detail later in the course.

Figure 2: files in our project

To create a motherboard page, right-click the project name in solution Manager and select add New item. Then select the motherboard type from the template list window and name it Site.master

Figure 3: adding a motherboard page to the site

Define the uniform page layout of the site in the motherboard page. You can use Design view to define the layout or controls you need, and you can manually add tags in Code view. In our motherboard page, we use cascading style sheets defined in the external file Style.css to define the location and style. Maybe you don't know how the following tags are displayed, the stylesheet rules define that the content in the navigation tag is absolutely located on the left side of the page and the width is fixed at 200 pixels.

Site.master

Working with Data Tutorials Working with Data Tutorials TODO: Breadcrumb will go here... TODO: Menu will go here...

A master page defines a fixed layout and editable areas that can be filled by aspx pages that use the master page

This editable region is displayed through the ContentPlaceHolder control and is located in the tag. There is only one ContentPlaceHolder (MainContent) in our motherboard page, but it can contain multiple ContentPlaceHolder controls.

Enter the tag above and switch to Design view to view the layout of the motherboard page. All aspx pages that use this motherboard page will have such a uniform layout, and the MainContent area is reserved for aspx pages to show their talents.

Figure 4: motherboard page displayed in Design view

Step 2: add a home page to the site

After defining the master page, we are going to add some aspx pages to the site. Let's start by adding our home page Degault.aspx. Right-click the project name in solution Manager and select add New Project. Select the Web Form option from the list of templates and name it Default.aspx. Also, check the check box "Select Master Page".

Figure 5: add a new Web Form and check the check box "Select Master Page"

When you click the OK button, you will be asked which master page to use for the new aspx page. Maybe you have multiple motherboards in your project, but we only have one.

Figure 6: select the motherboard page you want to use

After you select the motherboard page, the new aspx contains the following tags:

Default.aspx

In the @ Page directive, there is a reference to the master page (MasterPageFile= "~ / Site.master"), and the tag of the aspx page contains a Content control corresponding to the ContentPlaceHolder control defined in the motherboard page, and the ContentPlaceHolderID property of this Content control maps to the specified ContentPlaceHolder control. You can place tags in the Content control that you want to display in the corresponding ContentPlaceHolder control location.

Set the Title property of the @ Page directive to Home and add some welcome words to the Content control:

Default.aspx

Welcome to the Working with Data Tutorial Site

This site is being built as part of a set of tutorials thatillustrate some of the new data access and databinding features inASP.NET 2.0 and Visual Web Developer.

Over time, it will include a host of samples thatdemonstrate:

Building a DAL (data access layer), Using strongly typed TableAdapters and DataTables Master-Detail reports Filtering Paging, Two-way databinding, Editing, Deleting, Inserting, Hierarchical data browsing, Hierarchical drill-down, Optimistic concurrency, And more!

The Title attribute in the @ Page directive allows us to define the title on the aspx page, even if the element is already defined in the master page. We can also set the title of the page programmatically using Page.Title. It is important to note that stylesheets referenced in the master page (such as Style.css) are automatically corrected to be applied to each aspx page, regardless of the relationship between the aspx page directory and the master page directory.

Switch to Design view and we will see how our page will be displayed in the browser. Note: in Design view, only the editable areas of the aspx page can be modified, and the non-ContentPlaceHolder part tags defined on the motherboard page are grayed out.

Figure 7: editable and non-editable areas displayed in Design View

When the Default.aspx page is accessed by the browser, the asp.net engine merges the contents of the motherboard page and the content of the aspx page, and renders the merged content as the final HTML to the browser. When the content of the master page is updated, all aspx pages that use the master page will be re-merged with the new master page the next time it is requested. In a nutshell, the master page model allows you to define a unified layout template (master page), and the entire site will reflect the change when it changes.

Add more pages to the site

Let's take a moment to add additional pages to the site to support the final examples of various courses. There will be more than 35 examples in total, so let's create some of them first. There will be many examples of categories in the future, and we will add a folder to each category in order to better manage these examples. Now let's add three folders:

BasicReporting

Filtering

CustomFormatting

Finally, add a new file to the solution Manager as shown in figure 8. Remember to check the "Select Master Page" check box each time you add a file.

Figure 8: add the following files

Step 3: add a site map

One of the challenges of managing a website made up of a large number of pages is to provide a shortcut for visitors to browse the site. To start, the navigation structure of the site must be defined. Next, this structure must be transformed into user interface elements suitable for navigation, such as menu or location navigation. This process will be modified and corrected when new pages are added to the site and existing pages are removed.

Prior to asp.net 2.0, developers needed to create their own site navigation structure, maintain it, and convert it into user interface elements suitable for navigation. In asp.net 2.0, developers can take advantage of a very flexible and built-in site navigation system. The Asp.net 2.0 site navigation system allows developers to define a site map and provides API that can access this information.

The default Asp.net site map provider expects site map information to be stored in a file in xml format. However, the site navigation system based on the provider model can be extended to support site maps stored in a variety of ways. Jeff Prosise's article, The SQL Site Map Provider You've Been Waiting For shows how to create a provider that stores site maps in an SQL Server database; another option is a file system-based site map provider.

In this guide, we still use the default site map provider in ASP.NET2.0. To create a site map, right-click the project name in solution Manager, select add New, and then select the site map type. Name it Web.sitemap and click the add button.

Figure 9: adding a site map to your project

The site map file is a xml file. Note: Visual Studio can provide IntelliSense for site map structure. The site map file must contain at least one child node as the root node. This element can also contain any number of child elements.

The site map simulates the file system. Add an element for each folder and a child element for each aspx page, so:

Web.sitemap:

The site map defines the navigation structure of the site, which is hierarchical to describe the various areas of the site. Each element in Web.sitemap describes an area in a site structure.

Figure 10: the site map describes a hierarchical navigation structure

Asp.net displays the structure of the site map through the SiteMap class in the DotNET framework. This class has a CurrentNode property that returns information about the node the current user is accessing; the RootNode property returns the root node information of the site map (Home in our site map). The CurrentNode and RootNode properties all return the SiteMapNode instance, and the SiteMapNode contains attributes such as ParentNode,ChildNodes,NextSibling,PreviousSibling, which allow the site map hierarchy to be traversed.

Step 4: display the menu using the site map

In asp.net 2.0, we can access data in a variety of programmatic ways like asp.net 1.x, as well as through new data source controls.

There are several built-in data source controls, such as the SqlDataSource control for accessing relational database data, the ObjectDataSoruce control for accessing the data provided by the class, and so on. You can also create your own custom data source controls.

Data source controls act as proxies for your aspx pages and underlying data. To display the data queried by the data source control, we add other Web controls to the page and bind it to the data source control. To bind a Web control to a data source control, simply set the DataSourceID property value of the Web control to the ID property value of the data source control.

To get the data in the site map, asp.net provides a SiteMapDataSource control, which allows us to bind a Web control to display our site map. Two Web controls, TreeView and Menu, are often used to provide a navigation user interface. To bind data from the site map to these two controls, add a SiteMapDataSource control to the page, and set the DataSourceID property value of the TreeView or Menu control to the ID property value of the SiteMapDataSource control. For example, we can use the following tags to put the Menu control into the motherboard page:

To generate an optimized HTML, we can bind the SiteMapDataSource control to the Repeater control, as follows:

Home

The SiteMapDataSource control returns one level of the site map hierarchy at a time, starting at the root node in the site map (Home in our site map), then the next level (Basic Reporting,Filtering Reports and Customized Formatting), and so on.

When SiteMapDataSource is bound to Repeater, it iterates through the first level and displays each SiteMapNode instance of the first level with ItemTemplate. We can use Eval (property name) to access the details of SiteMapNode, so we can get the Url and Title properties of SiteMapNode to the HyperLink control.

The following shows the HTML tag generated above using the Repeater control example:

Basic Reporting Filtering Reports Customized Formatting

As you can see from the above, the second-level nodes of the site map (Basic Reporting,Filtering Reports and Customized Formatting) are displayed instead of the first.

This is because the ShowStartingNode property of the SiteMapDataSource control is set to false, causing SiteMapDataSource to skip the root node of the site map and instead return information from the second level of the site map hierarchy.

To display the child SiteMapNode of Basic Reporting,Filtering Reports and Customized Formatting, we can add another Repeater to the ItemTemplate of the previous Repeater. The second Repeater will be bound to the child node attribute of the SiteMapNode instance, as follows:

These two HTML tags generated by Repeater (some tags have been removed to save space):

Basic Reporting Simple Display Declarative Parameters Setting Parameter Values Filtering Reports... Customized Formatting...

The CSS style used is selected from Rachel Andrew's book: The CSS Anthology: 101Essential Tips, Tricks, & Hacks, and the style of the elements will be shown as follows:

Figure 11: menu displayed with two Repeater and some CSS

This menu is defined in the master page and binds to the site map defined in Web.sitemap, which means that all site map changes are immediately reflected on all pages that use the Site.master master page.

Turn off the view state

All asp.net controls are free to maintain their state into ViewState, which is serialized and saved in a hidden form field when HTML is generated. Controls use ViewState to remember the state they were changed by the program when the page returned, such as data bound by the Web control. If the view state allows information to be maintained when the page returns, it increases the size of the HTML code sent to the client and inflates the page without exact monitoring. Data display controls-especially the GridView control-can significantly add a lot of extra markup to the page. Of course, these increases may have no impact on broadband users, but the view state adds a few seconds of delay to dial-up users.

To observe the impact of the view state, open the page in a browser and view the source code of the page (for Internet Explorer, click the "View" menu and select the source code option). You can also turn on the page tracking option to observe the view state of each control on the page. The view state information is serialized and placed in a hidden form field named _ VIEWSTATE in the element that follows the tag.

View state is maintained only if Form is used on the page; if your aspx page does not contain

Then the resulting HTML tag will not contain VIEWSTATE hidden form fields.

The VIEWSTATE hidden form field generated by the motherboard page is about 1800 bytes. This extra data is mainly generated by the data content provided by the SiteMapDataSource control for the Repeater control. About 1800 bytes may not seem like much, but view state that uses GridView and many fields and records can easily be expanded tenfold or more.

You can set the EnableViewState property to false to turn off view state at the page level or control level, thereby reducing the size of the resulting markup. The Web control uses view state to maintain the data to be bound to the data display control when the page returns, and when the view state of the data display control is turned off, the data must be rebound to the control each time the page returns. In asp.net 1.x, this responsibility falls to the developer; in asp.net 2.0, when the page returns, the data display control rebinds the data if necessary.

Setting the EnableViewState of the Repeater control to false reduces the view state of the page. It can be set through the properties window or manually modified in code view. With these changes, the Repeater tag will look like this:

... ItemTemplate contents omitted for brevity...

After these changes, the view state generated by the page is reduced to 52 bytes, reducing the view state data by 97%! In this guide series, I will turn off the view state of all data controls to reduce the size of the generated markup. In most cases, the EnableViewState property is set to false without being prompted.

We discuss it only if the data Web control must open its view state to provide the desired functionality.

Step 5: add breadcrumb navigation

To complete the motherboard page, let's add a breadcrumb navigation UI element to each page. The breadcrum navigation will quickly show the user's current location in the site. Adding a breadcrumb navigation is simple in asp.net 2.0-just add a SiteMapPath control to the page; no more code is needed.

In our site, add this control to the label in the header:

The breadcrum navigation control displays the page that the user is currently visiting and its parent node up to the root node (Home in our site map).

Figure 12: the current page and its parent page displayed in the site map hierarchy using location navigation controls

Step 6: add a default page to each section

On our site, this course is divided into different categories-Basic Reporting,Filtering,Custom Formatting, etc.-each category has a folder and has an aspx page for the corresponding course. Also, each folder contains a Default.aspx page. On this default page, all courses in this section will be displayed. For example, we can connect to SimpleDisplay.aspx,DeclarativeParams.aspx and ProgrammaticParams.aspx through the Default.aspx page in the BasicReporting folder. Here, we can once again use the SiteMap class and a data display control to display the information of the site map defined in the Web.sitemap file.

Let's use Repeater to display an unordered list again, but this time we will show the title and description of the guide. We need to repeat these tags and code on each Default.aspx page, and we can encapsulate this UI logic into a User Control. Add a folder named UserControls to the site and add a Web user control named SectionLevelTutorialListing.ascx, which contains the following markup:

Figure 13: adding a new Web user control to the UserControls folder

SectionLevelTutorialListing.ascx

-

SectionLevelTutorialListing.ascx.cs

Using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class UserControls_SectionLevelTutorialListing: UserControl {protected void Page_Load (object sender, EventArgs e) {/ / If SiteMap.CurrentNode is not null, / / bind CurrentNode ChildNodes to the GridView if (SiteMap.CurrentNode! = null) {TutorialList.DataSource = SiteMap.CurrentNode.ChildNodes TutorialList.DataBind ();}

In the previous Repeater example, I bound SiteMap's data to Repeater; of course, this SectionLevelTutorialListing user control will also use this method. In the Page_Load event, there is a detector to ensure that this is the first time the page has been visited (not returned) and that the page's URL is mapped to a node in the site map. If the page uses this user control, there is no corresponding

SiteMap.CurrentNode returns null and binds no data to the Repeater control Suppose we have a CurrentNode, and I can bind its ChildNodes collection to this Repeater. The Default.aspx page of each section is the parent node of the tutorials in this section. The code shows the links and descriptions of the tutorials in each section. Here is a screenshot:

Once the Repeater is created, open the Default.aspx page for each folder in Design view and drag the user control to where you want to display it.

Figure 14: user controls have been added to the Default.aspx page

Figure A list of 15:Basic Reporting guides

This is the end of this article on "how to create master pages and site navigation in ASP.NET 2.0". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.