1

Lab 11: Master Page and Content Page

1. Open Visual Studio.NET. From the File menu, click File →New → Project, from the Visual Studiomenu.

2. Under Visual C# -> Web, click on Previous Versions and choose ASP.NET Empty Web Site.

3. Key in name and new solution name as MasterWebSite and click OK.

4. In the solution explorer, right click on the MasterWebsite, select Add and then Add New Item.

4. Select Visual C# and Master Page. Name the master page as MasterPage.master.

OBJECTIVE : To create a MasterPage that contains three hyperlinks, and each hyperlink to control one aspx webform.

2

6. Click inside the rectangle and insert a table with 2 rows 3 columnsMerge the cells in the bottom row into1 cell,

7. From the toolbox, add in HyperLink control, change display text to "Home".8. Add another Hyperlink control, text "Order".9. Add another Hyperlink control " Contact".

10. Add a ContentPlaceHolder control to the bottom row of the table. SaveMasterPage.master.

5. In MasterPage.master, go to the design view. Click inside the rectangle. Right-click and select Deleteto remove the default ContentPlaceHolder.

3

11. In the solution explorer, right-click on the MasterWebSite. Select Add and then Add New Item.

Select Visual C# and Web Form. Check “Select master page’. Name the page as Home.aspx. ClickAdd.

12. Select MasterPage.master and click OK.

13. Check in the solution explorer that Home.aspx is created.14. Repeat steps 11 and 12 to create content pages Order.aspx15. Repeat steps 11 and 12 to create Contact.aspx.

16. Open Home.aspx and add a ContentPlaceHolder as shown below.

17. Open Order.aspx and insert a table with 5 rows and 2 columns in the content place holder.

Add in the following as shown below.

18. Open Order.aspx and insert a table with 5 rows and 2 columns in the content place holder.

19. Populate dropdownlist control with the following option by clicking the EditItems.1) Roti Prata2) Nasi Lemak3) Chicken Rice20. Open Contact.aspx and add in the following in the content place holder as shown below

21. Highlight all the content in the content place holder, use either Unordered List orOrder List to organize the content

4

22. Under the Solution Explorer, select MasterPage.master.23. In the design view, select Home hyperlink. In the properties window, click on theNavigateUrl, select Home.aspx and then OK.

Now the link [Home] is linked to the Home.aspx page.24. In the solution explorer, right-click on the Home.aspx and choose Set As StartPage.25. Save your project.26. Run it. If no errors, click the [Home] link. The Home.aspx page should bedisplayed.

27. Select Order hyperlink. In the properties window, click on NavigateUrl and selectOrder.aspx.28. Select Contact hyperlink. In the properties window, click on NavigateUrl andselect Contact.aspx. Save MasterPage.master.

5

29. All links are now complete.Run and test the website. Click on all the links to verify the website.