3.7 Using Layouts
Layouts allow you to store persistent elements, such as headers and footers, in a separate HTML document. In this lesson, you will learn how to use layouts in ASP.NET MVC.
1.Introduction1 lesson, 02:19
2.MVC Basics4 lessons, 15:13
3.Designing Within MVC14 lessons, 1:58:58
4.Conclusion1 lesson, 01:11
3.7 Using Layouts
Hello, and welcome back to ASP.NET MVC for designers. You may have noticed when we viewed our site in the browser, that we have a header and a footer, that we didn't see in either of our index views. We created an index view for the home controller and for the shopping controller, but neither one of those views had a header in it, neither one of those views had a footer in it. So you might be wondering where those came from. Well those came from our layout file. A layout is basically just a template file that contains content that remains constant across your entire site, such as a header and footer. In this lesson, we're going to take a look at how to find and edit the default layout document. I'm gonna jump into our project files folder and I'm going to make a copy of Store04 and paste it and rename it Store05, so the files we're starting with in this lesson, are the files from Store04. At the end of this lesson all the changes we make will be saved in Store05. So I'll open up that solution file and I'll get rid of this other Visual Studio window here. And just to re-emphasize what we've already stated, if we go into the Views folder, go into the Home folder, and then take a look at index.cshtml you'll notice that we have no HTML tags. We have no head section, and also we don't see our header and footer in this index.cshtml file. However, if you look in your views folder, you'll find a file called _viewstart.cshtml and if we open that up, we'll find that this particular file defines where our layout file is located. And by default, it puts it in the Shared folder within the Views folder, and the file is called _Layout.cshtml. So we can expand the Shared folder and we can see that _Layout file there. And we can double-click on that to open it up and there we go. Now we see our HTML tags. We see our head section. And we also see the body of our document, including our navbar. Now you'll notice this navbar has a class of navbar, another class of navbar-inverse, etc. These are bootstrap classes that are inserted into your document by default, and that's how the black header bar is created at the top of our screen. If we scroll down to the bottom, you'll also notice a small footer section with some copyright information. And then this part is very important. This render body statement right here. You'll notice that's razor syntax. We have at render body. This render body is basically where our specific views are going to be inserted into this layout. We have our header that stays constant on whatever page is using this layout and the footer that stays constant, as well as some extra information, such as the scripts that are being included and any of this head information at the top. And then whenever we put our render body statement, here, that's where all of our content from our index.cshtml file, for example, is going to be inserted. So if we wanted to add some menu items to our navigation bar at the top of the screen, we would do that in our layout.cshtml file. One thing you'll notice inside this Navbar section, is we have this navbar collapse with the unordered list called nav and navbar nav. And this is where we can put a menu. So, we can add some menu items here with some list items and we can use some razor syntax to do that, so let's do an html.action link. The first thing I want to put in here is the string or the text that's going to be in the link. Let's say we want this first link to link to the homepage. Then we'll use the name of the action we want to point to, which is index, and then the name of the controller, which is home. Then we'll add another list item here with a very similar link in it. I'm just gonna copy this one, paste it here and we might call this "About Us", or maybe just "About". Well, let's go ahead and "About Us" there and then we'll call the action itself, "About", and this is an action we haven't created yet, but just wanted to include some extra links here. And again, that'll be part of the, "Home" controller. And then I'll copy this line and paste it here, and we'll link to the shopping. So we'll just, for the text on the link, we'll put "Products". The name of the action we're pointing to is "Index" and the name of the controller here is "Shopping". So that'll add a few menu items to our nav bar. Let's see if that works. Let's save our layout file and then we'll go to index.cshtml and I'll hit control F5 to publish our file. And let's open it in a new window, so I'll drag this over, and now we can see a couple of menu items at the top of our page. The "Products" will take us to our shopping page and "Home" will take us to our home page or our index page. Now "About Us" is not going to take us anywhere, it breaks the application basically because that doesn't exist, we haven't created that particular action yet. So again, that's not going to be available to us. However, that's how you can very easily go into your layout file and edit the header and footer of your document. Thank you for watching and I'll see you in the next lesson.