In this blog we will understand how we can create web forms using master pages, child pages. We will also understand how to use them in ASP.NET web application.
What is a web form?
A web form is a HTML form where users will enter data and that data will be sent to a server for processing. These are the web pages that the users will request to view through their browsers. Web forms allow us to collect and manage information easily and efficiently.
We can create web forms in asp.net using the Web Forms template in the visual studio
What are master and child pages?
Master pages are used to create consistency from page to page in a document. Master pages typically contain page headers, footers, margin and column guides, and other elements that occur on multiple pages in our document.
For example, if we take our website sailssoftware.com the header content, navigation bar and the footer look same in all the other pages. So, we can include all of these common elements in a master page. Then all the other pages(content pages/ child pages) will have this page as a master page.
How to create a Master page?
After selecting ASP.NET Web Forms Site as our project template add a project name and then click on create. A web forms project will be created.
Now to create a master page, follow the steps below
- Right click on the project
- Select Add
- Select Add New Item
- Select Master Page from the list
- Give it a name and click on Add
Now a master page will be created for us as below.
We have two ContentPlaceHolders, one is for head and another is for body. In the head ContentPlaceHolder content we can add content to the <head> section. We can include information here such as web page’s title, links to external resources, etc.
In the body ContentPlaceHolder content, data will be displayed specific to that content page only.
Now suppose we want a navbar at the top and a footer as common elements in all the pages. Then we will add them inside the form. The ContentPlaceHolder data present in the body tag is the content data (child page data) where the content is dynamic and displayed differently in different/child content pages.
How to create Content page having a Master Page?
Right click on the project
Select Add
Add new item
Select Web Form from the list (Mark the checkbox in right ,select master page) and click on Add
Now we need to add a master page to the child page ChildPage1.aspx. Select master page as MasterPage.master and click on OK. Now we have a content page which is having a master page.
Now we have a child page with Master page details and content tags. Here in this way Master Page look will be applied to the content page and we can add the content page data inside the content tag. If we observe the Master page with this child page, we have to write content inside the following tag:
<asp:Content ID=”Content2″ ContentPlaceHolderID=”ContentPlaceHolder1″ Runat=”Server”>
</asp:Content>
This data will be dynamic
Let’s add some content here in the content page.
Now when we run the ChildPage1.aspx page, we can see that the content is displayed with the Master Page look and feel which has Navbar and footer. Here Navbar and footer elements were applied from the master page MasterPage.master
Conclusion
Similarly, we can create any number of content pages with the same or different master pages in our project. If we need a page with common functionality, then we will use master pages. If we need a page separately then we can create that page without any master page. In this way we can create a master page that we can use as the template for the rest of the child content pages in ASP.NET web forms.
Written by:
Afzal Hussain Sheik