Part 27. Layout View in .NET Core MVC. | Sections in ASPNetCoreMvc | Renderbody | ScriptsSection.

[Music] hello friends welcome to programming concepts my name is amit and this is part 27 of asp.net core mvc tutorial in this video we will talk about what is layout view in dot net core mvc this is continuation to part 26 use bootstrap in dot net core mvc so please watch it before proceeding this one i shared the link in the description let's get back to visual studio and this is the project which we are working on let's run the program first if you look at the header you can see there is a logo and a few links if you look at the bottom you can see the copyright footer now if we create another page say add new employee or about us or contact us or anything most probably both header and footer will remain the same so it is advisable to reuse the same code instead of repeating it every time we create the new page right so layout page is one of the option to achieve this for repeatable layout purpose like header footer links etc let's get back to our slide and see the definition from microsoft so what is layout most web apps have a common layout that provides the user with consistent experience as they navigate from page to page the layout typically includes common user interface elements such as app header navigation or menu element and footer common html structures such as scripts and style sheets are also frequently used by many pages within the app all of these shared elements may be defined in a layout file which can then be referenced by any view used within the app layouts reduce duplicate code in views let's see how we can create layout page in our project steps are simple let's get back to visual studio and this is our folder structure so right click on shared folder so why shared folder so it is advisable to place layout page in shared folder because it is not specific to any controller if you look at our index view it is placed under employer folder because it is specific to employee controller but layout is not specific to any controller and will be shared among multiple views so place it in shared food all right so right click on shared folder add new item and then search for layout you will get razor layout and the default name is underscore layout.cshtml you can see the extension is still the same cs html you can name it anything but for now let it be underscore layout click on add you can see it is a normal html template it already contains code which is supposed to be common to all html pages like html tag head title body etc also we have couple of laser tags the first one is viewback.title which i believe you can see it is there to provide the title of your page we haven't talked about the view back yet so leave it for later videos and the second one is render body which is where your content of view will be rendered if it is confusing at the moment do not worry everything will be clear in just a bit now we know that header we created in our index view is reusable so let's cut and paste it here so go to index.css html cut the nav element and paste it to our newly created layout page similarly we have a footer let's quickly cut and paste that as well so place footer below render body as render body is the section where content of index view will be rendered we also have bootstrap.css as well let's cut that as well and paste it into the head section and let's run the program oops header gone footer gone and we have a table with no design can you guess why it's simply because we haven't told our view to use our layout page let's quickly do that as well so within our index view at top right add curly braces open layout is equal to specify the path so tilde sign slash views slash shared and within shared we have underscore layout dot cs html curly braces close or if you don't want to type the whole on the absolute path you can just write underscore layout without extension this will automatically look for an underscore layout view within the shared folder let's save the page and refresh the page and you can see the output is as expected all right in layout we also have concept of sections a layout can optionally reference one or more sections by calling render section sections provided a way to organize where certain page elements should be placed each call to render section can specify whether the section is required or optional what does that mean let's see that in action so there is certain javascript that is useful to a particular views only now because this js are not useful on every page there is no point to include them in the layout pages so to organize them better let's provide a section on the layout page so let's create a section for scripts just before the end of the body tag so add render section and the first parameter will be name let's name it scripts next specify the comma and type required here you decide whether to make this section optional or not let's make it mandatory for now so the required is true let's save and refresh the page and you can see the error and the error is the layout page which is slash views within views we have shared folder within shared folder we have layout.cs html cannot find the section scripts on the content page and our content pages views slash employee slash index dot cs html so let's create this section in our content page as well let's go to index view dot cs html let's type add section scripts curly braces open curly braces close and within this action you can reference javascript so let's use jquery.js so let's type script type is equal to text javascript and location so location specified with the help of source src is equal to tilde sign slash lib slash jquery slash jquery.js let's save and refresh the page working as expected let's see the page source you can see our script is placed after the footer right so let's quickly change the position of the script section and place it at the top all right let's save and refresh the page once again go to its source and you can see it is still at the bottom even though we place the section at the top in our content page so it doesn't matter where you placed this section on the content page the position is decided at the layout page level hope you understand the basics of layout page alright then that's it in this video if you have any queries related to the content of this video do ask me in comments till then thanks for watching [Music]

Channel: PRO Concepts

Views: 1,085

Keywords: asp.net core, asp.net core mvc, layout view, layout file, layout page, asp.net core layout example, asp.net core view layout, asp.net core _layout.cshtml, create layout asp.net core, masterpage in asp.net mvc, master page in asp.net core, aspnetcore without entityframework, sections, script section, layout section, asp.net core layout section, asp.net core @section scripts, asp.net core section example, asp.net core optional section, asp.net core mvc cannot find section, amit

Id: goy4LRgJxOo

Length: 9min 45sec (585 seconds)

Published: Sun Mar 20 2022