This tutorial will show you how to create a Master Page in Visual Basic.NET. Most of today’s webpages contain a similar theme throughout the site and have an editable content region in the center of the page. This “theme” is the site’s structure or Master Page that every page follows. Coding a Master Page “theme” can help create a consistent framework for your users to explore and prevent you from having to code the same layout over and over again on each page you create. We will be creating a Master Page, a Navigation Bar, and an Editable Content Region that will help increase productivity in your workflow.

Setting Up

We can start by setting up a new website by opening Visual Basic and selecting New Website, select ASP.NET Empty Web Site and name it something simple like VBProject. Choose a file location that works best for you and where you can start building your site’s structure. Click OK and you will be given all the necessary documents to start your ASP site.

Step 1

To create a Master Page, Right-Click the Solution Explorer Panel on the right and select Add New Item. A window will pop up with a list of items that you can add to your web site. Select the Master Page item and click Add. When the file is created you will have a page with the containing code.

This is the Master Page structure where you will code the overall look and framework of your site.

Step 2

We will work with the provided code and change some styles to create a working webpage with a Header, Navigation, and a Body with a content region that changes depending on the page requested. Update your Master Page file with the code provided below.

We have created a Master Page with a defined layout with three main div areas contained within a wrapper. One div is given an ID of “content” and wraps around the . The ContentPlaceHolder is a control region that can be edited by ASP.NET pages that reference the Master Page we just created. By using Placeholder IDs, we can now insert ASP.NET pages into this editable region to create new pages with unique content on the fly without extensive code rewriting. Click on Design or Split view and you should have something similar to the image below.

Step 3

We will need to create a stylesheet so we can change the look of the site and see what we are working with. Right-Click on the Solution Explorer panel on the right and click Add New Item. Select the Style Sheet item and name it StyleSheet or any name feel is necessary.

In order for the Master Page to link to the newly create style sheet, you must update your code from this…

to this …

With the new style sheet linked to the Master Page, we can now begin to style our site. To help out, copy and paste the following code we provided into your StyleSheet.css file.

You Master Page should now look like this.

Step 4

Now it is time to create some content and place it with the Master Page Editable Region. Right-Click the Solution Explorer and select Add New Item. In the Pop Up window, select the Web Form item and name it Default.aspx. Make sure you check the Select Master Page box and then click Add. On the next window, select the MasterPage.master file and click OK.

You will notice that in our file, our Default.aspx code references the MasterPage.master file and contains a ContentPlaceHolderID that links to the Content Region that will be edited. Update the Default.aspx page with the following code.

Save your Document and preview the page in your browser to see the newly crated page based off your Master Page theme. It should look similar to the image below.

Wrapping it Up

By creating a Master Page template for you site you can save your self time and headaches. You can populate new content for your website faster and easier while keeping a consistent look that can be reused an infinite amount of times. Keep practicing and develop your Master Page even further with more ContentPlaceHolders to expand the possibilities.

Download Source Files