ASP. NET 2.0 data Tutorial: Create a master page

Generally, user-friendly and personalized websites have consistent page layout and navigation systems. The two new features introduced by asp.net 2.0 provide us with simple and effective tools for unified site page layout and site navigation. They are master pages and site navigation. The master page allows developers to create uniform site templates and specified editable regions. In this way, the aspx page only needs to provide the filled content for the Editable area specified in the template page, all other tags defined on the master page will appear on all aspx pages that use the master page. This mode allows developers to manage and define the page layout of the site in a unified manner, so that they can easily obtain pages with a unified visual and Visual View and easy to update.

The site navigation system allows developers to define site maps and provides APIs to query site map information through programs. The new navigation controls include Menu, TreeView, and SiteMapPath, which can easily display all or some site maps in a general navigation user interface element. We will use the default site navigation provider, which means that our site map will be defined in an xml format file.

To illustrate these concepts and make the sample site of our tutorial more available, let's use this course to define a unified page layout for the site, implement a site map, and add a navigation UI. At the end of this course, our course sample site will have a beautiful design effect.

 

Figure 1: final results of this course

Step 1: Create a master page

The first step is to create a master page for our site. ).

I organized these pages and files to illustrate that the data access layer and business logic layer described in the previous two courses will reuse these examples in more details of future courses.

 

Figure 2: files in our project

To create a master page, right-click the project name in solution manager and select Add new project. Select the master type from the template List window and name it Site. master.

 

Figure 3: Add a master page to the site

Define the unified page layout of the site on the master page. You can use the design view to define the layout or controls you need. You can also manually add tags to the Code view. On our homepage, use the Cascading Style Sheet defined in the external document style.css to define the position and style. You may not know how to display the following labels. The style sheet rules define that the content of the <div> label used in the navigation is absolutely positioned on the left side of the page and the width is fixed to 200 pixels.

 
 

  
  
< %@ 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>  
  
  
 
 
 

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

The editable area is displayed through the ContentPlaceHolder control and is located in the <div> flag. The master page only has one ContentPlaceHolder (MainContent), but the master page can contain multiple ContentPlaceHolder controls.

Enter the above tag and switch to the design view to observe the layout of the master page. All the aspx pages that use this master page have such a uniform layout, and the MainContent area is reserved for the aspx page to show its talents.

 

Figure 4: master page displayed in design view

1. ASP. net mvc Path Selection System Construction
2. URL path selection scenario in ASP. net mvc Framework
3. URL path selection rules of ASP. net mvc Framework
4. ASP. net mvc Framework: Use a strong type class to pass ViewData
5. Use ASP. net mvc framework to create an e-commerce website