All user-friendly websites share a common feature: they all have consistent page layout and navigation throughout the website. This article focuses on creating webpages with the same style and easy to update.
I. Introduction
ASP. net2.0 introduces two features to achieve consistent page layout and navigation throughout the entire site: master page and site navigation ). the home page allows developers to develop a general template with editable areas. You can apply this template on other pages of the website. For such ASP. NET pages, you only need to add content elements in the Editable area. The other parts are consistent. This model provides great convenience for developers to create editable websites with a uniform appearance.
The website navigation system provides a mechanism for designing website pages. On the other hand, it provides APIs for website map programmable queries. similar to menu, Treeview, and site map. It makes it easy to present some or all of the website maps. We will use the default website navigation, that is, using the XML file to define the website map.
To demonstrate the above concepts and make the entire series of courses more practical. This article describes how to define a unified page layout, implement website maps, and add navigation user interfaces. After completing this article, you will get a well-designed basic website structure for subsequent courses.
Step 1: create a home page
The first step is to create a home page for the entire site. Currently, our website only contains strong datasets (northwind. XSD), BLL files, and database files. There are also configuration files and style sheet files. We use Dal and BLL to differentiate these pages and files.
You can right-click the project, select "Add new project", select the homepage template, and name it site. master.
You can define the unified layout of a website on the home page. You can place any layout control or web control you need in the actual view. Of course, you can use the Code view to manually write code. On the main page, you can use a stacked sample table to deploy and limit the format, and use the external file style.css. The following code demonstrates how to use CSS styles to locate the content of a div and align it to the left with a width of 200px.
Site. Master:
<% @ Master language = "C #" autoeventwireup = "true"
Codefile = "site. master. cs" inherits = "Site" %>
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> working with data tutorials </title>
<Link href = "styles.css" rel = "stylesheet" type = "text/CSS"/>
</Head>
<Body>
<Div id = "wrapper">
<Form ID = "form1" runat = "server">
<Div id = "Header">
<SPAN class = "title"> working with data tutorials </span>
<SPAN class = "breadcrumb">
Todo: breadcrumb will go here... </span>
</Div>
<Div id = "content">
<Asp: contentplaceholder id = "maincontent"
Runat = "server">
<! -- Page-specific content will go here... -->
</ASP: contentplaceholder>
</Div>
<Div id = "navigation">
Todo: menu will go here...
</Div>
</Form>
</Div>
</Body>
</Html>
You can use the home page to define the layout of a static page or the Editable area of the home page. You can use the contentplaceholder control to edit the content area. Actually, it is a <div>. We define that there is only one contentplaceholder on the home page. However, multiple contentplaceholder controls can be placed on them.
After the above logo is knocked out, switch to the design view and the following layout will be displayed. Any page on the application home page will have this unified layout.
Step 2: Add a homepage for the website
After defining the home page, we began to add other Asp.net pages to the website. First add a default. aspx as the homepage. Step: Right-click the project and select Add new item, and name it default. aspx. Note: Select the "use Homepage" check box.
Click the "add" button to select the home page and select the desired home page (if there are multiple, we only have one ).
After the home page is selected, the following code is generated:
Default. aspx:
<% @ Page Language = "C #" masterpagefile = "~ /Site. Master "autoeventwireup =" true"
Codefile = "default. aspx. cs" inherits = "_ default" Title = "untitled page" %>
<Asp: Content ID = "content1" contentplaceholderid = "maincontent"
Runat = "server">
</ASP: content>
In the @ page command, there is a reference to use the homepage (masterpafefile = "~ /Site. Master "). Meanwhile, the page description language assigns a contentplaceholderid to each contentplaceholder control. You can write the content presented in contentplaceholder to the tag of the content control. Place some welcome information in the content tag.
Default. aspx:
<% @ Page Language = "C #" masterpagefile = "~ /Site. Master "autoeventwireup =" true"
Codefile = "default. aspx. cs" inherits = "_ default" Title = "home" %>
<Asp: Content ID = "content1" contentplaceholderid = "maincontent"
Runat = "server">
<H1> welcome to the working with data tutorial site
<P> This site is being built as part of a set of tutorials that
Using strate some of the new data access and databinding features in
ASP. NET 2.0 and Visual Web Developer. </P>
<P> over time, it will include a host of samples that
Demonstrate: </P>
<Ul>
<Li> building a Dal (data access layer), </LI>
<Li> using stronugly typed tableadapters and datatables </LI>
<Li> master-Detail reports </LI>
<Li> filtering </LI>
<Li> paging, </LI>
<Li> two-way databinding, </LI>
<Li> editing, </LI>
<Li> deleting, </LI>
<Li> inserting, </LI>
<Li> hierarchical data browsing, </LI>
<Li> hierarchical drill-down, </LI>
<Li> optimistic concurrency, </LI>
<Li> and more! </LI>
</Ul>
</ASP: content>
The title attribute of the @ page command allows us to set the title of the page. Even the <titel> element can be defined on the home page. We can also use the page. Title attribute to set it programmatically. Note: the reference to the style sheet on the home page is automatically updated so that it can be applied to the Asp.net page on the home page, regardless of the relationship between the page path and the home page.
Switch to the design view, and you will see the content of the page is similar to that of the browser. Note: In the actual view, only the content editing area is editable. The uneditable area is gray.
When the homepage (default. aspx) is accessed through a browser, the Asp.net engine automatically merges the content of the homepage and the content of the Asp.net page, and finally returns the requested HTML to the client for display. When the content on the home page is updated, all applications on the home page will be updated as soon as the next visit. That is to say, the homepage is the layout template of the entire website, which allows the changed content to be quickly applied to the entire website.
Add other Asp.net pages
Add the following page for different scenarios in the future. The entire series will have 35 examples. First, add the previously used. To better differentiate the sample content, we add a category folder for each series. Add the following folder:
Basicreporting
Filtering
Customformatting
Finally, see Add a file. Note: When adding any of the following files, remember to apply the "home page" template.
Step 3: Create a site map
Designing site navigation allows visitors to quickly and directly access many pages on the website is a challenge for designers. First, you need to define the navigation structure of the site, and then convert it into user operation interface elements that can be navigated, such as menus. Finally, you need to remove existing pages and add new pages that can be managed and maintained. Before ASP. net2.0, developers often had their own website navigation structure and maintained it to convert it into a navigation page element. However, in ASP. net2.0, developers can use a flexible built-in website navigation system.
The site navigation system of ASP. net2.0 allows developers to define a site map and access its information through a programmable API. The original intention of Asp.net is to use XML files to store site map data. However, the site navigation system built on the supplier model is extended into another representation, namely serialization.
In this article, we use the first method. To create a site map, right-click the project, select "Add new project", select the sitemap template, and use the default name web. sitemap.
The default site map file is an XML file. Note: VS provides only prompts for the element structure of site map nodes. The site map file must use <sitemap> as the root node and contain a <sitemapnode> subnode. The first <sitemapnode> element can contain any number of <sitemapnode> subnodes.
Simulates the structure of the file system to define the site map. That is, create a <sitemapnode> sub-element for each folder (three in total) and for each Asp.net page in these folders. The Code is as follows:
Web. sitmap:
<? XML version = "1.0" encoding = "UTF-8"?>
<Sitemap xmlns = "http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">
<Sitemapnode url = "~ /Default. aspx "Title =" home "Description =" home ">
<Sitemapnode Title = "basic reporting"
Url = "~ /Basicreporting/default. aspx"
Description = "basic reporting samples">
<Sitemapnode url = "~ /Basicreporting/simpledisplay. aspx"
Title = "simple display"
Description = "displays the complete contents
Of a database table. "/>
<Sitemapnode url = "~ /Basicreporting/declarativeparams. aspx"
Title = "declarative Parameters"
Description = "displays a subset of the Contents
Of a database table using parameters. "/>
<Sitemapnode url = "~ /Basicreporting/programmaticparams. aspx"
Title = "Setting Parameter Values"
Description = "shows how to set parameter values
Programmatically. "/>
</Sitemapnode>
<Sitemapnode Title = "filtering reports"
Url = "~ /Filtering/default. aspx"
Description = "samples of reports that support filtering">
<Sitemapnode url = "~ /Filtering/filterbydropdownlist. aspx"
Title = "filter by drop-down list"
Description = "filter results using a drop-down list."/>
<Sitemapnode url = "~ /Filtering/masterdetailsdetails. aspx"
Title = "Master-details"
Description = "filter results two levels down."/>
<Sitemapnode url = "~ /Filtering/detailsbyselecting. aspx"
Title = "details of selected row"
Description = "show detail results for a selected item in a gridview."/>
</Sitemapnode>
<Sitemapnode Title = "customized formatting"
Url = "~ /Customformatting/default. aspx"
Description = "samples of reports whose formats are customized">
<Sitemapnode url = "~ /Customformatting/customcolors. aspx"
Title = "format colors"
Description = "format the grid & apos; s colors based
On the underlying data. "/>
<Sitemapnode
Url = "~ /Customformatting/gridviewtemplatefield. aspx"
Title = "Custom content in a gridview"
Description = "shows using the templatefield
Customize the contents of a field in a gridview. "/>
<Sitemapnode
Url = "~ /Customformatting/detailsviewtemplatefield. aspx"
Title = "Custom content in a detailsview"
Description = "shows using the templatefield to customize
The contents of a field in a detailsview. "/>
<Sitemapnode url = "~ /Customformatting/formview. aspx"
Title = "Custom content in a formview"
Description = "illustrates using a formview for
Highly customized view. "/>
<Sitemapnode url = "~ /Customformatting/summarydatainfooter. aspx"
Title = "summary data in footer"
Description = "display summary data in the grids footer."/>
</Sitemapnode>
</Sitemapnode>
</Sitemap>
A site map defines the navigation structure (hierarchy, which describes different parts of a website) of the entire website. Each <sitemapnode> element in Web. sitemap represents a part of the website navigation.
Asp.net displays the structure of the Site Map through the sitemap class under the. NET Framework. This class has a currentnode attribute that returns information for the current access. The property rootnode returns the root of the site map. Both attributes return sitemapnode instances. These instances all contain attributes that use the map structure to traverse the site, such as parentnode, childnodes, nextsibling, and previussibling.
Step 4: Display menus based on site maps
You can use programming like ASP. net1.x to access data in ASP. net2.0 or directly use the new data source control. Some embedded data source controls such as sqldatasource are used to access the relevant database; objectdatasource is used to access the data provided by the metadata class. You can also create custom data source controls.
The data source control acts as a proxy between the Asp.net page and the underlying data. To demonstrate the use of the control, we will add other Web controls and bind them to the data source control. You can bind the data source of the web control by specifying the ID attribute of the data source control as the datasourceid attribute of the web control.
Asp.net provides the sitemapdatasource control to access sitemap data. The Treeview and menu controls are often used as the interfaces for user navigation on websites. To bind sitemap data to any of the controls, you only need to add the sitemapdatasource control on the page and specify the performanceid attribute of the selected Navigation Control (Treeview or menu. You can add a menu control on the home page using the following identification language.
<Div id = "navigation">
<Asp: menu id = "menu1" runat = "server"
Performanceid = "sitemapdatasource1">
</ASP: menu>
<Asp: sitemapdatasource id = "sitemapdatasource1" runat = "server"/>
</Div>
The following code demonstrates how to bind sitemapdatasource to the Repeater control.
<Div id = "navigation">
<Ul>
<Li> <asp: hyperlink runat = "server" id = "lnkhome"
Navigateurl = "~ /Default. aspx "> Home </ASP: hyperlink> </LI>
<Asp: repeater runat = "server" id = "menu"
Performanceid = "sitemapdatasource1">
<Itemtemplate>
<Li>
<Asp: hyperlink runat = "server"
Navigateurl = '<% # eval ("url") %>'>
<% # Eval ("title") %> </ASP: hyperlink>
</LI>
</Itemtemplate>
</ASP: repeater>
</Ul>
<Asp: sitemapdatasource id = "sitemapdatasource1"
Runat = "server" showstartingnode = "false"/>
</Div>
Each time sitemapdatasource returns the level 1 of the Site Map level, starting from the root node, then the next level, and so on. When binding sitemapdatasource to repeater, first return the first-level enumeration and instantiate the itemtemplate for each sitemapnode. You can use eval (attribute name) to access the specific attributes of sitemapnode. In this example, you can access the URL and title attributes of sitemapnode.
The repeater in the above example will generate the following code:
<Li>
<A href = "/code/basicreporting/default. aspx"> basic reporting </a>
</LI>
<Li>
<A href = "/code/filtering/default. aspx"> filtering reports </a>
</LI>
<Li>
<A href = "/code/customformatting/default. aspx">
Customized formatting </a>
</LI>
These sitemap nodes (basic reporting, filtering reports, customized formatting) contain the second-level nodes of the site map. By setting the showstartingnode attribute of the sitemapdatasource control to false, the sitemapdatasource can bypass the root node and return the second-level node of the sitemap hierarchy.
We can also add a repeater control to bind sitemapnodes that displays second-level nodes. For example:
<Asp: repeater runat = "server" id = "menu" performanceid = "sitemapdatasource1">
<Itemtemplate>
<Li>
<Asp: hyperlink runat = "server"
Navigateurl = '<% # eval ("url") %>'>
<% # Eval ("title") %> </ASP: hyperlink>
<Asp: repeater runat = "server"
Datasource = '<% # (sitemapnode) container. dataitem). childnodes %>'
<Headertemplate>
<Ul>
</Headertemplate>
<Itemtemplate>
<Li>
<Asp: hyperlink runat = "server"
Navigateurl = '<% # eval ("url") %>'>
<% # Eval ("title") %> </ASP: hyperlink>
</LI>
</Itemtemplate>
<Footertemplate>
</Ul>
</Footertemplate>
</ASP: repeater>
</LI>
</Itemtemplate>
</ASP: repeater>
The above two repeater generate the following code (partially omitted ):
<Li>
<A href = "/code/basicreporting/default. aspx"> basic reporting </a>
<Ul>
<Li>
<A href = "/code/basicreporting/simpledisplay. aspx">
Simple display </a>
</LI>
<Li>
<A href = "/code/basicreporting/declarativeparams. aspx">
Declarative parameters </a>
</LI>
<Li>
<A href = "/code/basicreporting/programmaticparams. aspx">
Setting Parameter Values </a>
</LI>
</Ul>
</LI>
<Li>
<A href = "/code/filtering/default. aspx"> filtering reports </a>
...
</LI>
<Li>
<A href = "/code/customformatting/default. aspx">
Customized formatting </a>
...
</LI>
Then, use the CSS style to make it have the following effects:
The menu on the home page is bound to Web. sitemap, which means that any changes to sitemap will be immediately applied to all the pages on the home page.
Disable viewstate
All Asp.net controls can choose whether to maintain the state to viewstate (implemented by serialization into a hidden field ). View state can be used to remember the status of the control during the callback, such as data binding. Because viewstate maintains the information during the Back-to-pass, many ID codes are sent to the client, and if the monitoring is unfavorable, the page will become very bloated. In this regard, the additional identifier code of the gridview control is particularly obvious. This may be negligible for LAN users or broadband users. However, if you use dial-up Internet access, your data may be delayed for several seconds.
To better understand the effect of viewstate, visit a page and view its source code. You can also use the page tracing tool. You will find that the view State information is serialized into a hidden field (_ viewstate) in <form> <div>. View State is only used in web forms. If your Asp.net page does not contain similar syntax (<form runat = "server "). This hidden domain will not be generated.
The automatically generated hidden fields increase the page ID code by 1800 bytes. This only binds the Repeater control to sitemapdatasource (to keep the status ). If you use a gridview containing many fields and records, the view State may increase by more than 10 times.
You can disable view State at the page or control level by setting the enableviewstate attribute to false. Therefore, the generated code is reduced. After the view State is disabled, data is rebound every time the view State is returned. In ASP. net1.x, developers need to implement this function. In ASP. net2.0, if necessary, you can re-bind the web control to the datasource control.
To reduce the view State, set the enableviewstate attribute of the Repeater control to false.
<Asp: repeater runat = "server" id = "menu" performanceid = "sitemapdatasource1"
Enableviewstate = "false">
<Itemtemplate>
... <I> itemtemplate contents omitted for bretid </I>...
</Itemtemplate>
</ASP: repeater>
After modification, the source file size is only 52 bytes, saving 97%. The viewstate attribute of the web control will be disabled throughout our series. The only one is to enable view State to implement specific functions when discussing usage of view State.
Step 5: Add a bread-style navigation
Next, add the breadcrumb navigation to complete the home page. This navigation shows the location in the so-called site structure. In ASP. net2.0, you can easily add the sitemappath control. No node is required.
<SPAN class = "breadcrumb">
<Asp: sitemappath id = "sitemappath1" runat = "server">
</ASP: sitemappath>
</Span>
Shows the map structure of the site you are visiting. All the paths are finally returned to the root node.
Step 6: Add a homepage for each part
Our entire series of courses are divided into different groups, create a folder for each group, and put the corresponding pages in the folder. In addition, each folder contains a default. aspx page. In the basicreporting folder, link to simpledisplay. aspx, declarativeparams. aspx, and programmaticparams. aspx through the default. aspx page. We can add other information based on the sitemap class and web control.
Next, we will use the Repeater control to create an unordered list, but this time we will display the question and description of the course. Since this is applied to every default. aspx page, we create a user control ). Create a usercontrol folder in the site, add a user control named sectionleveltutoriallisting. ascx, and add the following code:
Sectionleveltutoriallisting. ascx:
<% @ Control Language = "VB" autoeventwireup = "true"
Codefile = "sectionleveltutoriallisting. ascx. VB"
Inherits = "usercontrols_sectionleveltutoriallisting" %>
<Asp: repeater id = "tutoriallist" runat = "server" enableviewstate = "false">
<Headertemplate> <ul> <Itemtemplate>
<Li> <asp: hyperlink runat = "server"
Navigateurl = '<% # eval ("url") %>'
TEXT = '<% # eval ("title") %>'> </ASP: hyperlink>
-<% # Eval ("Description") %> </LI>
</Itemtemplate>
<Footertemplate> </ul> </footertemplate>
</ASP: repeater>
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 example, we directly bound sitemap to repeater. However, in the sectionleveltutoriallisting user control, it is implemented through programming. In the page_load event handler, make sure that the page is accessed for the first time and that the page url is mapped to the node of sitemap. If no <sitemapnode> entry exists on the page using the user control, sitemap. currentnode returns NULL and no data is bound to the repeater. Assume that we have a currentnode and will bind the childnodes set to repeater. Because the default. aspx page is set as the parent node of each part in the site map, the node displays the link and description of this part.
After the repeater is created, open the design view of default. aspx. Drag the user control to the page.
Ii. Summary
After creating the home page and sitemap, we will create a consistent layout and navigation for the series of courses. No matter how many pages are added, the page layout and navigation can be easily implemented. In particular, the home page site. Master and site map web. sitemap are used. We don't need to write any code to get a unified layout and navigation.
After completing Dal, BLL, and UIL, we will begin to introduce general data display methods. In the subsequent three articles, we will focus on displaying basic data-displaying data in the gridview, detailsview, and formview through BLL.
Happy programming !!!
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
