Episode 2 Using MVC Template and adding custom pages (ASP.NET Core MVC)

[Music] hi and welcome to the second episode in building a website using visual studio 2022. in the last video i showed you how to install it and what settings you needed in this video we're actually going to start building that website using an mvc template so without further ado let's get straight into it this is the uh the main screen we have i left you on this screen earlier in the other video what we want to do is we're going to create a new project any projects that you do create will start appearing here so i'm just going to go straight to create new project now the uh project that we're actually going to be developing is an asp.net mvc model view controller so i need you to find that so if you set this to c sharp set that to windows it will reduce the amount of items that you're going to be looking at we do not want this one asp.net core web app so we're going to ignore that one and we don't want the asp.net um core empty either i'm gonna keep going down this is the one i want you to use the asp.net core web app model view controller and it says clearly underneath a project template for creating an asp.net core application with example asp.net core mvc views and controllers this template can also be used for restful http services so that's what i want you to use so i'm going to click on that and hit next now we want to give our project a name now as i said to you before i am going to be creating an estate agency so i'm going to call it etjs estate agents okay the location of these files is going to be shown just below here so i've got uh this link here which will take me straight to my repository and i'm just going to add the word application at the end of my solution name so this is a solution name here um and i'm just going to hit next okay now before you hit next straight away what we want to do is we want to set some authentication that's basically the the login option so simply click down and go to in individual accounts okay individual accounts will allow people to log in using their own email address it doesn't have to be a company email address or anything like that and you don't have to use any other kind of authenticators to log in so it's as simple as that so we're going to use individual accounts and also make sure that this is ticked as well configure for https um we've covered https before this is the more secure method of transmitting information across the internet okay so i'm going to hit create and what this will do is it will use the information that i've selected to create our program it's using a template and there it is okay so at the moment you might be a little bit bamboozled by what you're saying but i'm just going to take you through it all so this is the main screen area here so if i want to have a look at a file or something like that the instructions will appear here over here i've got my server information and i've got a toolbox as well which is currently empty and over here is where all the good stuff is so these are all your files okay and as i said this is a model view controller so we've got your models your views and your controllers i am going to go into detail as to what this is all about as we progress in developing our website but for now all you need to know is that all your html files or rather they're actually not just html that razer html files will be located in your views area the controller is going to be located here and your models will all here we haven't got any models to uh to look at at the moment so i'm just going to leave that as it is but we do have a home controller and that controls the stuff that's in this folder the home folder okay also as well as your views and your controllers we've also got this www root area within your root area is your css so you can go in and modify your css in fact i'm just going to open that up so you can see it to open it double click and uh it will open the fold open the file up if you just uh let me just shut that down a moment if i was just to click on it once do it now it does open it so this is the main css we have got more going on we've got a javascript file going on here so there's some uh well actually there is no javascript in there at the moment under library we've got all the other stuff going on so we've got bootstrap and bootstrap is what's going to give your website its main appearance and i'll show you that in a moment okay so we've got the bootstrap css here and the bootstrap javascript here so you'll see there's plenty of uh javascript going on there and these css files are also heavily populated okay so what i'll do is i'll just uh minimize those down and we'll go and have a look at this running so i'm just going to go and click on this item up here so if you notice it says etjs estate agents so i'm just going to click on that there and what that does is it runs the server it runs the uh the area where it's going to run and it should fire up the the application and it has done it there you go okay so it's now working so let me just take you through this this is very basic at the moment so we've got etjs estate agents all with no spaces uh a home folder a home page and a privacy page if i click on the privacy page it just gives you this kind of information if i click on home takes you back there click on privacy again i can actually go back to home using this as well using my the name of the company okay so i'm just going to shut that down come back into visual studio we can shut that down as well what i'll do is i'm going to open up the first view so we're going to go into the index view as you can see it is using html i'm just going to make it bigger so you can see it clearer there you go okay maybe a little bit smaller than that yeah there you go okay so i'm just going to add another line under here so so using the uh the p notation for uh paragraph in html and as you can see it creates the open p and the close p as well so i'm just going to say this line has just been added just to show you how simple it is okay saved it go back into here and you'll see that the line has just been added there you go now one of the advantages with the new version of visual studio 2022 is this thing called hot reload so i'm just going to show you that working so i'm just going to pop the website over here and have the application running over here so as i said before what you would have to do is if you made any changes you have to shut it down make the changes fire it back up again but now i can do it on the fly so what i'm going to do question mark is this is added on the fly and i hit this button here hot reload and you'll see just here it appear okay so it means i haven't got to keep closing and opening closing it now as i said to you i do need to change this etjs agents up here as estate agents up here so the file that is actually located in is in a shared file this area above this line i don't know if you can see that line very clearly appears in the layout file so i'm just going to go into that now because i've got a smaller screen i can't see it fully but doesn't matter i know where to look so first things first i want to change the title so i'm going to put spaces in like so i shall save it i shall hit hot reload and i don't know if you noticed it put those spaces in yes it did you're looking in the wrong place it's this area up here okay because it's a title it appears in the tab so i'm just going to close those down again so you can see it and actually what i'm going to do is i'm going to actually do hot reload on file save so i'm going to click that option there so i'm going to put spaces back in save it and just watch what actually it does help if i save it right so let's put those in like so and you'll see that the spaces disappear up here because i saved it and if i save it again spacers will come back okay so also in here is another estate agents without spaces so i'm just going to do that save it and that will affect this area here okay so this line that i'm looking at now let me just make this full screen so this line here i'll highlight it there you go is controlling that um that etjs estate agents okay so you can see that it made the change straight away okay so what i'm going to do now is i'm going to show you how to add some more pages to your html to your uh project so at the moment like i said if we go into views you can see that we've got index and privacy what i want to do is i want to create another one called about us um now to control that we need to go to the controllers and the controller that we've got at the moment is a home controller home controller home folder okay so there is a link between the two so i'm going to do is go into there so as you can see in your home controller class you've got a few things going on um one of those is this area down here which is showing the um the pages that we're using at the moment so at the moment we've got an index page which is the home page and we've also got a privacy page as well and we've seen the privacy page and the homepage both together what i'm going to do is i'm going to create a an about us page in between the two so to do that i simply type public i action and you'll see that because i've actually got i action um because i've started typing i action rather it's guessing which one i want so i'm just going to press return so i action about i'm not going to call it about us i'll just call it about in here and i use the brackets to denote that this is going to be a method okay and then i press return using curly braces press return i'm then going to return view so i just wanted to return the view all right and once it's done that i can save it i can then right click on this public and add a view all right and i'm going to create a razor view i could create a razer view empty it doesn't matter but i'm just going to go add it's going to be about it is empty at the moment let me just uh see if i've got anything now there's nothing i can add there so i'm just going to go add wait for it and just look here where it's uh the views home and you'll see the about appear in there so we'll just wait for that there you go it's now there this is it up here so what i'm going to do is i'm just going to change that to about us like so and i'm going to put about us here as well and we'll add a little line using paragraph this page will contain information oops information about the business and the staff there you go okay i'm just going to save that and we'll run it just wait for it there you go now you'll see that it's not actually made any difference this area here but if i go to privacy you can see up here what the format is so if i go to where it says privacy and simply change that to about and press return you'll see it's taking us to the about page so the about page is actually there it's just not directly accessible through the navigation bar and again if i want to go backwards and forwards i can still do all of that so let's uh just bring that over to here a moment so i want to do is i want to add it to this bar up here so i'm going to go to the layout which is this button here you can see the information for layout here now um because i've got it blown up slightly it's not very clear to see but the actual um area for the uh these two items here can be found in this area here this is your navbar area okay so what i'm going to do is i'm just going to copy that line there copy i'm going to go just one below and paste whoops i shall paste it actually from the home like so okay so you can see that we've now got um i've got two index pages uh two index links and if i was to save this just uh make sure that's switched on yeah so if i was to save this i'll have two homes appear up here like that what we want to do is we want to change that second home into the about us so i'm just going to go to here now the asp controller needs to stay at home because that's where all the controlling is happening this bit here needs to be changed to about and this which is the bit that uh the bit of the code if you like that displays on the screen needs to be about us so the asp action is the file name this is the display information so when i press save it will say about us up here now if i click on that it takes us to about us home and privacy policy so now that's working okay now one of the questions you might be asking is well do i really need to do all that stuff in the uh in the controller well let me show you what happens if you don't so what i'll do is i'll shut that down now and make this full screen so let's just assume for a moment that we didn't have this at all so i'm just going to take it out like so okay and now i run it so just wait for it to fire up now if i click on about us it can't find the information because it's not being set up properly okay so it is really important that in this section here you have that view set up if you don't set up the view properly it won't work all right so i'm just going to save it run it and now i've got it again okay so what i'd like you to do is to create some more pages add them to your navigation bar okay i do hope you like this video please like and subscribe and hopefully you won't miss my next video which is going to be about the uh registration and logins scripts okay until then goodbye

Channel: Kernow Coder

Views: 26,158

Keywords: Visual Studio 2022, Visual Studio, Microsoft, Web Design, ASP.NET, Web Development, C#, dotNet, razor pages, model, view, controller, MVC

Id: eGkkqpKrH0o

Length: 18min 4sec (1084 seconds)

Published: Wed Dec 01 2021