Introduction
Usually, the user-friendly personalized site has a consistent, Site Unified page layout and navigation system. The two new features introduced in ASP.net 2.0 provide a simple and effective tool for page layout and site navigation on the consolidated site, which are master page and site navigation. The master page allows developers to create a unified site template and a specified editable region. This way, the ASPX page only needs to provide a fill for the editable region specified in the template page, and all other tags defined in the master page will appear in all ASPX pages that use that master page. This model allows developers to manage and define the page layout of a site in a unified way, so it is easy to get a unified vision and feel of the page and also easy to update.
The site navigation system allows developers to define site maps and provide APIs for querying site map information through programs. The new navigation controls include Menu,treeview and SiteMapPath, which makes it easy to render all or part of the site map in a generic navigation user interface element. We will use the default site navigation provider, which means our sitemap will be defined in an XML-formatted file.
To illustrate these concepts and make our tutorial sample site usability better, let's define a site-by-page layout, implement a sitemap, and add a navigation UI through this course. At the end of this course our sample site has a beautiful design effect.
Step 1: Create the motherboard page
The first step is to create a motherboard 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 library (Productsbll.cs,categoriesbll.cs, etc., which are all in App_ Code folder), the database (Northwind.mdf, located in the App_Data folder), the configuration file (Web.config), and a CSS file (style.css).
I've collated these pages and files to illustrate that the data access layer and business logic layer described in the previous two lessons will reuse these examples in more detail in future courses.
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
Define the site's unified page layout in the master page. You can use Design view to define the layout or controls you need, and you can also manually add tags to the Code view. A cascading style sheet defined in the external file style.css is used in our master page to define the location and style. Maybe you don't know how the following tags show, the style sheet rule defines that the content in the
A master page defines a fixed layout and an editable region that can be filled with an ASPX page that uses a master page, which is displayed by the ContentPlaceHolder control, in the
Step 2: Add a home page to the site
After defining the master page, we are ready to add some ASPX pages to the site. Let's start by adding our homepage degault.aspx. Right-click the project name in Solution Manager and choose Add New Project. Select the Web Form option from the list of templates and name it default.aspx. Also, tick the check box for select a motherboard page.
When you click on the OK button, you will be asked which motherboard page your new ASPX page uses. Maybe you have multiple motherboard pages in your project, but we only have one.
When you select a master page, the new ASPX contains the following tags:
Default.aspx
There is a reference to the master page (masterpagefile= "~/site.master") in the @page directive, and the markup for the ASPX page includes a content control corresponding to the ContentPlaceHolder control defined in the master page. The ContentPlaceHolderID property of this content control is mapped to the specified ContentPlaceHolder control. You can place tags in the content control that you want to display in the position of the corresponding ContentPlaceHolder control.
Set the title property of the @page directive to home and add some welcome words to the content control:
Default.aspx
The Title property in the @Page directive allows us to define the title in the ASPX page, even if theelement is already defined in the master page. We can also set the title of the page using the Page.title programming method. Note that the stylesheet referenced in the master page (such as STYLE.CSS) is automatically corrected to apply to each ASPX page, regardless of the relationship between the directory of the ASPX page and the parent Board page catalog.
Switch to Design view we'll see how our page will look in the browser. Note: In Design view, the contents of an ASPX page can be modified only by editable regions, and the ContentPlaceHolder portion of the markup defined on the master page is grayed out.
When the Default.aspx page is accessed by the browser, the ASP.net engine merges the contents of the master page and the contents of the ASPX page, and renders the merged content as the final HTML sent to the browser. When the contents of the master page are updated, all ASPX pages that use the master page are merged with the new master page content the next time they are requested. Simply put, the master page model allows you to define a unified layout template (a master page), and the entire site responds to this change when it changes.
Add more pages to the site
Let's take a moment to add another page to the site to support an example of the final variety of courses. There will be more than 35 examples here, so let's create a section first. There will be many categories of examples, and in order to better manage these examples we add a folder to each category. Now we add three folders:
Basicreporting
Filtering
Customformatting
Finally, add a new file to Solution Manager as shown in Figure 8. Each time you add a file, remember to check the "Select Motherboard page" checkbox.
Step Three: Add site Map
One of the challenges of managing a Web site made up of a large number of Web pages is to provide a shortcut for visitors to browse the site. As a start, the navigation structure of the site must be defined. Next, the structure must be converted into user interface elements suitable for navigation, such as menu or location navigation. This process will be modified and corrected when a new page is added to the site and the existing page is removed.
Before ASP.net 2.0, the developer needed to create the site navigation structure, maintain it, and transform it into a user interface element suitable for navigation. In ASP.net 2.0, developers can take advantage of the very flexible and built-in site navigation system. The ASP.net 2.0 site navigation system allows developers to define a site map and provide an API to access that information.
The default ASP.net site map provider expects site map information to be stored in XML-formatted files. However, the site navigation system built on the provider model is a site map that can be extended to support multiple ways of storing. Jeff Prosise's article, the SQL site map Provider your ve Been waiting for shows how to create a provider that stores a site map in a 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 Item, and then select the site map type. Name Web.sitemap and click the Add button.
The site map file is an XML file. Note: Visual Studio can provide IntelliSense for the site map structure. The site map file must containas the root node, and it must contain at least onechild node. Thiselement can also contain any number ofchild elements.
The site map simulates the file system. Add aelement for each folder, and add achild element to each ASPX page:
Web.sitemap:
The site map defines the navigation structure of the site, which is hierarchical to describe the various areas of the site. Eachelement in Web.sitemap describes an area in a site 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 that the current user is accessing; The RootNode property returns the root node information of the site map (in our site map, home). CurrentNode the RootNode property returns SiteMapNode instances, SiteMapNode contains attributes such as Parentnode,childnodes,nextsibling,previoussibling, These properties allow the hierarchy of the site map to be traversed.
Step 4: Use the site map to display the menu
In asp.net 2.0 we can access data in a variety of ways, like ASP.net 1.x, and through new data source controls.
There are several built-in data source controls, such as SqlDataSource controls for accessing relational database data, Objectdatasoruce controls for accessing data provided by classes, and so on. You can also create your own custom data source controls.
The data source control acts as a proxy for your ASPX page and underlying data. To display the data that the data source control queries, we add another Web control 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 from the site map, ASP.net provides the SiteMapDataSource control, which allows us to bind a Web control to display our sitemap. The TreeView and menu two Web controls are often used to provide a navigation user interface. To bind the data in the site map to the two controls, add a SiteMapDataSource control to the page, set the DataSourceID property value of the TreeView or menu control to the value of the ID property of the SiteMapDataSource control. For example, we can use the following tags to bring the menu control to the motherboard page:
In order to generate optimized HTML, we can bind the SiteMapDataSource control to the Repeater control, as follows:
The SiteMapDataSource control returns one level in the site map hierarchy at a time, starting at the root node in the site map (home in our site map), and then the next level (Basic reporting,filtering Reports and customized formatting) and so on.
When SiteMapDataSource is bound to repeater, it traverses the first level and displays each SiteMapNode instance of the first level with ItemTemplate. We can use the Eval (property name) to access the details of the SiteMapNode so that we can get the SiteMapNode URL and title property to the Hyperlink control.
The HTML tags generated above using the Repeater control example are shown below:
As you can see from the above, the second-level nodes of the site map (Basic reporting,filtering reports and customized formatting) are displayed rather than 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 instead of returning the information from the second level of the level of the site map.
To display the reports of basic reporting,filtering and customized formatting, We can add another repeater to the ItemTemplate of the previous repeater. The second repeater is bound to the child node properties of the SiteMapNode instance as follows:
These two repeater generated HTML tags (to save space some tags are removed):
Using the CSS style selected from Rachel Andrew's book: The CSS anthology:101 essential Tips, Tricks, & Hacks,
This menu is defined in the master page and is bound to the site map defined in Web.sitemap, which means that all site map modifications immediately reflect all pages that use the Site.master master page.
Turn off view state
All asp.net controls can keep their state at will, and in the original text, when the initial letter of the ViewState is not translated, it is serialized and saved in a hidden form field when the HTML is eventually generated. Controls use ViewState to remember the state in which they were changed by a program when the page returned, such as data that was bound by a Web control. If the view state allows information to be persisted when the page returns, it increases the size of the HTML code sent to the client, which can swell the page if there is no precise monitoring. Data display controls-especially the GridView control-can significantly increase the amount of extra markup to the page. Of course, these increases may have no effect on broadband users, but view state can add a few seconds of latency to dial-up users.
To observe the impact of view state, open the page in the browser and view the source code for the page (for Internet Explorer, click the "View" menu and select the Source option). You can also open the page tracking option to see the view state of each control on the page. The information for view state is serialized and placed in a hidden form field named _viewstate that is located in the <div> element following the <form> label.
View state is persisted only when the form is used on the page, and if your ASPX page does not contain a declaration of <form runat= "Server", then the resulting HTML tag will not contain ViewState hidden form fields.
The ViewState hidden form field generated by the master page is about 1800 bytes. These additional data are primarily generated by the data content provided by the SiteMapDataSource control for the Repeater control. Maybe 1800 bytes doesn't seem like much, but the view state that uses the GridView and uses a lot of fields and records can easily swell 10 times times or more.
You can set the EnableViewState property to False to turn off view state at the page level or at the control level, thereby reducing the size of the resulting markup. Web controls use view state to persist data that is 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 rebind to the control each time the page returns. This responsibility falls to the developer at the time of ASP.net 1.x; in asp.net 2.0, when the page returns, the data display control will rebind the data when necessary.
Setting the EnableViewState of the Repeater control to false can reduce the view state of the page. Can be set through the Properties window or manually modified in code view. With these changes, the repeater tag will look like this:
1<asp:repeaterrunat= "Server" id= "menu" datasourceid= "SiteMapDataSource1" enableviewstate= "False"
2 <ItemTemplate>
3 <i> Itemtemplatecontentsomittedforbrevity </i>
4 </ItemTemplate>
5 </asp:Repeater>
Through these changes, the page generated view state reduced to 52 bytes, reducing the 97% view state data! In this guide series I will turn off the view state of all data controls to reduce the size of the markup produced. In most cases, the EnableViewState property is set to false without prompting.
We discuss only when the data Web control must open its view state to provide the desired functionality.
Step 5: Add breadcrumb navigation
To complete the master page, let's add a breadcrumb navigation UI element to each page. Breadcrum navigation will quickly display the user's current location in the site. Adding a breadcrumb navigation in asp.net 2.0 is simple-just add a SiteMapPath control to the page and you don't need more code.
In our site, add this control to the <div> label in the header:
1<spanclass= "breadcrumb" >
2<asp:sitemappathid= "SiteMapPath1" runat= "Server"
3 </asp:SiteMapPath>
4 </span>
The Breadcrum navigation control displays the page that the user is currently accessing and its parent node until it is to the root node (home in our site map).
Step 6: Add a default page to each section
In our site This course is divided into different classifications-basic reporting,filtering,custom formatting and so on-each category has a folder and has an ASPX page for the corresponding course. Also, each folder contains a Default.aspx page. In this default page, all courses in this section are 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 again use the Sitemap class and a data display control to display information about the site map defined in the Web.sitemap file.
Let's use repeater again to display an unordered list, but this time we'll show you 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 that contains the tags:
Sectionleveltutoriallisting.ascx
1usingSystem;
2usingsystem.data;
3usingsystem.configuration;
4usingsystem.collections;
5usingsystem.web;
6usingsystem.web.security;
7usingsystem.web.ui;
8usingsystem.web.ui.webcontrols;
9usingsystem.web.ui.webcontrols.webparts;
10usingsystem.web.ui.htmlcontrols;
One
12publicpartialclassusercontrols_sectionleveltutoriallisting:system.web.ui.usercontrol
13{
14protectedvoidpage_load (OBJECTSENDER,EVENTARGSE)
15{
16//ifsitemap.currentnodeisnotnull,
17// Bindcurrentnodechildnodestothegridview
18if (sitemap.currentnode!=null)
19{
20tutoriallist.datasource= SiteMap.CurrentNode.ChildNodes;
21tutoriallist.databind ();
22}
23}
}
In the previous repeater example, I bound the Sitemap's data to repeater, and of course, this sectionleveltutoriallisting user control will also use this method. In the Page_Load event, there is a detection program to ensure that this is the first time the page is accessed (not returned) and that the URL of the page is mapped to a node in the site map. If the page uses this user control, then there is no corresponding
, Sitemap.currentnode returns null and no data is bound to the Repeater control. Assuming we have a currentnode, I can bind its ChildNodes collection to this repeater. The Default.aspx page for each section is the parent of the tutorial in this section, which shows the links and descriptions of the tutorials in each section, with screenshots below:
Once this repeater is created, open the Default.aspx page of each folder in Design view and drag the user control to where you want it to appear.
Summarize
After completing the site map and the master Sheet page, our tutorial site now has a unified page layout and navigation system. Although our site has many pages, we can centrally update the Site page layout and site navigation information. Specifically, the page layout information is defined in the master page Site.master, and the site map is defined in Web.sitemap. We do not need to write any code to complete the Site page layout and navigation mechanism, Visual Studio provides WYSIWYG design-time support.
Having completed the data access layer and business logic layer and defined a unified page layout and site navigation system, we will explore the common reporting pattern next. In the next three guides we will see basic report tasks-using Gridview,detailsview and FormView controls to display data obtained from the business logic layer.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
