Layouts (Master Pages) in ASP.NET MVC 5.0: Part Fourteen

Now, I’m going to build layout page, after that I’ll discuss about how we can build subpages from our Layout page.

Step 1: Open Visual Studio 2013.

Step 2: Under Installed > Templates > Visual C#.

Step 3: In the application list panel, select ASP.NET Web application.

Step 4: Give the name of your project, here I given it “LayoutsMVCDemo”.

Step 5: Hit on to “Ok” button (Follow steps in sequence).

Building Layout Page:

I want to create a view for all these things that we should have to all the links in common. So for this we should go in to views folder, under this you find shared folder, in this folder create a new layout page or you can say Master Page.

Right click on to shared folder and add a new item.

For Layout Page select a Layout Page in the list and give it a name, and click on to “Add” button to add a new Layout Page.

If you see in your Layout Page there would be a head tag and the body tag. In body tag you can see a RenderBody() method so it is like a content placeholder of Master Pages. Anything of respective page will render in RenderBody().

In the body, I have taken five Link texts to the different action names to same controller, so this information will be common for all the pages. After the RenderBody, I want to show a simple string for all the pages.

Now we need to add a controller, you can choose the existing controller available in the controller folder. For creating a new controller, right click on to controller folder and add a controller.

Select an empty controller.

Give a name to your controller, whatever you want to give, here I have given it “My”.

Click on to “Add” button to add a controller.

In my controller there must be five Action Names like bases of the Layout Page, where we have five Link Texts.

Now we need to add views to particular Action, so right click near Index and add a view.

At the time of adding a view, it takes a default name and check on layout page and browse the location select your existing layout that is “_LayoutPage1.cshtml”.

Click on to “Add” button to add a view for Index action.

After adding the view, you can see all the things taken care by your layout.

Change the title of ViewBag to Home from Index, because I want to see starting of menu with Home instead of Index. You can put any message over here which you want to show in your browser.

In the same way, I’ll add all the views, so right click on to near AboutUs and add a view.

Again it takes default name for view and select layout page as above like as Index view.

Click on to “Add” button.

In this View, I have simply want to show a message to our browser.

Again add a view for the ContactUs action.

It takes default name for the view, and checks on layout page and view.

A contact view would be created, and I have simply returned my contact in browser.

Now add view for the Facebook action.

Use layout page with this view, click on to “Add” button to add Facebook view.

In this view, I want to show my Facebook user name in the browser, so you can print anything whatever you want to show in the browser through your view.

In the last, I need to add a view for my Twitter action, so right click near Twitter and add a view.

Follow the previous steps and click on to “Add” button.

In this view I want to show my twitter handler details, after completing all tasks save your current project.

Set your default controller to “My” in the RouteConfig.cs file.

Save your project and run it by pressing F5. In the browser you can show your default Home, and message that I give in my view.

One more thing that, we can use CSS to particular view like I want to set color, font and styles in to view, for it go in to content folder, there would be a CSS file with “Site.css” name. I want to make some changes in to this CSS file, open it.

I have a created a class (.hello), and I want color of messages in particular or change all views as red.

You can include any content or code that you want within @section declarations. In @section I gave a link of that CSS which we would want to use.

Give class name, which portion of message you want to show as red.

So, simply click on to AboutUs, and you will find that color of that portion is red, and color of other menus will be same, because hello class and reference link is used for only AboutUs index.

You can have multiple Layouts, for a set of views you want something to be common then you can create a Layout1 and for another set create Layout2 and at the time of adding view you can choose whatever Layout you want.

So this is all about your Layouts.

I hope you enjoyed this article. Stay tuned with me for more articles on all other Microsoft technologies.

Thanks.

Connect (“Nitin Pandit”);