Step 4 - Setting Up the Master Page

ASP.NET master pages create a consistent look for the pages (or a group of pages) in your web app. You can then create a set of content pages that contain the content you want to display. When users navigate to a content page, the master page and content page are merged to produce output that combines the layout of the master page with the content from the content page.

1. In the Solution Explorer, double-click Site.master to open the master page in design mode. At the bottom left of the editing window, click the Design tab to view the master page in design mode and you will see the following web page in the design surface:

   

   As you can see, there is an Application Name label at the top left of the form, and a (c) - My ASP.NET Application at the bottom left. Let's change these and see how it looks at run time.

2. Click on the Source tab at the bottom-left corner of the design surface to view the source for the web form.

   Near the top of the source file there is a title element

   

   In ASP.NET, code contained within <% and %> is a server script, which is executed on the web server (rather than rendered in the client browser). In this case, Page.Title displays the title of the content page that is currently being viewed.

3. Change the text to the right of the server script to our company, Acme:

   

   We'll run the web site to see the effect this change has in just a bit.

4. Scroll down a little further to see the navbar-header element:

   

5. Change the Application name text to Acme Orders Web App:

   

6. Scroll to the bottom of the source file to view the footer element:

   

   Again, this element has a server script which inserts the current year into the footer (much better than manually typing the year and having to update it every January 1st).

7. Change the text to the right of the server script to our company name, Acme, Inc.:

   

   Now let's see how this looks at run time.

8. In the Visual Studio toolbar, click the Micrsoft Edge start button:

   

   After several seconds, you should see the web app displayed in Microsoft Edge:

   

9. Notice the three places where we changed the text:
   • The page title says Home Page - Acme
     
   • In the navigation bar, the application name Acme Orders Web App is displayed.
     
   • The bottom of the page shows the copyright with our company name: (c) 2018 - Acme, Inc.
     

10. In the navigation bar, click About to navigate to the About page:

    

    Notice the master page, including the text we have customized displays on this and all other pages in the web app.

11. Go back to Visual Studio and click the Stop button.

12. To see these two content pages, double-click on the Default.aspx and About.aspx pages in the Solution Explorer and view them in design mode (feel free to view other content pages at design time and run time).

See also:
Step 5 - Creating a Customer Orders Form