Sidenote : This is the part 4 of the ASP.Net MVC course series. You can get all the parts of this tutorial here.
While adding view for Index action method, we have unchecked the ‘Use a layout page’ as in below screenshot.
We have unchecked this option, as we don’t know what a Layout page is and how it will help us in making web application development better/easier.
Let me explain. Add another action method ‘MovieOfTheMonth’ which shows highest rated movie as of this month.
I have added the below code to the MovieController
Right click inside the above action method and select ‘Add View’ option.
Make sure ‘Use a layout page’ option is unchecked as we did to Index Action method and click Add. Below code would have generated for you.
I have added the below code in the view(within the above div) to show the Movie of the month to the user.
Under normal circumstances, we will be getting this information by querying the database and get the highest rated movie as of this month. As our objective is to create view with dummy data, I have just created an anonymous object and use that object to display movie of the month to the user.
In our MicroIMDB application, we have 2 action methods in our MovieController
- Index action method – to display the list of movies
- MovieOfTheMonth action method – to display top rated movie as of this month
Now, we want to show some banner image at top of each page. We are not doing anything original here. Most of the websites, including original IMDB, has the below section (containing search box and other links) on every page – whether you are searching for movie or looking for information on any person.
To do so in our MicroIMDB application, we need to make changes in both pages (on both Movie list page Movie of the month page). Think about if we have dozens of pages – yes, we need to make the changes in dozens of pages.
Layout solves this problem by defining the structure of the page. Layout brings the consistent structure to all the pages of the application and results in better user experience.
In the below picture, top and side sections are relatively static whereas the content section would be changed for every page.
Let us see an example how layout is being used in MSDN website (ASP.Net MVC4 reference)
We have top section where they have made links to top level categories(Technologies, Programs etc..) and we have links of sub-categories related to top level category chosen(I chose Documentation). When you click some link in left hand side section (say System.Web.Mvc.Ajax) , MVC ajax information is shown in the content page – everything else in the page remains the same. If you have defined layout page, you can concentrate on only building the content page – rather than building the whole page.
In both of our Views (Index and MovieOfTheMonth), we have assigned Layout = null at the top of the view like below – saying the view engine not to use any layout for the view.
All the information for that page would be rendered from that view itself. As discussed earlier, if you want to change something (like making menu at top of every page), you need to make changes in all the pages. If you use Layout, we can make changes in the layout and the change would be reflected in all the pages if you use that layout.
When you select Empty MVC template, it creates a Layout for us be default. But we decided not to use the layout option by unchecking ‘Use a layout page’ option when adding view.
How can we use the layout in our Index and MovieOfTheMonth views now?
We just have to make two changes.
- Remove the line which sets Layout to null or comment it.
- Remove all generic code – not specific to the view
After making the changes, Index.cshtml would like below.
The top menu bar with text “Application name” and copyright symbol at the bottom of the page is part of layout and thus will be available at every page. Our content(movie list) is displayed with the layout content as in the above screenshot.
But wait… We’ve not defined any layout.
How ASP.Net MVC does gets this layout content?
It’s because of convention over configuration of ASP.Net MVC. By convention, ASP.Net MVC using the layout page as defined in Views\_ViewStart.cshtml. See the note in the below screenshot
Below is the content of _ViewStart.cshtml
It says, use the Layout defined in _Layout.cshtml for all the pages. When we remove Layout=null from our views, it uses this layout by convention – we don’t have to do anything.
Open the file Views/Shared/_Layout.cshtml. It contains the layout information for our application.
There are many things which you may not understand in this layout file. Don’t worry.
The only thing you need to understand is that when view engine sees @RenderBody in template, it would replace the content view(index.cshtml) and send the merged view to the controller.
There is no one layout per application restriction. You can create/use multiple layouts in our application based on your needs.
[button type=”flat” shape=”square” size=”large” href=”https://www.dotnetodyssey.com/asp-net-mvc-5-free-course/views-in-asp-net-mvc-application-and-razor/” title=”Previous chapter”]Previous Chapter[/button] [button type=”flat” shape=”square” size=”large” href=”https://www.dotnetodyssey.com/asp-net-mvc-5-free-course/” title=”Home”]Home[/button] [button type=”flat” shape=”square” size=”large” href=”https://www.dotnetodyssey.com/asp-net-mvc-5-free-course/model/” title=”Next Chapter”]Next Chapter[/button]