(#8) Layout file explanation | _Layout.cshtml in .NET 6| ASP MVC .NET 6 C# Tutorial for beginners

hello guys how are you i am noor and today i will go through the explanation of layout.cs html file inside our mvc.net 6 application so basically layout file are the layout.cs html file is the name explained used for setting the layout of our application uh i think uh i should go to the band and then explain me um here let's suppose you have uh a website where there is your header of your application and let's suppose here is the footer of your application and no let's suppose you are using here it is it is the body of your website okay now let me put here some content like on the home page [Music] page and here let's suppose you have the contact us sorry guys for the bed drying okay and here you have footer like in the footer you know that there are content like in this home about contact and here let's suppose you have the address block fix in this way basically a website look like in these and here you have some uh content like these uh if you are using it like a news website then there will be content like the news title and the new the news title and the news body and here may be the news image the one image the second image in the third image let's suppose you have a website like in this way now how will you use the layout page in your spmvc application basically when you click on the home page then the content of this area will be replaced by the home page but the header and the footer will be remain static no content will be chain and when you click on the about us page then the these area will be replaced by the about us page but the footer and header will be remain same and again if you click on the contact us page then the contact us page content will be loaded but the footer and the header will be remain same because you are using a layout and you decide to keep the header and footer static you want the header to be at the top of your all pages and you want the footer to be at the bottom of all the pages and in the middle you want to be the content dynamically loaded for all the pages and let's suppose you also want to have a left side menu like you see in the admin panels these first content and the second content and the third content no you are deciding a layout that on the left side i want the left side menu in the top i want the header in the bottom i want the footer so in in the layout you are deciding basically the layout of your website and some kind of other things like the status file registration also you are importing the css and javascript file also in the layout pages no i will create a project of spmvc.net 6 so that i can also show you the code of the layout page click on this option and i will select the asp mvc i will search for sp mvc now here select this template with the model view controller click on next here i will keep the name of my application asp yes it will be the name of the project and it will be the location click on next and here i will select the framework here are 3.1 5.0 and 6.0 i will select this one no authentication tab uncheck this option and click on create okay so the project created successfully let me first run the project because i want to show you just the simple layout that by default use by the spmvc project okay guys so here you can see that we have the header of the website this area is the body of a page and here we have a very simple footer if i click on no i am at the home page just refresh the page again okay now i am at the home page if i click on the privacy page then this content will reset will remain same these will also remain same but these content will be replaced by the privacy page now i am clicking on privacy page you can see that the home page content replaced by the privacy page no i am going to the layout file so that you can see the difference of this thing inside the share folder you have to add your layouts page you can also use different layouts according to your pages let's suppose you have 10 pages inside your application and for the five pages you want to use different layout and for the next five pages you want to use different layout like in the sense of theme in the sense of coloring in the sense of content placement then you can use different layouts also now i am opening the layout page here let me close this one this one and this one you can see that it is the a normal html page here we have the header the body and it is the overall html tag inside the head take of the layout as you also know that in normal html pages we import here the css and the javascript files you can see that i am porting the bootstrap library the side.cs in this folder yes the site so i do cs and also these css files and inside the footer you can see that i am importing some jquery bootstrap dot js and site.js libraries it is like in normal html page but how these things are constant the header in the header in the top of the application the footer at the bottom basically if i just expand this one here you can see that it is our header in the footer we have the food here we have the footer at the bottom but how the body is replaced dynamically it is you to this line let's suppose you hit the home page then this con content will be constant these will be constant but here the home page body will be rendered and then let's suppose you go to the privacy page then again this is constant for the privacy page this is also constant but the render body this line of code will render the privacy policy page content if i just show you the content of the pages the it is the home page and it is the privacy page in the privacy page you can see that we have this content yes and inside the home we have some different content so it will be replaced by using the render body let's suppose i want here uh also a adiu and the div should be let's suppose i want the div to be uh to be viewed uh for all the pages and inside the div i just want to add h2 tag and hi node and node it's simple now let's me hardly load the application and you will see that this content will be constant and will be displayed for all the pages because uh i want to um to be this content in the layout of the website and i want to be displayed for all the pages so let me go to the browser you can see that the hyundai is displayed is after the header of the website if i go to the no i am at the province page if i go to the home page also this content will be here i know it is constant no privacy period higher note because i want that these content should be displayed for all the pages now let's suppose i want to use different layout for the privacy and different layout for the home page then how will i handle i just i have just to stop the application let me add another layout page to the shared folder uh just copy this one and paste here layout privacy yes it will be the layout privacy and let me rename this one layout privacy yes no i have two layouts the layout the normal and the layout privacy i will go to the privacy page and i will change its layout how can i change its layout i think i can do like in this way lay out is equal to i will give the full path it is views add and inside the share i have these layout cs html right control z controls it it's fine i want for the privacy page to be different layout now i will uh let me open the layout.privacy yes for the layout privacy i want to keep the color of these the background color of this div to be like to be a like yellow background blur should be yes yellow i want for the privacy page and for the home page i want to use the layout.cshml this layout and for this layout there will be no div but and there will be no i mean background color so let me run the application yes so it is our home page and now let's let's me open on the privacy page you can see that for the privacy page the background color is different and here the background color there is no background color because i am using two different layouts accordingly right uh so you i have also explained about the footer about the javascript file and about the cs files right okay so this was about the layout page thank you

Channel: Noor Codelogics

Views: 2,757

Keywords: layout file, layout cshtml, layout .net 6, layout.cshtml .net 6, MVC layout templates, layout in asp.net mvc, _layout.cshtml in mvc, _Layout.cshtml, net 6, asp net core, dotnet core, dotnet 6, layout in asp.net core, _layout.cshtml in mvc 5, Layout in mvc, ASP MVC .NET 6 C# Tutorial for beginners

Id: vtMNoc9wzrI

Length: 13min 36sec (816 seconds)

Published: Fri Aug 26 2022