(Beginner Level slow) CSS, JS integration and _Layout (Razor Pages - 3) | ASP.NET Core 5 Tutorial

This tutorial continues from the previous tutorial where we discussed how to get started with Razer Pages. We explained how we can display plain HTML with a razor page. We also said that we want to keep the things as simple as possible. This tutorial continues from that place. You should go through the previous video to get a better understanding of this tutorial. This is in absolute continuation of the previous video.

00:41 - In this video we will learn how to integrate CSS and JS with Razor pages. Last time we did was plain HTML, but this time we will learn how to integrate CSS and JS with Razor pages. Specifically, we will take the example of the Bootstrap library. Bootstrap library. Because that gives me a lot of CSS and JS ready made, so I will make use of the Bootstrap library to show how to integrate CSS and JS with your razor pages. The tutorial continues. We continue from the previous tutorial. This is the startup file where we added the support for Razer Files.

01:32 - we added this is specifically for our razors as endpoints. And this was already there, so we’re going to start from this point where we left our previous tutorial. For today’s starting. Add this statement use static files app dot use static files. Add this to include the support for CSS, JS and support for other static files. This has to be included. If this is not included then CSS and JS files will not integrate. Next add a folder called wwwRoot to your project. This folder will hold all your static content. This is the folder that you have to add. Right click here and add a new folder called wwwRoot. This folder will appear parallel to the pages folder. As you can see they will be in parallel to each other.

02:41 - Spellings of this folder and location of this folder are important. Spellings must be triple W root. And the location must be parallel to the pages folder or I would say it should be directly inside the project directory. Now go to the Bootstrap website and download their files. This is the Bootstrap website that I see as of today. It may keep changing with time, but the point is that click on the download to get the CSS and JS files from their website. Extract the downloads somewhere. We have extracted them somewhere. I got these CSS and JS and then drag. Then drag and drop. This CSS and JS folders to the www.rootdirectory. You have to drag and drop there.

03:37 - And you should see like this, after you dragged and dropped, your folders will appear directly inside triple W root. CSS and JS folders, they will appear directly inside this directory. And if I open CSS and my JS folders I see these files here. This JS file here you will find may be with tomorrow they change something. The names might undergo a change or whatever. The point is that CSS directory will contain some CSS files and JS Directory contains the JS files. Before I proceed, let me explain the concept of a layout file. Suppose your website has three pages. This is Page 1. Page 2 Page 3. When a customer opens Page 1. Then this part undergoes change. This part. Undergoes change, header remains same. This remains same. This remains same. This remains same. When the customer opens Page 2, then page one is not there. Page 2 will be shown here. The content specific to Page 2 will appear here header same, this same, this same, similarly for Page 3. So we can say that this is content. So we say that page specific content page specific content appears at a place, certain place in your layout file. A layout file contains header Advert. These blocks Div or sections.

05:18 - And somewhere in the layout file there is a placeholder. There is a placeholder to hold your content files, as a substitution to, this place, so this is a layout file. Now. Let us add a layout file to our project. Layout pages appear in the pages folder in a special folder called Shared. This is the pages folder. This is index dot CS HTML that we did in the last lecture. Inside the pages folder there will be a folder called Shared; spellings are important, spellings matter.

06:01 - And then inside shared your layout file has to be there. I’ll carry you through. We have added this shared folder to the pages folder. Shared folder is inside the pages folder; here. Now right click the shared folder. Two add a new item. This dialog, add new item dialog, will open. Select the razor layout from this list. When you select razor layout. This name will automatically appear. This name. You should keep it like this only. Underscore layout dot CS HTML. After that click add. Then what you see your shared folder will contain the layout file.

06:51 - This file is inside shared folder and shared folder is inside the pages folder. Now have a look at this. This is your normal HTML doctype. HTML tag, head is there, viewport. And wait, this is stuck. And this is the head, meta. let us not talk about this today. Your body tag is there. Then a DIV, then body. so the render body tag that you see here is the placeholder for content pages. Whichever page you open, that page will undergo a substitution at this place. Inside this DIV because of this at render body tag. At render. Body. This razor this at render body, will cause the substitution, so we can say this is DIV start. This is Div end.

07:51 - This is this DAV tag and this is this DAV tag and render body is this one is render body. So this should clarify that things. So what we have done is we have added the layout page to our shared and got this story. Now let us add the CSS and JS files to our layout page. The easiest way is. To select this and drop it to the head tag. Drag and drop. When you do that, drag and drop. This automatically appears. The correct path is automatically adjusted, rel equal to stylesheet, so you see that most of the things typing is done for you. Similarly.

08:38 - Let us drop your JS file somewhere towards the end of the body and this tag will, correct Tag, will automatically appear. Now let us tell asp.net core about our underscore layout file. Remember our name was already selected. Name was already selected, but anybody could change this name. To his own liking, he could give a choice. So in that case you have to tell asp.net core about your layout file. For that we have to add a view start file. This is compulsory. So how do you do? Right click the pages folder, see you have to right click the pages folder. This is very important.

09:27 - Some people by mistake will right click this one. No, not here. You have to right click on the pages folder. And add a new item, Razor view start. This name will automatically appear. Don’t change the name. Keep it as such. And then click add. After that you will see that directly inside the pages folder, your View Start File has appeared. Index parallel to view start indexes directly inside pages. View Start is also directly inside the pages folder. And this statement is there at layout. This tells the name of our layout file.

10:11 - If you changed this name then you should change here also. No CS HTML has to be added. Simply put the name or what I would say. Don’t change anything. The reference to layout CS HTML is already made for you. Lastly, let us add some HTML to our index page. To see the CSS and HTML integrated now. For that I have done some bootstrap tags, classes, container, post and all. This is for some form. So this is small HTML that I put here. You can get the source code and see if there already or you can put your own HTML.

10:54 - Also you can obtain some samples from the Bootstrap library. Or if you know Bootstrap then you can add your own familiar class equal to row, method post and all that. And here I have given names to all my. Probably I’ll be using these in my next lecture also OK, after doing this, let us run the project. When you run the project you will see this. This format, this format. Now this is coming according to the CSS and JS files that we added, integrated into this project. I’ll close this lecture now. We’ll proceed now to the next part. Take the practical. This is my recommendation. Thank you. .