Introduction of Mastert page
0 likes366 views
The document discusses the purpose and implementation of master pages in ASP.NET. Master pages allow common page elements like headers, footers and navigation to be defined once and shared across multiple pages, avoiding redundant code. They provide a consistent look and simplify future design changes. The document outlines creating a master page, adding content placeholders, assigning the master page to other pages and populating the placeholders with unique content.
Introduction of Mastert page
- 1. Thanks, Harshida Parmar http://www.nichetechinstitute.com/
- 2. • In this presentation we are going to learn about master page. But why? So let us understand why master page is needed. It’s a total new concept in ASP.NET. Suppose we are going to create an application with some design and navigation. • So we may have multiple pages with same design. In such a case we have to copy the same design in all the pages, which will waste our time and also increases the length and load of the page. Prepared By, Harshida Parmar, NicheTech Com.Sol.Pvt.Ltd (http://www.nichetechinstitute.com/)
- 3. In addition, if we change something in this design like navigation URL or code then we have to make change in all the other pages. So to remove this limitation we uses Master page. Let us take a look at figure in next slides. Here in the next slide figure the rounded figure always same in all the pages. So it is batter to use it one area that will have all the same design and we just have to call that area in our page. This concept is known as master page. Prepared By, Harshida Parmar, NicheTech Com.Sol.Pvt.Ltd (http://www.nichetechinstitute.com/)
- 4. Prepared By, Harshida Parmar, NicheTech Com.Sol.Pvt.Ltd (http://www.nichetechinstitute.com/)
- 5. • It is very easy and simple to create master page in ASP.NET 3.5. We just have to make design and put it in the master page. Let us follow the steps and create maser page. We are going to make design as below: Prepared By, Harshida Parmar, NicheTech Com.Sol.Pvt.Ltd (http://www.nichetechinstitute.com/)
- 6. • In this application some portion is always same that is header links like homepage, about us, etc. Then the left side image will be same and footer will also be same. So whenever we are going to create new page then we have to make the same design for all pages. So it is batter to use master page. So let us implement master page in it. • Whenever we create the application by default one page will be added. So now we will add new master page… Prepared By, Harshida Parmar, NicheTech Com.Sol.Pvt.Ltd (http://www.nichetechinstitute.com/)
- 7. • Create .net application… • Then after right click on solutions explorer • Create new item • Select master page from Create new Item Window • Check out next slide Prepared By, Harshida Parmar, NicheTech Com.Sol.Pvt.Ltd (http://www.nichetechinstitute.com/)
- 8. • Prepared By, Harshida Parmar, NicheTech Com.Sol.Pvt.Ltd (http://www.nichetechinstitute.com/)
- 9. • Master page has one area which is known as CONTENT PLACE HOLDER. Master page contains one content place holder by default as displayed below: Prepared By, Harshida Parmar, NicheTech Com.Sol.Pvt.Ltd (http://www.nichetechinstitute.com/)
- 10. • The main purpose of content place holder is to create area which is changing in all the onther page. So in master page will make content place holder which will be different in other pages. • But is it not necessary that we have only one area. If we take a look at image2 website demo then it has three areas which will be same in all the page. It means that we have one content place holder. • You can check out the ContentPlaceHolder from toolbar Prepared By, Harshida Parmar, NicheTech Com.Sol.Pvt.Ltd (http://www.nichetechinstitute.com/)
- 11. • Take a look at following image: Prepared By, Harshida Parmar, NicheTech Com.Sol.Pvt.Ltd (http://www.nichetechinstitute.com/)
- 12. • Prepared By, Harshida Parmar, NicheTech Com.Sol.Pvt.Ltd (http://www.nichetechinstitute.com/)
- 13. • You can see in previous slide we have one master page in that we have set our design … • Now what we want is… this design should be exist in all the pages… in our website • So for that you have create one new page • So create new web form (.aspx) page check out the next slide you will get all idea… Prepared By, Harshida Parmar, NicheTech Com.Sol.Pvt.Ltd (http://www.nichetechinstitute.com/)
- 14. • Prepared By, Harshida Parmar, NicheTech Com.Sol.Pvt.Ltd (http://www.nichetechinstitute.com/)
- 15. • Now you have check the checkbox which contain the text “SELECT MASTER PAGE” • When check it one window will pop up… Prepared By, Harshida Parmar, NicheTech Com.Sol.Pvt.Ltd (http://www.nichetechinstitute.com/)
- 16. • This window show that please your master page… • Means which master page design you are interested to apply in .aspx page • When you select your master for your .aspx page then one window will shown to you Check out the next slide… you will get proper idea… Prepared By, Harshida Parmar, NicheTech Com.Sol.Pvt.Ltd (http://www.nichetechinstitute.com/)
- 17. • Prepared By, Harshida Parmar, NicheTech Com.Sol.Pvt.Ltd (http://www.nichetechinstitute.com/)
- 18. • So now you can see that when we create the .aspx automatically master page design will support… • So now we will add our changing code to new page’s content place holder. • Now we are working in .aspx page… Prepared By, Harshida Parmar, NicheTech Com.Sol.Pvt.Ltd (http://www.nichetechinstitute.com/)
- 19. • Prepared By, Harshida Parmar, NicheTech Com.Sol.Pvt.Ltd (http://www.nichetechinstitute.com/)
- 20. And finally it will give following out put. So now if we add number of pages to the application then also the design will not take as much time and lots of code. In more if we change any design the also it will be changed in all other pages automatically. Prepared By, Harshida Parmar, NicheTech Com.Sol.Pvt.Ltd (http://www.nichetechinstitute.com/)
- 21. Prepared By, Harshida Parmar, NicheTech Com.Sol.Pvt.Ltd (http://www.nichetechinstitute.com/)