Complete 3 Hour ASP NET 6.0 and Entity Framework Core Course!

welcome to this free asp.net course in this course you are going to build an entire pizza delivery application using asp.net mvc and entity framework core my name is denis panuta and i'm grateful for your attention as well as for the 50 000 subscribers that we have reached on this channel so if you want to plus one that hit the subscribe button and also the like button if you feel it's amazing to get this huge amount of content for free and by the way this is just a third of the entire course that we are about to launch you can find the link in the description below to register for the course and i have some more amazing news this course wouldn't be possible without my co-instructor jenny leismann who is also our new content creator for tutorialcu hi there as dennis already mentioned my name is yannick and i'm a professional software engineer microsoft certified web developer and content creator now at tutorials.eu i'm super excited to be part of this channel and to teach you asp.net i would say let's dive right in and get started welcome to chapter one in this chapter we are going to look at what asp.net is we're going to understand what mvc blazer and razer means and how they are interconnected with each other and how they are connected to asp.net as well as install the right packages in visual studio so in case you're not sure whether you have the packages installed that you will need for the project i would recommend that you definitely watch that video as well so let's get started all right so let's have a look at asp.net core 6 what it means and where it comes from those kind of things so what is asp.net core well it's a cross-platform high performance a open source framework by microsoft yes it's open source and you can go to github clone it and contribute to it if you feel like it it is used for building modern cloud enabled internet connected apps so let's explore a brief evolution of asp.net so it was introduced in 2002 and it started out as asp.net evolving from the version 1.0 to 4.7x which only supported windows builds this was actually a limitation for developers getting into the ecosystem so asp.net core was then introduced in 2016 to support cross-platform builds and made open source by microsoft a move that converted a good number of developers into the microsoft ecosystem so why should you choose to learn asp.net core instead of any other web development framework or tech out there well the strengths of asp.net core lie in its ability to develop and run applications across multiple platforms which makes it more productive and less time consuming there are components of the framework that make development faster and easier like the razer pages which render components that are reusable and make development easier and faster the framework being open source means that it will be easier for you to learn from community contributed content continuous evolution and support of commonly used tools in the ecosystem are also part of it so it's supported by microsoft and they're really working on it and really improving it so let's dive into developing with asp.net core we can build web applications internet of things applications mobile applications and back ends across all platforms all this using our favorite development tools like visual studio cutting across windows linux and mac os and asp.net core supports deploying applications to both on-premise and cloud servers so developers can utilize cloud solutions like azure aws or legacy servers running on premise don't forget to check out our asp.net 6 full course in over 13 hours of content including quizzes and challenges you will build real world projects including handouts and support we will also dive deep into topics like mvc pattern blazer server restful api development authorization and authentication and entity framework you will become a true asp.net rockstar so wait no longer and enroll right now you can find the link in the description below before we head into the gist of the course let us first have a high level understanding of when and why we use the different templates because there are these keyboards razer blazer mvc and all of those are basically just templates in visual studio and yeah let's look at them there are three approaches to building modern web uis with asp.net core we can choose to build applications that render ui from the server or those that render ui on the client in the browser or those that use both techniques of course there are pros and cons to using each of these approaches so let's look at it in detail so now let's talk about the server render gui approach first as the name suggests the uis html and css are dynamically generated on the server in response to a browser request the advantages of using this approach is that the client requirements are minimal because the server takes care of the logic and page generation this is great for building for low end devices users with low bandwidth connections and multiple browser versions will appreciate that the downside is that it is expensive as the server handles all the work and user interaction is time consuming because every update has to be generated and rendered by the server this approach is commonly used for static sites and then we have the client renderer approach the ui will be dynamically rendered in the client's browser by manipulating the dom accordingly dom stands for document object model which will allow us to write codes that can change the document structure style and content the advantage of this approach is that the app is highly interactive as dui updates are handled locally and it is cheaper as the cost of rendering the ui is offloaded to the client it also supports building progressive web apps as the offline mode will still provide interactivity the downside is that it will exclude clients that have low end devices or low bandwidth and when it comes to load time of the logic users may experience latency as the code needs to be downloaded onto the client this approach is commonly used for interactive dashboards or collaborative apps so when we use the server rendered ui we can choose between razer pages or mvc which stands for model view controller so let's talk about ranger pages first razer pages is a page based model where the ui and business logic are kept separately it is easier to make ui updates and keep the pages organized furthermore this approach is easy to test and scale then we have mvc the model view controller pattern separates the app into models views and controllers controllers are responsible for working with the model to perform user actions the controller chooses the view to display and provides it with the data required it supports decoupling of low level details and for this reason it is great for building scalable large apps when we use the client rendered ui we can choose between the blazer framework or a simple page application with javascript for example let us talk about blazer blazer apps are built using razer components in blazer both the client and server code is written in c sharp blazer apps work well with model browsers because blazer uses open web standards without plugins we can alternatively create single page applications with javascript frameworks like react and angular with the popularity of javascript this can be an easier option however with evolving javascript framework languages this can be hard to maintain so we're going to check out blazer razer and mvc in this course so this was just to give you an idea and an overview of what you can expect welcome back in this video i would like to quickly show you which tool we're going to use and you can just install it and then move on from there because we need to make sure that you have installed the right packages as well because just installing visual studio is not going to be enough and you might be wondering why certain frameworks don't appear in your case so let's look at that so first of all you need to go to visualstudio.microsoft.com downloads and then just download the community 2022 version which will be free or you can obviously decide to use the other ones as well if you want to pay for them but the community version is for free so you can either install the visual studio with net or visual studio without.net which will be a custom installation where you select any workloads that you want to select so just download the visual studio installer or this setup axa and it will open up the visual studio installer and well it says that i cannot open another instance that's because i have this tool installed already and opened up already so this visual studio installer is basically just a tool that allows you to install visual studio and all of its packages so here in my case you see that i have two versions of visual studio installed already 2022 and 2019 and you can go over to the available options here and then select the one that you want to install in my case i installed the community version so you will find the community version here and you can then install the version directly from here now installing this tool by itself is not going to be enough because you also need to make sure that you modify it so you go over to modify and then here you need to make sure that the asp.net and web development workload is active so here check this check box and then click on modify and this will then install asp.net for you you will need that in order to get the right frameworks installed for you otherwise you will be struggling and they won't appear for you and you might be wondering why that happens okay you can obviously also install individual components from here specifically i'm going to quickly scroll through them if you want to make sure that you have the exact same ones installed as i do and either way should be fine however okay so just installing this bigger workload will do the trick now click on modify and then install the workloads that you need there once the installation process is done you can launch the application directly from here and this will open up visual studio for you just to test whether things are working go to create a new project and then search here for blazer for example okay blazer there we are search for razer razer there we are and also search for mvc while you're at it so here asp.net core web app using the model view controller okay so that's what we're going to do in the next video so just make sure that you have those available if you don't then you missed to install something in your module so just go to modify and then add the workload this one here okay so see you in the next video welcome to the mvc chapter in this chapter we are going to dive deeper into what mvc means we're going to build our first model view and controller as well as look at how to create a form and build a form based page and along the way you will have a couple of challenges so let's get started all right before we get started using mvc so the template in visual studio let's have a look at what mvc stands for and how all of this works alright so mvc stands for model view controller which is a software design pattern commonly used for developing user interfaces that divide the related program logic into three interconnected elements and let's look at those interconnected elements here so we have the model the model contains the data that is represented by the view so this would just be classes that we're going to create data classes for example and stuff like that then we have the view also known as the representation which is responsible for representing the model or the data and handle user interaction so that's what we can see and then finally we have the controller that manages the presentation and the model let's take a deeper look at how the mvc patterns work in asp.net for example so let's imagine the following scenario you opened your browser and typed a website address if the website you requested this build using asp.net mvc this is what's going to happen your request will be sent to a controller for example the home controller depending on the logic the controller might grab some data from the database and use it as a model the model will represent the data that the user is interested in it could be combinations of different tables from our database after that the model will be passed to a view the view is what the user will interact with so the user interface and the view is going to use the data which is the model that was passed to it which is going to be the response that the user will get in return so additionally the user might click on a button on the view for example which will send another request to another controller and the cycle will repeat so we're going to build a little application where we use those three components and then this will be a lot clearer and will make a lot more sense so see you in the next video all right so let's get started by building our first asp.net core web app therefore you can just enter asp and you will find asp.net core web app has an option here and then we also have the one where it says model view controller and that is the one that i want to use i don't want to use that one here and not the empty one i want to use the one which has models views and controllers in it already which makes our life a lot easier so you see this is razor pages we're going to see that later on but we're specifically looking at the mvc aspect of it and specifically the mvc template so here you could call it first mvc app for example that would be a fine name and i'm going to select that one so regarding the version please make sure to use dotnet 6.0 which is a long term supported you can see you can also use 5.0 or even 3.1.9 core 301 was the first bigger core version which then included everything else and then they renamed it to just.net they didn't call it core anymore and you see the versioning is all over the place but now we're at 6.0 which is long term supported and that's great so then you can leave everything else as is and click on create so as you see here i'm using visual assist that's an extension that i can highly recommend a plugin i'm going to close that but what's really interesting for now is going to be that we have now our asp.net core application and if you look at the solution explorer you will find that there are a bunch of different files here we're going to go over them later on but for now let's just run our application and see what it's going to do for us so here the ssl certificate is being asked for and i would like to trust this so i'm going to install this certificate so that i can actually run the application and what will happen is my preferred browser will open up or does open up as you see here and we have our application with the same name that we gave it when setting up the app and it's called first mvc app and you see it has some code in it already from here so with all of the solution explorer files that we have here so we have controllers views and models and those basically generate what you can see here where we have our home page which is this one it's under localhost and then we have the privacy page and in my case well i stopped running the application this is a little bug that i have once i move the application over to a different page let me show you and once if i full screen it or make it full screen then the application stops running so while i'm not opening this window in full screen you see it's still running let's see if it's yeah there it is once i do run it in full screen well now it works but if you run into this arrow this could be the solution for it okay so if you run into the error that your browser doesn't open up the application properly so that's the starting point now you know how to set up an mvc application let's look at how to create our own um v ncs in the next couple of videos welcome back in this video we're going to look at the home controller and create our own controller so first of all let's look at this class that we have here so it's the home controller which is of type controller so in head it inherits from the controller class and it has an i logger which logs and it's a read only variable then we have the controller constructor which initializes the logger so then what's interesting is that we have actions and those actions are what we have seen on our page as buttons that we can click on which lead us to views which lead us to pages so we have this home action which sends us to the home page and we have the privacy action which sends us to the privacy page slash privacy view so it returns a view in both cases so one is called an index and the other one privacy and these functions return an i action result which defines a contract that represents the result of an action method so it just returns a view and you will find that under home there are two views so the index c as html which is the c sharp html file and the privacy cs html which are linked directly to these two functions or methods and then we have the error action result which returns an error view model so here you see there's a little more going on basically just takes care of what should happen if we run into an arrow which shows our not found page or something like that so if we want to know more about what is being displayed we can just open up for example the index.html and here we can find our div which just says that there is an h1 which displays hello and then a paragraph which says learn more with the asp.net core link so if we open up our application that's exactly what we see here so welcome which is this header one and then the paragraph okay so that was just very quickly to see the connection between what's going on but now let's actually create our own controller because that's what i said we would do right so let's create a hello world controller right click onto your controllers and then add a new controller so here you can see it allows us to directly add a new controller i'm going to select the empty controller they could be read write actions for example if you wanted to use them or the entity framework which we're going to use later on but we're going to use the empty mvc controller for now so let's select that let's give it a name and i'm going to call this one hello world controller so hello world controller dot cs what's important is that you use the controller keyword here for your controller classes this is just a convention and you should definitely use it this way so nvc controller empty let's select that and there we have our own controller that we just created with an index which returns a view for now you can see that we don't have a view so here we don't have something called hello world under views we could of course create a new view here and call it hello world and then we could put the html index page c-sharp html page in there and design it as we want but we can also just go ahead and return html code here directly and i'm just going to even simplify it i'm just going to return a string so this is the index page for example all right super simple i'm just going to do like this obviously this is not an i action result which we need to return so instead i'm just going to return a string here and suddenly our code is fine so now let's add another method or action that will return a different string we will call this action hello so public string and this one will be hello and return who's there okay so that's what this action should return and by the way this should just be a string not a capital string so now if we run our application let's see what we're gonna get huh what's up there we still get the same page it still says welcome and learn about building apps and so forth well that's because we never said that we should jump to our hello world controller as default so let's go over to our program dot cs file and here at the very bottom you will find the pattern where the controller is set to home so controller home and we want to use the hello world controller instead we can also define an action so you see you see it has uses the controller home with the action of index so if you go to the home controller you will find the action index and the home controller is the one that is set by default here so if we want to replace this what we need to do is we need to either specifically say which controller we want to use or what we could do is we could also just use a different link so let's run our app again and this time let's go over to our hello world controller and we can see this is the index page so now we have created our own controller and we can directly go over to this page as you can see there's nothing really happening here it's actually rather boring this is just a string that is being displayed so now that's how we got to the index action how do we get to the hello action because you see by default it just jumps to the index action we didn't specify that we want to go to index it just happened now if you want to go to hello you will need to go to hello world slash hello so here let's enter hello world and then slash hello and this will none send us to our hello page so to speak or hello action so it just shows this who's their page which is obviously just a string and super boring but we're going to see how to add views and modify this in the next video so see you there all right now that we know how to create a controller let's actually create a view and return it instead of just this stupid string that we have here all right so let's go over to our views folder here and inside of it let's add another folder because i want to follow the same structure here we have home and now we have hello world okay so the home folder was there before by default and now we're going to do the same thing with the hello world folder because that's how we called our controller right we called it hello world controller so inside of use we're going to use the exact same name without the controller keyword assigned to it and now we just need to create views which have the same name as our actions in here so for example the index i can go ahead and now create a new view here which will be at the very top when you add a new view and i'm going to use an empty razer view so let me select that and call it index cshtml cshtml stands for c-sharp html which is just a razer page okay so if you hear the razer keyboard that's what it means so let's go ahead and add that and you can see we have this add sign here at the very top which just says for more information on enabling mvc for empty projects visits and then there's the link that we can use so this is the c sharp code part so to speak so we can now use the sharp code as well as html code inside of this razor page inside of this cshtml file so here you find it on the right hand side we have this index and we can go ahead and well display something so for example we could display a paragraph saying this is the index page of the hello world controller okay so that's great and let's add an h1 here while we're at it and let's say hello world bro all right and now let's save this file let's go over to our hello world controller and now make sure that we actually return an i action result and a view here so what this will do is it will just use the view that has the same name as this method inside of the folder that has the same name as the controller without the controller keyword so in this case it's going to open up our index cs html file when we go to our hello world controller so let's run this application and go over to the hello world page once again so here hello world and there we are hello world bro which is the headline with header 1 and this is the index page of the hello world controller so that's how we can create a view very easily and quickly and now let's say we wanted to show the hello world controller as the default controller so here we can just go ahead and say hello world should be run as default if we don't want to jump over to hello world each time we can see hello world bro is now the default start page so to speak so if we go to home it still works but now it has to specifically go to the home page if we just go to the base url we will find that we go over to our hello world bro html page that we have built okay so that's it for this part that's how simple it is now you could hammer away and create your very own view you can see this is a very simple html code that i'm using if you are not aware of what html is it stands for hyper text markup language which is the most basic building block of the web so it defines the meaning and structure of the web content and it basically works like that you have an opening tag then the content of whatever you want to do and then the closing tag which closes the same way but you have the slash added to it so this is a header one there are also header two header three and so forth each time gets smaller and smaller all the way to header six which is the smallest version and then we're using a p which stands for paragraph so this is just a paragraph that we have built okay so that's it for this video in the next one we're going to look at well first of all you're going to get a little challenge but then we're going to look at the model class as well and create our own one welcome back in this lecture we will learn how to add a model that our view can use to display different information based on some logic so so far we have seen how to use a view and how to use a controller but now let's use the models as well and you can see we're not just using models we're using view models we're going to see the difference later on because what a viewmodel does is it's not actually representing our database it's only a class made to be passed to a view so a viewmodel can contain only the data a view is going to display we are only touching on the basics in this chapter and we will cover everything in my new details in future sections anyways now let's add the model to our models folder so here right click in there and click on add and then here add a new class so this class i'm going to call dog view model like so so this class will have two properties so prop tab and this one will be name and this will be of type string so string name and then another property so you can just enter prop double tab and the other one will be h so our dog will have a name and an h okay now in order to use this view model inside of my view i need to pass it via the controller so the model will not directly talk to the view it needs to do it by the controllers so let's jump over to our hello world controller and set up our dog so here dog and let me see we call it dog view model let's create an object from it and in order to access it we need to make sure that we have first mvc.models in here as well so now dog view model and i'm going to call it doggo will be a new dog view model object and this object i'm going to pass some details to it so for example the name should be sif and the age should be two okay so let me pass those details to my dog view model directly and now we can pass the doggo to our view so we have our viewmodel we have our controller prepared and we are passing the dog view model to our view now the view itself doesn't know about this so we need to go over to our view and let it know that it should use this model and that it should display the model somehow okay so what i'm going to do now is i'm going to write c sharp code inside of my razer file so in order to do that we need to add an add sign this is to tell the compiler that we are writing c sharp and not html code here so i'm using the model keyword here and now i can say which model i want to use and this one will be let me see if it offers it directly no first mvc app dot models dot dog view model okay i want to use my dog view model that i just created earlier on inside of my application so the add model statement at the top of the view file specifies that the type of object that the view expects in our case is the dog view model now to access the data that was sent to this view we will use the model property the model property is an object of the same type we specified at the top of the page so in this case the dog view model and remember it's a c-sharp property so it will be at model dot name for example so let's display the name of our dog object and it's h so i'm going to just put it in here in header 4 values so here a dog named at model dot name says hello now let's see how old the dog is h4 at model dot name is add model dot age years old okay so this now allows us to directly access our dog's age and name so now let's run our application and see how this is going to look like a dog named sif says hello well what did i write there name at named says hello i think this should be better english name is okay let's see sif is two years old that's fine a dog named sev says hello all right so that's pretty much it so now we pass data from our controller of the model that we created to our view and displayed it inside of the view now this is a very simple example but you can now use the same principles to make a far more complicated application don't forget to check out our asp.net 6 full course in over 13 hours of content including quizzes and challenges you will build real world projects including handouts and support we will also dive deep into topics like mvc pattern blazer server restful api development authorization and authentication and entity framework you will become a true asp.net rockstar so wait no longer and enroll right now you can find the link in the description below so let's extend our current application a little bit press ctrl f5 to start the application and let's take a look at what we have right now we have our hello world controller right here which is called from or program.cs is the starting page but as soon as we navigate to another page like home or privacy we are not able to get back right in real world applications you often need to modify the navigation so let's go ahead and remove home and privacy and let's just simply add a new site to the navigation here which says doc go to the project and then open up views shared and then layout now let's scroll a little bit down and let me zoom a little bit out right now and as you can see we have two list elements here right li this is for list item ul this is for unordered list so we have an html tag unordered list which is actually the list that you can see in the nav bar like home and privacy and then we have the list items which contain the typical a tag which is nothing else than a simple link right so as you can see we have them right here let's remove one of them let's get rid of the privacy one let's keep the home one and now call it dog right so we just rename it pretty easy dock right and then we have the hp controller here and let's take a look at our program.cs real quick because we already changed something here in our map map controller route right we changed the controller here to our custom hello world controller this is the page that gets called when we start the application right hello world index action so let's just copy the hello world here go to the layout and as a controller no longer take the home controller which gets created in the template by default we take the hello world controller or custom one right and that one will lead us to hello world index dock that's amazing also please notice that you are able to click on the icon on the top left corner let's click on first mvc app and as you can see we get directed to the slash home index page right so we can see that we also in the nav bar right here we have the a we have the a tag right here which is enough by brand class so this is just some styling and as you can see we also have here the asp controller home let's change that to hello world asp action index is still fine we can give it some other name here like dog app ah there we go dark app right i just want to show you some nice and sweet stuff that you can use to modify and customize your own application great so let's take a look what we have now press ctrl f5 in order that you don't have hot reload activated to build the application and host it again now let's see what we have top left corner we have dock app let's click on that oh as you can see we get to hello world bro right so this seems to be working and let's just visit our page again as you can see we still get navigated to our hello world controller and when we click on doc or docs or whatever we come to that custom page so now this looks good for sure you could also include an icon instead of a text here do not call it doc app maybe we have a nice dog icon right and now we can even go ahead and extend it a little bit more so that we have another page one page is listing or docs and another page is for creating a new doc for example because right now we cannot create anything we just have that in our code hard coded right so we should add another way not only reading data and displaying them in the front end like here right this one gets created in the back end this and displayed in the front and we also need that the other way around so that we can enter in html form and then we submit it and in the back end we receive the information of the form so that we can create a custom doc let's go ahead and extend that a little bit so now go ahead and call this doc list that's easy to understand so the a tag is dog list in the nav bar and then we add another one another list item go ahead copy that one we will add this to the hello world controller too to keep it simple for now because this is just our first starting application right that's just really to get you hooked and to get you started so asp controller says hello world asp action let's call it create asph and create we don't have that right now don't get me wrong but we will create this in a minute now let's call this create or create new or create doc or whatever you want to call it okay let's save this so press ctrl f5 right now and when we visit our application and we click on the dock create here then it will not work because when i go to create it wants to redirect me to hello world slash create right so please notice that road hello world is the controller create is the view but right now the only thing that we have let's check that here we have the hello world controller which is here the world controller and here we only have the index action and we also when we check the views folder we only have the index view so we need to extend the current system so that we also have a create view and a create i action let's go ahead public i action result call it create please name it exactly the way that your view file will be named so we will call it create so this is where the method is also called create we can also open just a different view by sending in a different file name but to keep it easy right now we just call it the same name as the view file let's return something because we need to let's return view and since we not provide any data or something else or custom view name the only thing that will happen here is he will check all right do i have a view in the hello world controller uh in in the hello world folder sorry here hello world folder which has the same name as the method of the i action result which is create and now right now we don't have a create view so let's real quick create one move to view hello world folder and now let's create a view right click add view call it create razor view add and then we call it create dot cs html or simply create he will extend the file ending automatically great now we have that also included so let's get rid of the standard template right here and let's just simply add in a h1 tag and this is simply create just for checking if everything is working right ctrl f5 in order to start the application let's take a look if our navigation is now working so we have a doc list right that's working let's click create and now you can see our header here right so now hopefully you have understand the matching how the routing is working in the mvc pattern so what is happening in detail it's pretty easy we have that create method here and he will check because we don't say something else we could also say create doc right and then he will check for cshtml file with exactly this name but since we don't provide anything he will check which controller am i currently in hello world and what's the method name create so he will move to the views folder check for the controller name hello world and check for the method name create and he will display that content amazing now let's move on to the exciting part where we will create a form in order to create a brand new doc and send form data from the view to the controller so if we want to send some form data to create a new doc we for sure need a form which we can fill out right so let's real quick do this html stuff at the beginning for the current styling we use bootstrap in the bootstrap we have a grid so we have columns and rows typically you start with a row so let's go ahead let's create a div give it a specific styling class which is row create another div inside that row and give it a class and the class name is call and then minus 6 so 12 is the entire width and you have 6 as the half of the entire width so 50 right and then you can do 3 for like 25 percent absolutely no problem okay let's go ahead and write that down and inside of that column we can now create a form let's go ahead and create a form later on we need to add some more information to that form but for now it's fine if we simply add another div and inside of that div now let's create a label first of all and that label is simply for the dog name give it a class equals to form minus label oh sorry there we go for minus label and right now the text could be dog name for example and this is only the label so only the text we should also create a new input with the type set to text and now let's duplicate that entire div and there we go so div one div two let me just space that a little bit up so that you can see it a little bit better dog h we could for sure simply remove the dog but let's find doc name dog h and let's set the input type to number awesome let's save this and let's take a look press ctrl f5 and let's visit our create page and as you can see we now have our form right here let's give it some nice styling right so we have that nice looking label but the form field does not re or the input field does not really look nice and it's a little bit well we can stretch a little a little bit more let's go ahead and for the inputs let's add another class and the class is form minus control we do the same thing for the dog name input class for minus control now let's take a look again as you can see it's now split it up in a nice way a little bit better and now i want to show you something in addition we can also set a card around this this is a nice bootstrap element so let's go ahead and build it real quick so just let me get that out of the keyboard it's a diff and inside of that div we have three other divs all right that's important you will need that very very often in web development if you continue with bootstrap so let's go ahead you have one div and inside that div we have three other diffs the top level div will get the class equals to cart now the diff beyond or the next child div we'll get card minus header the next one will get the class set to card's body and the next one will get the class set to class equals to card minus footer so make sure that you have it exactly in the same way as i have don't add classes to the end tag for sure only in the starting tag so we have one div class card and then we have three other divs header body footer right so now let's take our form we can simply copy the entire form also for sure no problem and let's add it into the card body let's save this if the formatting does not really work press ctrl k and d and then the formatting will get adjusted that's looking nice now we can give some header elements here so inside the div from the card header let's create an h5 for example call it create a new dock and the card footer we can leave that empty that's fine for now so let's take a look controller 5 start the application and move to the create page all right as you can see we now have a nice card element right so that's looking already pretty nice we can add a separator right here at create so that we have some free space this one is our empty footer we could also include some information here but that's fine for now one more thing to go here we have or create now let's add an hr which is just a header or it's a spacing it's a very thin line let's take a look yeah now you can see that spacing here right you now have that thin line which looks pretty nice okay so this is very important because during your web development career you will really have to create a lot of forms and bootstrap is very often used so now you know how to create a nice looking form instead of just some ugly fields lying around there in your page okay cool so now when we enter something we cannot submit it because we don't have a submit button and even if we would have a submit button or form is not so configured that it would send some data to our backend or to our controller so for now let's style it a little bit more we just need to add another button let's go ahead in our form and here where we have the dark age let's create a new div the third one and inside that div let's add a button button let's call it save and let's give it some classes to style it class equals to btn for button and then for color btn minus primary to make it look blue all right take a look again and as you can see we have that nice save button right now but we need to add some space so for every div that we have inside of a form let's add a new class called mb margin bottom three so add some additional space from the bottom of the element you will see that just in a second so that every element has a little bit of spacing in between now you can see when we take a look oh yeah that's that's nicely now we have some space that's easy to read and we can clearly see our button not being attached directly to the input field right so that's fine let's say this is enough for now because that already looks better than it did in the beginning now let's really take a look on how we can send data from here to our controller because when i enter something inside bruno hs5 and i click save nothing will happen we just reload the page alright so a great starting point let's take a look on form submission now before we configure our form right here so that we say it will send the data to a specific endpoint in our controller let's first of all build the endpoint in the controller so go ahead into the hello world controller which is right here and now don't get confused this public eye action result returns the view so inside of that view we have that form now we are in view right we write some information into the form and we click on submit and then we will have to call another action here let's give it a good name public i action result create doc there we go and now we will use data binding to say the information from the form which is like age and name that will automatically get created a dog view model let's call it dog view model that's fine in the first scenario we really want to check only if we get into that method so simply at a breakpoint in line 22 for me so this breakpoint will get activated as soon as we click on submit in the form now this is now read underlined because we don't return the next step we need to do something we can pretty simply say return view and please go to our index page so let's say index okay so just again we get to the create page that one will get called here because we click in the navigation bar on create we return the view inside of that view there is the form now we fill out the form and click on submit and we will get to create doc we will then check if we have the doc view model data which we entered in the form and then we will automatically without doing anything else get redirected to the index page which is then again the listing of all the docs that we have currently saved right or that we have currently created let's save this for now this is the create dock let's just keep the name and let's move on to the create part here when we click on the navigation bar then we get and click on create then we get to our create cs html page right there where we have the form but we need to tell the create page what model is currently used in that page because when we enter that create page and fill out the form we want to create a new doc so this is why we create a new doc vm dog view model equates to new dog view model sorry dog view model there we go because we want to add a new dog so we don't fill out any information we simply give a new clean dock view model into that create page and then we can use that clean view model to fill it out by the form and then send it back into the create dock right here now don't forget to take the dog view model here and put it inside the view now this step is very important this is data binding let's go into our view right so right before we open up or create page we create a new dock view model send it in now let's go to a create page and let's add the model right here so that we can make use of it in our view add model at model is dog view model this is very important right you don't have to give it a name just call the class this has to be matched with the same thing that you just paste here dog vm is type of dog view model so in the create html or cshtml we have to use the model dog view model now we can make use of it if it's empty or not doesn't really matter now you can use the model this is simple data binding paste it from the controller into the view and from the view into the controller this is how it's working right now we can make use of the model i show you how in a second first of all let's create or form to send the information to the correct endpoint let's go ahead configure it asp minus controller equals to hello world because our controller which has the endpoint which is here create dock right that's what we want to call this is inside the hello world controller so let's write down asp controller hello world now we have to define the action asp action so let's take a look what's the name of the action the action is create dock let's copy that paste it inside create dock now when we create elements on the server this is typically a method called post so let's create a method of type post you can get data and you can post data getting data is for reading posting data is for creating great okay so now the form is configured let's give the button a specific type and the type is submit a button of type submit submits a form now one thing that we need to adjust is we need to say that the input text here that this one is bound to the doc name in the viewmodel and that this here is bound to the dark viewmodel h field right so let's take a look really quick into models dog view model so we have name and h we need to really combine them so that this input field or those input fields are really matching exactly those two elements and now we can do that by using the doc view model by using a simple keyword in our input here let's say asp minus four this is really really important now we can bind that right that's this data binding again and we bind it to as you can see name all right why can we do that because we have the dog view model right here if we don't have it we cannot make use of it let me just remove it real quick you will see this is underlined all right so let's do this real quick with the h again asp minus four so this input field is for the h okay just read it as it is this input field is for the name asp for the name and this input field is 4h we just need to add that asp because this is how it gets spelled great this is really really nice now let's go ahead take a look at our hello world controller we have that breakpoint so don't press ctrl f5 simply really start the debugger using f10 or simply click the green button what we want to see we want to see that breakpoint firing in the moment we submit the form now let's click on save and see if it works and as you can see yeah we just got into that breakpoint let's take a look at doc view model and you can see bruno and h5 so we have all information sent from a view into our controller and this is a very important way of sending information in an mvc pattern right so you give that data into a view and inside of that view you can take the data for example create something new and send it back to the controller so this i action result method here this one is displaying the form and this one here gets called when we submit the form because we simply bound it right inside of that form tag we say hey please send the data to create doc and the object relational mapper the orm will automatically bind this into a dog view model c sharp class that's extremely powerful okay so that's pretty nice at the current point we don't do anything with the dog view model but we already received it so we have our information over a new dog here so now we need to take a look on how we can save it we don't have a database right now that's totally fine later on in other projects we for sure will use databases but for now we can really keep it easy but let's just take a look on how we can save or dock which we have just created so that we can really see the results of our final first application so i just removed the breakpoint and started the application using hot reload and if we are here in our form and i click on save you will run into an issue where it says hey in the index sees html i cannot see or reference at model name that's pretty easy to fix and i really want to point out what exactly here is happening right so let's go into our project as you can see when we in the index page which is here we are loading a dog view model into the view this is why it's working when we're just visiting the start page because our index view is referencing right here or model so if the model here is null we will for sure get an arrow so we have multiple ways to fix this we could simply say hey if the model a null then we can do something else etc but that's not the point we want to do i want to show you something else instead which is pretty handy and saves you some time depending really on what you want to build the issue is coming because we send a submit the form we say bruno is five five years old for example and then we return the view index sees html right and this one will just open up the indexes html and the model will be null so we get the error right here because we don't have a model we don't have a have a doc to show because we don't submit any doc right here let's instead of returning the view let's use a very common way to solve this let's redirect the user let me just comment that out i don't want to remove it right now because i really want to let you see the difference so this is what we did before and now instead of returning the view we redirect to an action redirect to an action for example name of index so this is working now what does that mean so instead of returning the direct cshgml page or we view which will throw an error because we don't have a dock we simply redirect to this method here which will then create the doggo civ h2 and return the view index with the doggo right so this is what it's doing this one returns the cshtml and this one redirects to this action which then calls this syntax or this code here later in this lesson we will adjust that code but for now that's a fix right so let's go ahead let's try it out press ctrl f5 let's try to submit a form again and you will see we will then get back to the index page seeing sif h2 for sure our currently saved doc which we entered into the form will still not be visible but that's next up let's go ahead and click on create enter is some dog name and an age and let's click on save now you can see hey we get back to our page which is working so we get redirected to the index page and again we are seeing the model that just got created in the index page so what we now need to do instead of here always creating a new dog view model we should have a small list or something like this just during runtime where we save or docs to and then reload from there right because right now we don't have a database but however we need to save our elements at least doing runtime of the current application or during the session let's go ahead and do that real quick so don't care about this too much because later on we will use a database but just for you to show what we can really build with or to views like our index view or create view go ahead private list of type dog view model dogs equals to new list there we go now we have an empty list and instead of here loading the index page and create a new doc view model we can simply return that list but now pay attention we return that list but before this was a single dog so one but now we have many so let's go ahead into our index here's html and change the model here from a dog view model to a list very very important because now we have a list and that changes everything as you can see this is now underlined but we can write a loop right so we do this for for many elements for example instead of saying hello and years old let's create a very very simple list now right at for each var doc in model right and model is our list so this is why we can use for each loop here and now let's just remove this and now we can make use of a list so let's simply create a ul it's an unordered list let's copy that for each inside and inside of that for each we will now loop through the model and create list elements for each dock so let's create an li list element on this item and let's simply say add dark dot name and then we add some braces add dog dot h there we go go back to our hello world controller and when we create the dock here this is our dog view model we simply add it to the list right so docs dot add dog view model so this is really simple we just have a short list then start our application and check if everything is working as you can see we don't have anything right now that's totally fine we don't have a list because we have not created any dock let's click on create so let's create our first dock and you will notice that when we click on save we will still not see the element but why is this let's go to our application this is really easy to adjust now this is how it works by design this is not a static variable so for every session this variable will get instance as a new element and a new element here is new list with zero elements so the moment we call create dock and add that dock that's fine and afterwards we get redirected to the index page and docs will be null again so let's make that static to avoid it so that the new list here the docs list is a little bit more persistent and doesn't need an instance of the controller because this is how static works great now controller 5 and everything should work now as soon as we start the application the list however will always be null because we don't save it persistently so every time you shut down the application and start it again for sure the list will be null so this is why i said later on we will add database but for now this is just a so-called in-memory database however just an abstract version of it it's just saving elements during the runtime right let's go and hit create enter a dock let's click on save and now you can see bruno five years old right let's create a new dock let's call it malika two years old let's click on save and as you can see bruno malika too right so now this is working when we restart the application this will be done but now you should have learned a very very important principle of asp.net core mvc which is actually loading data so sending data into a view and creating data from a view into the controller so due to a form for example right you fill out a form you send the data to controller and then you can save the data to a database or as now we just added it to a static list so by now you should have a brief understanding of how asp.net core is working in terms of the mvc pattern amazing so let's move on to the next part of this course welcome to the razer pages chapter in this chapter we're going to focus on the user interface and therefore we're going to build a pizza delivery application in razor pages and once we're done with the user interface yannick is going to take over in order to save our pits or orders we will add the basics of entity framework call to our brand new razer pages application so let's get started so what are razer pages well simply put razer pages is a simplified and easier to use page based web application programming model that focuses on using a file based routing approach eliminating much of the workload that asp.net mvc introduced this also keeps ui and business logic separated but still within the same page razer pages is the recommended way to create new page based r form based apps for developers new to asp.net core razer pages provides a more accessible starting point than asp.net core mvc it benefits in addition to the server rendering benefits of quickly building and updating the ui the code for the page is kept with the page while keeping ui and business logic concerns separate it's testable and scalable to large apps you keep asp.net core pages organized in a more straightforward way than in asp.net mvc view specific logic and view models can be kept together in their namespace and directory and groups of related pages can be kept in their namespace the end directory so each razer pages record found under the pages index equates to an endpoint razer pages have a related c-sharp document called the page model which holds each page's behavior additionally each page works on the limited semantics of html just supporting get and post methods so rager pages makes use of the popular c sharp programming language for server-side programming and the easy-to-learn razer templating syntax for embedding c-sharp in html markup to generate content for browsers dynamically and cross-platform server-side html generation so how are we going to use this for our understanding of this chapter by building a pizzeria website in the next video let's get a quick overview of what we're going to build in this chapter alright so what are we going to build with razer pages well the project is going to consist of a simple pitot shop website entirely handled by razer just as a disclaimer in this example we're not going to be working with actual databases since this is not within the scope of this chapter but we're going to work with a simplified fake version of a database from which we can use the logic to easily implement one further on so as a quick overview what's the website going to teach us well starting with the basic razer pages syntax and page layout we're going to be building our page from the ground up using their initial template and file structuring to get ourselves a simple page working learning how a razer project is layered and where we can find all the parts of our future pizza shop after that we're going to get our sewing page done with a simple logic to get all of our pizzas displayed as well as make your own option with its own form this will need a pizza model as well as an initial fake database to populate our pre-made list of pizzas then we're going to learn how to bind and send data from a post in the case of our make your own option and from a simple link using asp root and how to use and calculate our final order to then finish it off on the thank you page so that'll include everything from simple project file structures all the way to i action results and routing so let's start with the setup alright so let's get started setting up our project therefore in visual studio in my case 2022 i'm going to create a new project and here i'm going to use asp.net core web app which is the one with the example asp.net razer pages content so make sure to use that double click or click next and then give it a name i'm going to call this one razer pizzeria then click next and here i'm going to use dotnet 6 for long term support and then just click on create once the project is loaded you will see the screen here with the overview where we can look at the sp.net core documentation the net applications architecture and so forth but what i want to do straight away is to test my application so i'm going to click on run here at the top running our razer pizzeria application this will open up a tab in your browser actually a new window in your browser and you can directly see we have our razer pizzeria in my case the port for the localhost is 72 57 in your case it will be a different number and here you can directly see the website that was automatically generated for us so this is the home page then the privacy page even though there's one thing to consider so in my case you can see the site can't be reached that is because when i go on full screen mode and drag this window from one screen to another because i'm using two screens i run into this problem as you see here okay so i need to run the application again if i keep it in windowed mode then it's fine as soon as i go into full screen it can lead to my application being closed okay so that's something you need to be aware of but now you see it works flawlessly and yeah you can open up here the documentation with this beautiful little link and you can go to your homepage to the privacy page well these are all the pages that we have at this point potentially you could get this kind of warning which is a security warning you are about to install a certificate from a certification authority claiming to represent localhost and so forth so you can then click on ok don't worry about it and this will then allow you to run your application inside of your browser and yeah that's the starting point now we have our project now it's time to make changes to it so we're going to do that step by step in the next couple of lectures so see you there when creating our project you can see that it is very similar to what we have seen in the mbc example it is different however because we don't have the viewmodel as well as controllers we do have the pages however as you can see so for example our error page the index page and the privacy pages each of them are c-sharp html files so these are our razer files and we can go ahead and make changes to them very easily so if we go over to our index file for example you can see that this is the content of it so we have the view data which sets the title to home page and then we display this html code here which contains a container with diff and then we have the header which says welcome which follows a certain class which is inside of css so defined inside of css how this welcome is going to be displayed and then we have a paragraph which says learn about with a link to the documentation for asp.net core so that's what this a and hrev does for us so building web apps with asp.net core closing it with the a tag as well as the closing p tag so these razor pages that we have here are being used alongside supporting files which are shown as file names with an underscore such as view imports and view start cs html but not only that also inside of the shared folder we have the layout and validation scripts partial c sharp html files the layout cshtml file is there to contain the content that repeats on each page on the website like the main menu the footer or other elements for both to work together the razer page is injected into the underscore layout file through a c-sharp render body line which you will find here a little further down where we have the class container with the main content using the add render body so this is where then will render the body depending on which page we're at so for example the index page or the privacy page and then we have the footer underneath so you see the header takes all of this space here then we have the actual content of the page as well as the footer then we also have the www root folder which contains our css so the code that defines how certain parts of the website are going to be treated so how certain classes for example are defined so here we say we have the general font size of 14 pixels but then inside of the add media class we are using a font size size of 16 when there's a minimum width of 768 pixels and so forth so this root folder helps us to add all the additional files that are going to be located in here okay so for example that's where we would put in our images and our static html files like javascript files and css files so this gis stands for javascript so here is defined in javascript what we would do in the website so what should happen on the client side for example if you want to overwrite that in javascript which we're not going to do so as i said inside of www root that's where you would add a folder which you're going to use for images so let me just set that up and also drag the images in there that i want to use you will find these files assigned to the lecture and you can download them from there and then once you have extracted them you can just drag them into your images folder like so and there you are we have our pizzas as well as the pizza time jpg all right now let's go ahead and use one of those images and i'm going to use it inside of my index file so here you can see inside of the index file we had our paragraph and now i'm just going to add an image in here which will use the class of main image and we'll have the source of a tilde so here you use the tilde operator in order to access the www root folder in which you then find the images as well as the pizza time jpeg file and you need to close the image tag here if you now run the application you will find that the pizza time image is being displayed just underneath the learn about paragraph here all right and then what else do we have here well we have the app settings.json file which contains the configuration data like connection strings for your database for example but we're not going to use it at least in this chapter and then we have our program cs file which is used to for example add services to the container or configure the http request pipeline so that's a little overview of the files that we have in here and in the next video we are going to lay out the pages all right so what will the project look like what will we build in the next project well the project we're going to build is going to be divided into the following pages starting at the home page we will have a link either in the body or navigation bar to the pizza sales page from there you can either select the pizza and directly move to the checkout page or select the custom pizza option which will redirect you to a pizza form on the checkout page the final price is calculated with the pizza name and a final confirm order button will send you to the thank you page so this means we will be needing a pizza sales page a custom pizza form page a checkout page and a thank you page so let's go ahead and set them up one by one all right so let's get started and the first thing that i'm going to set up is a new folder here for my page that i'm going to call forms and then one for checkout okay so let's add another one here new folder check out like so and then let's set up a new pizza sales page so here inside of pages add new razor page an empty one is what i'm going to select here and i'm going to call it pizza so now inside of the check out folder i'm going to add another razor page so here this one will be our checkout and then let's create another one in there and this one will be our thank you page so here thank you like so and then inside of our forms that's where i'm going to create another page which will take care of our custom pizza so let's add that page and call this one custom pizza like so now let's set up the pizza page to be accessible from the navigation bar so in the layout file which you can find under your shared folder there we have this list with navigation items so here you can see we have the navigation item called home and then the one for privacy so that's where i want to add one to my pizzas so here let's go ahead and actually add it in between and this one will be a nav item which will just go over to pizza to the page pizza which is this page here that we created and it's going to say pizzas like so okay so now what we can do is we can check whether our whole flow work so whether our page flow where we go from one page to another works i'm going to copy this pizzas a link here so this a class nav link and i'm going to go over to my pizza html file and i'm going to add that here so it should allow me to go to custom pizza which will be the name of the page that i'm going to use here and it's also going to be the asp page so custom pizzas where is that where is the custom pizza page do you recall well it's over here inside of forms right so we need to add that here we need to say inside of forms there is this custom pizza page that's where i would like it to jump now let's add another entry here and therefore i'm going to copy this line go to end and add another one and the second one should go to checkout so here check out and now how do we get to the checkout page well by going to checkout slash checkout because that's where our checkout page itself is so this cshtml page we just had this checkout folder where we would put everything that is related to checkout so now on our pizza page we should be able to jump to those two so the custom pizza and checkout now let's see inside of our custom pizza cs html how to jump to the checkout page from here so once we have created our custom pizza so let me copy this line here and put it in here so now we have this a again we are jumping to the asp page called checkout checkout and we call it checkout and then in the checkout page itself that's where i'm going to add a link to our thank you page so let me add that here but it's not going to be check out checkout but check out thank you and we can just say thank you here so thank you like so so the text here could be anything we want i'm just gonna call it thank you as our internal name is all right so now let's run our application and see if it's going to work properly for us so there we are we have our application let me downsize it a little so here we can go to pizzas and this is the pizzas page right because that's how we designed it we didn't add much to it but here we had two links one saying custom pizza the other one saying check out so let's go to custom pizza and custom pizza we had nothing but this link so that's what we have here and from there we can go over to check out and actually let me see check out only shows me checkout so what am i missing i go to check out thank you so it stays on custom pizza it doesn't go over to checkout so what is missing let's see so here well actually the code itself is fine it's just that for some reason on my page it didn't want to work but yeah now it seems to work i just rerun the application and now you see i can go from checkout to thank you and while on thank you i have nothing so for now there's nothing to show so that's pretty much it so we're on a thank you page now and we see our flow going from one page to the other works flawlessly so now let's go ahead and actually set up such a page alright so let's start with the home page since the home page will not have anything special to it we can use this opportunity to get some bootstrap basics in and just to be clear this chapter is only going to cover the very basics and the very basic understanding of styling we will go more in depth in a later chapter so this is how i envision the homepage to look like very simple right and well we only have what the asp template gave us so far so let's look at what we have as of now on our welcome page and there we just have this image right of our boy peter parker delivering pizza as spider-man that sounds pretty awesome so if we look at our welcome page which is here under index that's where i had this image which was my main image with the source images pizza time so it was inside of images here and then we had this pizza time jpg which we display here as the image underneath there so what i would like to change however is the overall appearance therefore we need to make a couple of changes we need to change the title we need to change a little subtitle here so this paragraph could be something different and then yeah we can just go from there so what i would start with is first of all this h1 so this title that we have inside of our class so here i'm going to say welcome to razer sharp pizzas because that's what our name will be so the company of our name and then underneath i'm not even going to put a paragraph i'm just directly going to use another header so these are the different header types that we have h1 h2 and so forth it goes all the way to h6 each of them being less relevant or important and smaller in terms of size so in terms of text size so here what i'm just going to do is i'm going to add a text here saying razor sharp pizzazz is the pizza for you and me okay so that will be the header text underneath our welcome to razor sharp pizzas header text you see there is this class called display 4 that is directly assigned to it now you can go over to your libraries here inside of www root bootstrap this and then there's the css folder which contains this bootstrap css file so this is where the styling happens where the css styling happens so if you search for display four you will find that these are the settings that bootstrap has set up for a display for class so whenever we use this class you can see that it's going to set the font size to be well the result of a calculation then the font weight to be 300 which just makes it thicker and then the line height to 1.2 which just makes sure that there is a certain distance between the content of the lines so that's what this setting here does for us and now we could of course overwrite that but it would be better for us to override it in our own css file which we have over here so site css so if we have anything that we want to design specifically for our page we could do that here but it's really recommended to use the bootstrap default as much as possible unless obviously you need to make some drastic changes and you're not happy with any of the classes that it offers you you so you see here there's display 4 display 5 and so forth different settings that will change the size of your image so here for example display 2 is going to do this but then for media if the min width is at least 1200 pixels then it's going to set the font size to be 4.5 ram so on top of that for our display 2 class okay so that's just a general idea of what's happening and we can use these classes as we do here we use the class display for we also use the class text center which who guessed it will center the text inside of this entire div so it's going to try to put everything inside of it into the center and then we have our image and then underneath the image i would like to have a line break so i'm going to achieve that by using the br tag and then i'm going to add a link here which will send me directly to the thank you page from here so we could of course type everything manually but i'm just going to get this one here copy it and then put it into my url here saying it's going to go over to check out and thank you for now we just want to have a link there we're going to change everything so that it's going to look a lot better later on but it should say something like get me that pizza or bring me that pizza maybe bring me that pizza okay okay now if we test this and we go to our home page which we will get to by default this is what we're getting right so welcome to razer sharp pizzas this is the header 2 and then we have this bring me that pizza which is a link but it's not styled at all and we have the image in between so if i click on this you see it sends me to thank you page so the url or the button so to speak works and then we have our beautiful image here but we can obviously design this better and for that we can use classes so as you've seen we use this class already called display4 and we can add other classes here as well so i can go ahead and capitalize this text by using the text capita lies class so you see now i'm using two classes one called display four then there is an empty space in between and then i use the second class which is called text capitalize and what i'm going to also make sure is the text is going to be very black okay so text black so what that will do is it will capitalize the letter so this t will be a capital t for example and the text will not be this dark super dark gray but it will be actual black so let's check it out and this is what we get so you can see here this t is now capitalized as well as well the rest was capitalized by our default with the text that i wrote but it's also darker right it's more black so to speak and this is just how you force that it's black so by default it might not be black but you're forcing it to be black even if you it wasn't by default so now let's make sure that the link that we have at the bottom this nav link is not going to be actually considered a link but more like a button so what we can do is we can make it the button and then i'm going to use empty one now if you're uncertain about any value that i'm using here you can just go here to mt1 what it does is it adds a margin towards the top of 0.25 rem okay now you might wonder what is this ram that we are using here well you can just search for ram bootstrap and then it will say rem stands for rootem it is a relative unit of css and translated by the browser to pixels which is the px value when rem is used on the font size in the root element it represents its initial value if we set the font size to 16 pixels of the root html element then the font size of the paragraph will be one rem so one rem stands for 16 pixels so to speak and in our case this will then be four pixels so to speak okay so now i'm saying i want to have this button which will be the button primary so we can again go to bootstrap and search for button primary and it will give it a certain background color as well as the border color now if you're wondering what this color is you can also just search for this color so just search for this rgb value and then it will show you that it's this blue value okay so basically we're saying go ahead and use this color for the background and for the border for our a tags that we're using so here we're using this a tag which uses now these classes and i'm going to make this a button as well so just btn not the button primary keyword so if we just search for btn we will find that it will get all of these properties so here this is the btn class it will have a font weight of 400 line height 1.5 a certain color text the line and so forth okay so you see that there is a certain color already defined and also a background color defined however we are overwriting it by using our button primary keyword as well so by the button primary color here and yeah that's pretty much how we can use all of these beautiful classes so you can see by just using the name and empty space then the second class and so forth so we saw how our application looked before now let's see how our get me that pizza is or bring me that pizza is going to look like and you see that it is this button here at the bottom which says bring me that pizza and it is blue and once we hover over it you see that the color is changing as well and this change comes again from bootstrap from this hover here which will then change the background color to this color here so the border color is this time a different one than the background color so you can again just go ahead and enter this color in here get some info and you see that it is now a slightly darker blue than the one we had before so here this is the one that we had before and this is the darker blue version okay so that's what's happening here now that's pretty much it for this page i'd say now you can obviously find these things out by using the bootstrap css file but what's even better is if you directly go to the bootstrap documentation and you can find it under getbootstrap.com docs 401 getting started introduction well that's where the documentation is and you can find all of the details of what's up here so you can also search for things like btn and then you will find the button tags and it says button button primary so these are the different buttons that we have so we can do it with it an a so with an anchor we can do it with a button with an input and so forth so these are just styles so to speak that allow an item to behave in a certain manner so if you wanted to use outline buttons you could use the button outline primary for example or secondary or success danger and so forth so these are just some examples of classes that you can use in suddenly your buttons behave very differently even though we are using anchors now let's say we want to style something individually so we want to set up our own style and as i told you then you would have to set it up in your site css file so here what i'm going to do is underneath this body i'm going to add another class that i'm going to call main text so this is my own css class now it's not the same as classes in programming languages but what it just does is it allows us to use the style that we're defining here for any given item inside of our html so what i'm going to do here is i'm just going to say i want to have a bit of padding of 75 pixels in one direction and 20 pixels in the other direction and then i need to add the semicolon so what that will do now is it will add 75 pixels of padding towards the top and the bottom and 20 pixels of padding towards the left and the right in case you were wondering what padding is this is the padding so let's say this is the text that we have welcome to razor sharp pizzas and then i want to have padding outside or for this div that the text is in then i would use the padding keyword to create this green area then the div border is this red border and the margin is this orange area that you have around it okay so if you want to adjust the margin that's what we would have to do so here instead of using the padding keyword you would use the margin keyword even though i don't want to do that so from now i'm just going to add this padding to my main text now the main text itself is now a class so in order to use this class i'm just going to go over here and i'm just going to make sure that my div here that i have which i want to contain my two header tags so i need to create a new div here with the class of main text like so and in there that's where i can now put everything that needs to be surrounded by this padding or it needs to have the internal padding so to speak so now the h1 and h2 will have a big padding now let's check it out real quick to see whether the changes were applied and you can see now we have a distance towards the top the bottom and well left and right even though we don't really see that because we have plenty of space in those two directions so that's what we just did we created our very first own css class and also used it to style our application now what if we want to achieve this result that you can see here where the image is rounded and then the subtitle that we have which is down here is also styled slightly differently well let's set it up manually therefore we will need to have some additional classes so let's create a new class here which i'm going to call main image and i'm going to add a border radius which creates this effect where we have a rounded image then i'm going to add a filter which allows me to use something called drop shadow which will drop a shadow where i can define in which directions i want to have a shadow so i'm going to have 10 pixels of a shadow towards the bottom right and then i'm going to set the rgba 0 comma 0 comma 0 comma 0.3 what that will do is it will make it slightly transparent so that's what i want to achieve for this now i just need to also close this bracket otherwise i will run into issues and close with a semicolon and then i'm gonna have a margin of 40 pixels as well which will create a border surrounding the image okay so if we now use this for our main image let's really quickly do that where our main image is gonna well it already has this classic so now let's run it and we will see that i get the shadow as well as rounded corners for my image and the margin as well now i'm going to just design real quickly my main subtitle and what i'm going to do here is i'm going to set the font weight to 400 and the letter spacing to 2 pixels and now let's use the main subtitle in our index page here for the header 2 where i'm going to set the main subtitle class so now we will have a very distinct spacing there we are so distinct spacing between the individual letters okay so that was it for this video we looked into bootstrap we looked into how to create our own styles in the site css how the bootstrap css looks like and how we can design our application using existing classes and also creating our own classes in css that we can then use in html to well style our website so see you in the next video where we're going to set up the sales page don't forget to check out our asp.net 6 full course in over 13 hours of content including quizzes and challenges you will build real world projects including handouts and support we will also dive deep into topics like mvc pattern blazer server restful api development authorization and authentication and entity framework you will become a true asp.net rockstar so wait no longer and enroll right now you can find the link in the description below alright so now that you have a certain idea of how css works and how you can style with bootstrap let's build this little page here now you can obviously try to build this yourself what you will need is to set up the background for a given div so you need to create your own div here and in that div you would then put in your image as well as this text and this button here underneath and obviously also the background and then here you need to set up three disks next to each other so this will maybe be a little more tricky but overall let's go ahead and build this you can obviously pause the video and try to build this yourself okay so let's go ahead so therefore let's first of all go over to our sales page which will be our pizza page so in here for now we only have those two links and we can actually get rid of them we're not going to need them for now even though we will need a link later on but we're going to build it once we need it so here i'm just going to get started with a div using the class text center so i want to make sure that the text is centered again and then inside of this div i'm going to have another class that i'm going to call main text so the one that we created ourselves in the last video and then i'm gonna have a header one which is gonna use the class of well actually the same things that we have used in our index html so let me just copy this here over to my pizza we don't need to write everything from scratch again we're not going to need this h2 we will need h4s however but yeah let me get rid of that as well so now we have our age one with the capitalized class and text black and the content that i want to have in there will be our great selection of pizzas and underneath i'm going to have some text so i'm going to use h4s here so let me put that in here choose one or try our pizza builder then order and done which will be an h4 tag so a very small header tag so to speak okay then another one which says no need to give any of your details and we already know everything so yeah pretty deep information here so then i'm going to add a very tiny little text so let me show you what i mean i will eat this only one pizza per order okay so if we want to achieve that we can use a paragraph here where we use italic text only one pizza per order so now let's style this p tag here with the class called small text and therefore we need to add an equal sign as well as the quotations surrounding the small text so the class that we are using so now the small text doesn't exist so we need to design our own class for this small text so let me just create that and i'm going to say that the text should align to the right as well as that the color should be gray that will already do the trick we don't need to do much more than that now if we check it out this is what we get our great selection of pizzas choose one and so forth and then here only one pizza per order on the right hand side okay all right so now the next thing that i want to have is going to be a container that will be still inside this div class tech center but this container will actually have the class name container so it should be treated like a container from bootstrap so if you look at bootstrap containers are the most basic layout element in bootstrap and are required when using our default grid system so i want to be able to use the grid system where we have items in a grid displayed in a grid and that's why i'm going to use it so let's go ahead and use the container class then i want to create a row in here so i'm going to use the row class so there's this class called row and then inside of this row i'm going to say that i want to use the 12 columns that are made available to my div so here this div is going to have the class of column 12 and mb 5 as well as mt five so now if you're wondering about any of those go over to bootstrap look at mb5 for example m stands for margin and b stands for bottom so mb will stand for margin bottom for example so i want to have a margin bottom five value where five well you can see that here four classes that set the margin or padding two spacer times three so quite a bit of margin and margin towards the top of five is also what i want so that's what i'm saying here basically for this div so now the idea is that we can create our own pizzas right we want to be able to click on it and create designs so to speak our own pizzas and therefore i'm going to make sure that my div here will only take a certain width so i'm gonna set w to 100 this would be a row this will be well i'm going to call this one make your own div okay we want to be able to create this so to speak and then inside of it i'm going to have another class or another div which will have the class of call four so this will take four columns so in total this thing will take all 12 columns right and now we want to create something which will take four columns so in bootstrap you have a total width of 12 columns so 12 elements that you can put next to each other and we're going to say we want to use 4 out of 12 so a third for this div class call 4 and for now i'm going to set an image here which will be of the well which will have the source and here we need to use the tilde sign it comes from images inside of images we have the pizzas folder and there we have the create png and i'm going to say that it should use the class w 400 100 as well so w minus 100 okay so this is going to be our image and then underneath this class which takes four columns i'm going to set another div which will have a class of the other eight columns so this should take the other two thirds of space so here class with the call of eight and i want to align items in the center so in here i'm going to say that the div class should be align middle and here i'm going to make i my own text so make your own this will be the text and now inside of this div i know this is a little tedious but no worries we're gonna get there in a bit it will be all making sense for now we just need to set stuff up so i'm going to align the text to the left so this is an example of how you can use and this should be text align how you can use css code inline so you don't need to create an extra class for this you can directly do it in line here so where i'm going to create your own pizza will be the text so this will be the header 3 which will say create your own pizza and it will be aligning towards the left and then i'm going to set up a paragraph which i'm also going to style manually so i'm going to say style takes the line to the left as well so this will align the text and the line content text minus align colon left and smi colon inside of the brackets so here make your own pizza with our pizza maker and then finally we need to have a link that we click on so here i'm going to use this link that i'm going to give the button class as well as the button primary directly gave me the button primary even though i just wanted to have the button there i'm going to style it so that it floats towards the left so here float towards the left and then we need to well if we look at our urls here asp area and asp page so what do we want to display in there and that was here so the asp area will be an empty point for now and the asp page will be our form and it will send the user to the custom pizza page so we have this custom pizza this one here that's what's going to send the user and it should say try now now you might wonder what is this make your own div and make your own text well it's two designs that we're going to create ourselves so two classes make your own div so we call one of them and what's really important is that the text is exactly the same so if we have any typo in there or whatever it will not work so how this was this one here make your own div and then let's style it so what i'm going to say is i want to set the background to be gray right as we have seen earlier in the image and i want to have no margin so i'm going to set the margin to be zero and then make your own text it's going to be another class make your own text which will have a margin of 100 pixels towards the top zero towards the right 20 towards the bottom and zero towards the left so you can see that here the ide helps you it says margin top right bottom left so in that order this will be the margin towards the top this one to the right to the bottom and to the left and then finally i'm going to set the text to be white okay so now if we run our application here and go over to pizzas that's what we're gonna get so our great selection of pizzas choose one or try our pizza builder so now we have our pizza image here this is the big div with the gray background we're creating our own pizza we are making our own pizza with our pizza maker by clicking on try now so this will send the user to the form which we don't have yet so that's the idea at least right so if we look at our pizza this is this class button primary which sends the user to the custom pizza cshtml form and actually it should be forms so that's probably why the link didn't work so that's something you can always check whether the link is correct let's see go over to pizzas try now and we're on the custom pizza form which for now is boringly empty because it just has this thank you or checkout button okay so that was pretty much our pizza for now now in the next video we're going to set up the form which will allow us to generate pizzas but therefore first of all we need to set up what a pizza even is and what it's made of so see you in the next video welcome back in the last video we set up our website where we now see the pizza and we want to be able to add pizzas right individual pizzas so in order to add pizzas we need to think about our data model that we want to use and when we're thinking about the data model then we're talking about models and in general we need to think about the architecture that we want to use so we are going to use the mvvm architecture for this project and in order to use it we need to understand what mbvm is and what it stands for and why even use it so we have the mvvm which stands for model view view model which is a software architectural pattern which helps us to separate the presentation of our website so that our ui so the view is separated from the development of our business logic or the back end logic so the model making our front end completely independent from any specific model platform so here for example the view will talk to the view model which then via data binding will send it back to our view which will basically display something and then we have our model which is the business logic and data and it gets information from the view model which is the presentation logic and the model then updates the view model accordingly so basically we're not directly talking between the view and the model we're always talking via the view model okay so in mvvm we got a model a view and the view model for now we worked only on views and view models for our next step what we'll need is the model itself from which we can get the necessary data to build our pizzas and calculate final prices as well as set up our fake database so let's go ahead and do that all right so now let's go ahead and set up a model therefore let's go ahead and create a new folder on the top level of our application here so i'm going to call this one model well you could also actually call it models plural if you wanted to because we also have pages plurals right so we're only going to have one model for now but that doesn't have to hold us back so the model that i'm going to create is going to be pizza s i'm going to use plural because of a certain certain difficulty that we have so why am i using plural because usually the convention is that you should use your model names as sing singular values so it would be pizza or a pizza model and it would not be pizza's model i'm going to explain that to you real quick because the problem is so if i create something called pizza model we also have the pizza view here and it has a code behind file which in fact is called pizza model so we didn't create that ourself it was just automatically created for us so the pizza page has now this pizza model which is a page model so now that means for us we have to use a different name for our pizza model so we call it pizzas model okay so what we can now define here are all of the properties that we want to define so what are properties that we need for a pizza well i would say the image that we're using then the name of the pizza the base price may be the final price as well and then all of the ingredients maybe as a boolean okay so let me just use a property here or create one which will be of type string and i'm going to call this one image title so now you see this is a little trick if you didn't know yet you can use the prop keyword here or the code snippet and use the tab key twice and then you will create this beautiful little property so then here this will be the pizza name and then i'm gonna have a price so here let me add another prop which will be a float and this will be the base price which i'm also going to directly define as two by default so it will be set to two and you see the ide things if we have base price then we should also have price well actually i'm going to start off with all of the boolean such as for example do i want to have tomato sauce on the pizza then the next one would be do i want to have cheese on the pizza because it could be that you are intolerant for lactose and you wouldn't want to have cheese on it or maybe you want a different type of cheese but then a boolean wouldn't work and so forth right so we could now go ahead obviously and add all of the properties that we want like pepperoni and then having all kinds of food on it so i'm going to your ingredients on it i'm going to just paste them in here for example i'm going to have mushrooms tuna pineapple ham and beef and finally i'm going to have a float final price all right so this will then be my final price for the entire pizza once the pizza is fully created okay so that is going to be our pizza model and now let's go ahead and use our custom view model where we're going to set up this pizza therefore i'm going to go over to my custom pizza cs html cs file so in the code behind that's where i can now create a public well actually this will also be a property which will be of type pizzas model and this will be the pizza so now if you try to do it this way it will directly create a pizza model item even though i want to have pizzas model because that's the class name that we used right so if you want to be able to use that you need to make sure that you add a namespace here so where is it it's inside of our own project here right now you can obviously just show the potential fixes and add this using razer pizzeria models folder to your namespaces and then we can use the pizza so that'll create a successful reference to our pizza model we created earlier now to be able to access whatever we have here in our form view we need to use binding so here i'm going to use data binding by using the binding property keyword here okay so this is an attribute that we're assigning that can specify a model name or type of microsoft asp.net aquarium we see model binding to use for binding the associated property so now we're going to bind the pizza model to our custom pizza model page model or view model so to speak now this will allow us to access pizzas or create pizzas from our custom pizza view so let's do that in the next video welcome back now let's take care of our view which is our custom pizza cs html so basically you see we have this model that we created then we have our view model which is this code behind and then we are using our view in order to set everything up so that we can see something right so this is the communication between those three items or three files is going to happen for us automatically so now let's go ahead and adjust our custom pizza so what i want to have in here is just going to be a div which will make sure that the text is centered so text and the center version here text center and this will also be a container that i'm going to create so inside of this container i'm going to have a header and this header is just going to say create your own pizza and then underneath i'm going to have a form so a form allows me to enter something so the user to enter something once they are on this view so the form has a couple of properties that we can assign so the one that i want to assign is the method one so there are multiple different methods that we can choose from the most common ones are post and get so in our case we're going to use the post method because we want to post the details that we have entered in our form over to the website so that it then sends the user to the next page where you can then pay or something like that okay so we're going to send them to the checkout page okay so in order to do that we need to set up our form so we need to have a button which allows the user to submit whatever the user has entered so i'm going to create a button here which i'm going to give a couple of classes here so it will be a button primary styled button and i'm going to also add a margin towards the top of a little bit so this is this empty one and then this button can have another property assigned to it which is called type and here i can say that this button should be of type submit so whenever we hit this button the form will be submitted so we will be sent to a different page by default so that's the normal behavior so to speak and now let's give this button a text i'm going to call this order my pizza now we need to add a couple of inputs in here so there is this input which can be of different types so for example the type can be well you can see here it could be a button a check box a date time an image and so forth so a bunch of different input types are available for example if you want a user to enter his password then we would use the password input type and so forth but i just want the user to be able to enter text because i want him to give the pizza a name so i'm gonna add the type text here and then we're going to use this asp4 keyword where we can now and it jumps to form i wanted to use asp4 there we are which allows me to say for which property i want this text to be assigned to so basically what i'm going to say is i want to assign this text that the user is entering into this form to the pizza name which is of type from our pizza so where is this pizza name coming from well we need to jump to our custom pizza model which is just here in the back you see it's just called behind and this is our custom pizza model which itself it has this pizza's model which we call pizza so now we are accessing this pizza and this pizza if we look at it is well as of type pizzas model which has this pizza name property assigned to it so what we're doing is we're saying whatever the user enters into the custom pizza cshtml form here at this point will be assigned to the name of the pizza so to the object that we have just created so now we can also call or add a placeholder here i'm just going to say give your pizza a name dot dot dot for example okay so this will help the user to understand what he or she needs to do with this input so i'm going to close this input tag directly so we don't need to have a closing tag but just this slash before that so this will be one form so actually let's run this and see what this form will do for us and let's see so let's go over to pizzas and we click on try now and try now sends us to our custom pizza page right and here it says create your own pizza and here it says give your pizza a name so i'm going to say let's call this one tutorials eu pizza okay and i'm going to click on this and obviously nothing happens but this is what we have created so far so this is the input field the text form and well the entire thing is the form and this here submits so you see it tries to submit so the website tries to load something else but we didn't say where it should go to and where it should send this information to but obviously we want to have some more fields available actually we want to have a input field for all of those so we want the user to give the option to set a price we want to give the user the option to set whether he wants tomato sauce cheese pepperoni mushrooms and so forth so what i'm going to do now is i'm just going to create another input field underneath which will be of type checkbox because this is going to be something that you can activate or deactivate and that's exactly what the checkbox does and it also stores data in a boolean which is perfect because all of our properties were booleans and now this will be asp4 and for which property should should that be well this one will be for tomato sauce okay so i'm going to use the same structure that i used before and the placeholder here will just be tomato sauce so that the user knows what i'm even entering there now i'm going to add tomato sauce as a text here as well and then have a line break so here a br like this this will create a line break okay so this will be the placeholder as well as the text itself will be tomato sauce like this okay so now please go ahead and add all of the items that we had here so all of the booleans add them into your view as an input checkbox as well alright so i hope you tried it so basically you can just copy and paste this and then replace the details for example replace this from tomato sauce to what was the pizza model the next step in our pizza model pizzas model was cheese okay so here you would replace this with cheese and then you would change the placeholder to cheese as well as well as this texture cheese so this is one way of doing it obviously you could type it manually as well so what i'm going to do is i'm going to add the other ones here as well pasting them in from our prepared code so you can see we have the pepperonis we have the ham mushroom tuna beef and pineapple and each of them is a checkbox and the placeholder is just the name of the property as well as the text that we're adding there before the line break is going to do the same thing okay so now this is going to be our form so in order to make it look a little better it will not be insane but just a little better what we can do is we can add some classes here to our form because currently let me actually get rid of this class before and let's run this let's see how ugly is going to look like so let's try or bring me that pizza and what we're on on the thank you page directly so here on the prizes try now you see this is what it currently looks like it's not great but let's make it a little better at least not significantly though but yeah let's change this form we're going to make it better later on so here i'm going to send the margin x to auto then i'm going to use margin top 5 margin bottom 5 pixel 5 or px then pt 5 as well as i make it rounded five and i'm gonna have a light background and make sure that this will take four columns so pretty long entry here like this so this is these are going to be the classes that i'm going to use now let's run it again and you will see what this will do for us so here we go to pizzas we try now and actually this is how it's going to look like so here you see we have this gray background and then actually let me add the line break after the give your pizza name so here let's add a line break in there as well okay so let's rerun this because it automatically gave me alert light or whatever even though i wanted to have back bg light so let's go over to pizzas let's click on the try now and there we are so we have this grayish background and then we can order the pizza and yeah that's pretty much it actually let me add one more padding bottom of five as well because otherwise it's not going to be very nice at the bottom as you saw it was directly cut in okay so if you're wondering about any of those right you know how to find them out just use the documentation of bootstrap okay now if we run this and we actually enter some pizza details here so let's say we want to have tomato sauce pepperoni and we call it you pizza and we click on order my pizza you see nothing happens even though internally something does happen but we're not catching what happens so there is this method called onpost and we can get the data from it specifically we're going to use the i action result on post and then we can use this form result to calculate the final price for our custom pizza and then finally send it over to the checkout page on a redirect to page let's see how that works in the next video welcome back now that we have the view the view model and so forth let's actually take care of redirections in net six so for this next step we'll need to get into the view model again so to our custom pizza cs html and here we'll first create a new flow property which we will be using to store our final calculated price before sending it out so here let's create the property which we're gonna call float pizza price like so now after the onget function here i'm going to create a public i action result on post so for now onpost will show an arrow since there is no return value specified remember that this isn't a void method this is an i action result method or at least that's what it should return so a return value has to be specified we'll get to that in a moment first let's learn a bit about i action result so what is i action result simply put the i action result type is a base abstraction of an action result it specifies how a response is going to be given for a specific request to quote the official documentation the i action result return type is appropriate when multiple action result return types are possible in an action so we can understand i actual result as being some sort of a container for action results more so knowing that i action result is an interface while action results themselves are abstract classes so action result return types can represent various http status codes so let's look over those status codes what are these http status codes well you probably know this one the arrow 404 which stands for file not font that means that the thing that you requested was not found well that's about it but for a whole lot of scenarios so let's look at some of the most common ones so to learn a bit about the http status codes they are categorized and you can see we can find the 100 200 300 400 and 500 type codes so 1xx codes or the 100 codes are just informative like saying that the server has received the request and is continuing to process then we have the 200 codes or the 2xx codes which mean that the request was successful and the browser has received the expected information then we have the 3x codes that are for redirection so you have been redirected and the completion of the request requires further action and then we have the 400 codes which are client error codes like the 404 being an object not found the website or the page could not be reached either the page is unavailable or the request contains bad syntax and then we have the 500 codes or five fx codes which are server errors while the request appeared to be valid the server could not complete the request all right that'll make us more familiar with requests and results let's look at how we can work with this in our project so now that you're familiar with that with the action results let's continue so onpost is there to catch and use anything submitted with the post method for example so that's exactly what we're using right and here actually it should be on post with a capital o and if you recall that's exactly what we're doing here right we were using this post method here for our form and then once the submit button which submits the entire form has the type submit that's where the form actually is being then submitted and this post method is called this onpost method so the ix result is the return type of this method that is what is usually used in on posts since you usually want to do some sort of action after the submission like for example change to a different page site or just refresh this page to clean out this form the i action result allows different http statuses to be returned while action result can return only predefined responses for returning a view or a resource with i action result we can return a response or error as well nice so now inside the onpost method let's use our submitted values to calculate the price for our custom pizza like we have seen before one of the pizza model properties was base price which was set to 2 representing the minimum price no matter what and it always has to be 2. to respect that let's start by setting our pizza price to be base price so here our pizza price which is the property you can see there is this pre property in custom pizza model pizza price and we're going to set that to be pizza dot base price so that's what we start with and then after this let's add a value to it depending on what boolean properties were checked so the simplest and most straightforward way as well as the most easy one is the read way so we need to just go ahead and add a bunch of if statements here so we just say if pizza dot tomato sauce then the pizza price should be incremented by one so here plus equal one this will just increment it by one so then the next if statement here if pizza dot cheese then pizza price plus equal one and so forth now you could obviously change the prices here so for every single pizza you could change the value to your liking so here some people say that a pineapple has nothing to do on a pizza which is why the price for the pineapple will be significantly more expensive so people will be shocked if they order a pizza with pineapple even though i i really don't care but some people have there is a meme war about this whole pizza with pineapple stuff so yeah we're going to follow it by adding a significant price here so that'll cover it and now for the long-awaited solution to our still standing error that we have here this return value error we will be using a response that will be of type redirect to page so there is this redirect to page you can see it's well let's actually look at this class after i call it or this method so here we can say to which page you want to go and i'm going to say go over to the checkout folder and inside of the checkout folder you will find the checkout view and that's where you should send us so let's redirect to that particular pace by the way you will see that if you hover over redirect to page that there are multiple different overloads so you can see even a total of seven different overloads here or actually seven more overloads so there are different approaches to pass data with different things that you can pass to redirect your page so we can even add some details here and that's what we should do because the checkout needs to have some details right so we can just add you see here first we have the page and then we can add an object to it so what i'm going to do is i'm going to create a new part object here and pass it using the new keyword and curly brackets and i'm going to use the pizza name and the pizza price to be sent over so this creates an object that just has these two details it has the pizza name and pizza price like so so the pizza name comes from our pizza object here and the pizza price is the floating point value that we have inside of this class which is why we don't need to use pizza.pizza price because it is already inside of this particular class that we're currently in now this curry or this square brackets was a little too much now if we save this and run our application once we click on the submit button we will see something interesting happen so let's do that let's go over to our pizzas let's click on try now let's give this pizza a name okay let's add tomato and cheese so it will just be a magarita and let's click on order now and you will see that we actually got to a different page so we're at the checkout page and on the checkout page we just had this link to the thank you page but the interesting thing is the url so you can see we are on the checkout checkout page and then we have this question mark which now has a bunch of values assigned to it so basically we're passing additional information here to the url by sending this post request and using the redirect to page with additional information so we're saying we want to pass in the pizza name as tutorials eu pizza and the pizza price as being four so that's pretty much what we're passing and now this page could go ahead and use this data in order to display something all right so that's it for this video now you see how you can redirect data and how you can use the i action result on post method don't forget to check out our asp.net 6 full course in over 13 hours of content including quizzes and challenges you will build real world projects including handouts and support we will also dive deep into topics like mvc pattern blazer server restful api development authorization and authentication and entity framework you will become a true asp.net rockstar so wait no longer and enroll right now you can find the link in the description below welcome back in this video we will need to see what happens on the checkout page because we sent a post to the checkout page but now the checkout page needs to get that data and do something with it and display it accordingly so let's go over to our checkout page and specifically to the checkout model which is inside of the checkout cshtml which is this code behind right so here we have this on get that's where we can get data but for now let's set up a couple of properties here because we need to know for example the pizza name so here pizza name then we need to know the price so here property and this one will be pizza price and actually this is the name of it the property name but of type it will be the float value here and then we need to have another property which will be a string of type image title because i also want to be able to send over the image title and then accordingly display the right image because as you know inside of our www root we have this images and pizzas folder where we have all of those different pizzas right and we'll later on give the user to the option to select the right image for their pizza that they have created so now since all three of them have to be bind property we could bind property all of them so we could go ahead and add this bind property here to every single one of them but we could also just go ahead and set the bind properties for the entire class so here you can go over to the class level and here will be plural because we're finding multiple properties so we're just saying bind all of those properties so that they will be accessible in the view and will be bound to the view so to speak okay because we want to directly bind for example the pizza name to a view item that we're going to create later on since we want to opt into model binding to page model properties on get requests we need to add supports get to it so here we will get the data right and we get it on the checkout page we get it from the custom pizza page but here we need to define that it will support get specifically so we say get this supported so supports get to true so great now let's make sure that we cover the possibilities of not receiving a name or image title so we have yet to send that in we'll cover that in the next step but to do that check if pizza name is null or white space and if true set the default value say and the same thing for our image so inside of the on get here we can now go ahead and check for those individual items so we can just check the string is null or white space pizza name and i love how the ide just knows what i want to do and then in that case we're going to set the pizza name to custom like so and actually it's the string so we need to use the quotations here and then we have another if check so here if string is null or white space for our image title then we're going to set the image title to create so here create and create is actually a pizza name so here there is this create png this one here then it will be this image that will be used all right so we're just saying if we don't have those then overwrite them with what we have defined as the default for the pizza name as the as well as the image title okay so for now let's make sure that we have something that we can display on the checkout page so we get the code now we're fine with that even though we're not using it yet but let's go over to our checkout code the view code and define the view so what i'm going to do is i'm going to have something like your order so whatever the order of the user is and then i'm going to add a div here which will be of class align content center like this and then inside of it i'm going to have another div which will have the class of being three columns wide so here call 3 and the mx should be automatically defined so the margin and i want to have specifically margin bottom of five okay so this will be the div in which i'm going to put for example the image which will have the class of w100 so this will have a certain width the image and i'm going to use asp append version set to true so this append version true will make sure that the user doesn't have to refresh the page when we make changes for example to the css or to the image itself and so forth so this will be automatically managed for us then then i'm going to have a paragraph in here which is just gonna say your order for the pizza is ready then another paragraph total purchase price or total price for your order is colon and then the actual price after a line break okay so here i'm just going to also add a link which will have the button button primary classes assigned to it primary and we'll have a margin towards the top and otherwise automatically margin it the asp area will be an empty string and the isp page that we want to go to is going to be there thank you page so here thank you page which is in the same folder it's in the checkout folder so we don't need to actually add like this checkout folder name in here with the slash and what i want to actually have as content here will be confirm order so when the user clicks on it that's where i want to send him to the thank you page and i want him to confirm the order this way so if we run this now and we get to this view so we need to order a pizza here try now customize it and like this and you see here your order your order for the pizza is ready total price for your order is and then confirm order which should send us to a different page but it doesn't do that yet okay now how do we actually customize this page based on properties from our model and more specifically what we get from our view model here well inside of our view model inside of checkout you can see we have the pizza name the pizza price and the image title so how do we get those well we can just use the head model annotation so here your order for the pizza and here we need to add the name so here for example add model dot pizza name is ready whatever name we gave the pizza is going to now appear here pizza is ready and then we also need to do the same thing with the price so please try that pause the video and think about what you would enter here okay so it's at model dot pizza price and here not model binder attribute but model dot pizza price like so for now let's try it again and see if the data is actually reflected here so we go over to pizzas we try now we add some stuff to it order my pizza and you see your order for the tutorials you pizza is well pizza pizza is ready total price for your order is five now maybe we should add dollars or euros or something like that so here i'm going to add the euro sign and euros now how are we gonna get the image because you see we have this image but it never is actually assigned so there's no actual image being displayed so in order to get the pizza we need to make a little change so here underneath our order what we can do is we can add some sharp code using the add annotation and we're going to get the photo path or image path you could call it let's call it var image path from our folder of images pizzas and i think it's called pizzas with the capital letter so here the pizza's folders with a capital letter so really important here and then we're going to say it comes from our ad model dot image title and this actually should not be wait a second so this is where the string ends this is where the title goes on plus and here we have the dot png keyword like so and this png keyword should be like this all right so this will now be our image path now let's use this image path inside of our image here because the image doesn't have a source yet so it doesn't know what image to display so now we're going to add that here by using the add image path which will use this variable here all right now let's check it out again let's run our application and see if we're going to get the pizza to display so here try now cheese tomato sauce all of the good stuff order my pizza and this is what your oh this is the image as you see you order for the drawer you'll see your pizza is ready all right so since we specified that if no image is sent that the name will be create you can also see that you just use this create png image here that we have this file so in this test example of our checkout page that we made we just use our imagination and we pretend like the confirm order button just covers all the payment system and directly sends you to a thank you page since covering this is not the scope of this chapter let's just send the user to a thank you page and jump to the last part of this chapter so in the html given before we already specified the url of the thank you page over here and actually i called it not thank you page let me see i called the thank you so this page keyboard was too much so now this will send us to our thank you cshtml and here let's just add an h1 where we're going to thank the buyer so thank you for ordering with us ad razor sharp pizzas so now let's run it again and we should be done so we have our running application so try now tutorials pizza check it out order my pizza confirm order and then we see the thank you page so now we have covered everything from html css to bootstrap then looking at mvvm looking at the post on post method i action result property binding on get redirecting with overloading and some smaller treats along the way to finish this razor chapter off let's work a bit with databases so let's try to make some already prepared pizzas to choose from in other words let's make a mock database all right for this final step we'll set up our fake database and finish this up with sending the data we need over asp root so let's go ahead and start by creating a view in our pizza sales page so here inside of pizza here at the bottom we had all of these div tags right so this button primary then we had one two three four and after the fourth one i'm going to create another div tag so that just means that it's going to be inside of this div deck here inside of this row div tag so i'm going to add a class to it and it should be inside of here so the class should be call 4 mb mb5 so just a little bit of margin at the bottom and it should be four columns thick and then i'm gonna have a image here with a source src which for now will be empty and let's also say that this image will have a width of 100 so at least whatever this 100 means it depends on the size of the screen and so forth and then i'm going to use the well set the isp append version to true as well let's just make sure that everything is up to date really quickly so this will be our image and then let's create a link here which will be of type button so we can just click on it and it sends us over to the checkout page so button primary and it will be mt1 and you see for some reason just wants to automatically use something else and then we're going to use the asp area of empty and the asp page that we want to send the user to of checkout so it's inside of the checkout folder and there is this checkout file and here is a text that we want to display we could say something like get this pizza get this pizza like so all right then underneath it i'm just going to have a little line break like this so this will only give us a very simple result so if we run this we will just see that under our pizzazz we now have this get this pizza and then you see there's nothing like this image isn't even being displayed because it doesn't have a source yet so it's pretty empty right so we're going to change that obviously based on our fake database that we're going to make so we need to set up a mock database and get the values to then loop over the existing pizzas and create a view for each one of them so let's start with the database in this case we're going to just set it up in the view model itself so inside of pizza cs html inside this view model we will add a public list of pizza model and call it fake pizza db for example so let's just do that real quick here public list of and not publish but public list of pizza models or pizzas model and we're going to call it fake pizza db so the idea is that you can then later on replace this now pizza models doesn't exist so we need to use this namespace for pizza models to be accepted here so now this is our pizza model and now inside we can put all of our pizzas in there so what i'm going to do is i'm just going to assign a new list of pizza models and pizzas model to be precise not pizza model but pizzas model which i'm going to manually now create in here so here i can just go ahead and create a new pizza model with the following details so image title will be for example margarita and the pizza name will be also magarita then we need to set the base price and this will not be inside of a string but here base price to be for example two as well as set the tomato sauce to true and the cheese to true and then finally set the final price to four okay so this will just be our pizza model for one pizza margarita item or pizzas model so we're going to create a couple of pizzas models now so you can obviously just go ahead and do it manually using all of the ones that we have here so carbonara bolognese hawaiian margarita we already have meat feast and so forth so i'm just going to do that here always separating them with a comma okay so this was the first pizza model and i'm just going to create the other ones and i'm not going to type it down in manually because i really don't want to bore you you can decide yourself which pizzas you want to put in there so then you see the final price is always manually calculated but obviously you could also run a small method here to calculate it but we're going to keep it simple all right so that's going to be our fake pizza database which is going to contain all of those different pizzas with their titles as well as the pizza names so the titles really reflect those png files that's important because that's what we're trying to get so into images pizzas and then we're going to take that image title so let's now get those in data points and display them and send them to our checkout page so let's open up our pizza page here and now just create this piece here for every single one of our pizzas so here what we can do is we can use an add keyword to make this again a little bit of code and now this for each will go through every single pizza inside of our collection called model dot fake and let me enter this fake pizza db okay and now what is it that we want to do inside of it well inside of the for each loop we want to create this if actually we want to create this entire diff so let me put that even in the level higher like this and this entire div which we had created so including the for each loop like this so this entire div should now be created each time that we have an item inside of our fake pizza db so now the source obviously needs to be changed so the source will now be our image path so at image path let me see that we create the image path think we didn't so we need to create that for each item so for each and let me see that we created inside of this file i think we didn't so let's just do that let's create a image path is going to be inside of images slash pizzas and then it's just going to be the pizza dot image title plus the dot png keyword so now we can use this image path here now this obviously is the sharp code so we need to finish it with a semicolon now let's see if any of this is even working so if it now did create a bunch of pizzas for us so let's go over to our pizzas page and there we are get this pizza and each of them has a width of four columns but as it seems i'm not doing it correctly with the image path yet so let me check what the problem here is actually i'm just missing well i need to assign it as a string but at the same time i need to use the add annotation here so that it actually uses this it image path here so now let's run it again and see if it's going to assign those images properly so we go over to our pizzas and there we are so it seems i just have a typo here for my first pizza name because there it doesn't find the pizza or it doesn't want to display the pizza so i can go over here and see if i wrote this name properly margarita so i was missing the r so you see what i entered manually just didn't seem to work so if you see that any of the images doesn't appear it probably has to do with you not using the right image name or image title so here we have all of our predefined pizzas and we have the buttons just underneath them and when we click on them it sends us over here even though you see it doesn't display it correctly yet so this is just the default text that we have here so let's make sure that this is also fixed so now we need to use the asp root for that what is the asp root well the asp root attribute is used for creating a url linking directly to a named root which means that we can accomplish the same result as with the redirect to page method without using it but just with a link so this is done by adding after the asp page here a little bit of code let me add that here which will be the asp root and the asp root you use it with asp root minus then the property name equals property value okay so in our case what that will mean is we set the let me actually put it into separate lines so it will be a little more readable so the asp root for the image title will be the pizza dot image title and then i want to add another asp root and this one will be the pizza price will be pizza or add pizza dot final price okay so let me also put that in a different line so what this allows us to do is to directly link something in our html code so to speak using the asp root now let's go ahead and see if this is going to work because we're passing the image title and the final price now and let's go over to our pizzas get the bolognese pizza and we see the bolognese so your order for the custom pizza is ready the price for your order is five euros so quite a cheap margarita pizza the confirm order also works so that's brilliant now you could of course go ahead and instead of saying custom pizza that you display on your checkout page you could rename that to the pizza image title name or something like that but overall you see that our application works flawlessly now it doesn't look great i know but this is not what this is about this is just about you understanding how the general flow of an asp razor application works and you saw how to set everything up step by step so let's go over to pizzas and we can see all of our pizzas we see our great selection of pizzas now you could obviously optimize the distance here as i said this is not to win a design contest then we'll go to try now here we can go ahead and create our custom pizza and give it a name so let's call it tuna pineapple this sounds actually quite disgusting but if you add gorgonzola to it then it's actually quite interesting i can recommend it so here tuna pineapple craziness like so and order my pizza and you order for the tuna pineapple craziness pizza is ready the total price for your order will be 13 euros now my pizza is very specific so that's why i created well gave me this specific image here now you could write some logic that it would then use the details that the user entered in here in order to then go ahead and adjust the image that is displayed but yeah that's pretty much it so now you see how to create a little application now you could obviously put it online and then obviously what needs to to still add some additional information like such as to actually send the user for example to paypal to then purchase the item and then wait for the paypal request and then once the paypal request comes back and it worked out then you can go ahead and do the payment but that would be done using apis hey it's yannick again let me take over real quick and let's extend that beautiful application a little bit further so as you may have noticed when we create a pizza and we click on try now or we just take that margarita pizza here and click on confirm order then we get directed or redirected to that thank you page right here but in a real word application such an order needs to get saved anywhere right because right now the order is gone for like ever and no one even noticed so let's go ahead and add something really nice let's add an sql database to this application so that we can save the orders in a very very simple way okay so this is just for introducing sql databases or entity framework core in this course later on we will for sure talk about this in detail so this is really just to get you started with entity framework call we will build everything now from scratch it's pretty easy it's very simple to set up so i would say let's just get started go to our application and as i said don't get confused later on we will talk about that really in detail this is our current pizza model that we have it has an image title it has a name it has a price and so on for our database entries we will create another model which is a pizza order model for example and it will simply contain the pizza name and the base price okay that's enough because we can shorten it a little bit up because these are really many fields here and we have an image title here we really don't need that in our database so let's simply add the name and the base price and you can go on from there but i really want to show you how to create a brand new model which we can add to our database why we can do that and you can extend it on your own from there so let's go ahead to our models folder on the right side click on add click on class and let's add a new class let's call this one pizza order you don't really have to add the model thin text so you don't need to say pizza's model you can simply say pizza for example but that's just make for making things clear a little bit to you so this is simply called a model right here but we don't really need to add that model syntax we can simply say pizza order and this is the pizza or the model right okay so let's call it pizza order for now let's click on add if you have ever worked with an sql database before you may know that we definitely need a so called primary key which is for simply identifying a single object in a database so imagine if you have 1000 orders in the database each one needs a unique identifier and that's the so called primary key what is it in c sharp pretty simple let's create a property write prop press tap tap and id that's it right so it's a simple integer id which is always ongoing so if you have an order and that one gets id10 you will never ever have again pizza or order with id10 because it's absolutely unique alright so this is what we really need let's extend it a little bit more let's add another one prop string pizza name and we can add another one prop float base price there we go so this is a very abstract and minimal version of a pizza order right we could have something like phone number client name or order name something like this so that you know who ordered the pizza right but this is really just for getting you started in setting up an entire database so this is the minimal version that we need of a pizza order let's leave it as it is right now we don't need to add anything else don't forget to check out our asp.net 6 full course in over 13 hours of content including quizzes and challenges you will build real world projects including handouts and support we will also dive deep into topics like mvc pattern blazer server restful api development authorization and authentication and entity framework you will become a true asp.net rockstar so wait no longer and enroll right now you can find the link in the description below now let's move on and create our application database context in simple words this is the way how we can really access our sql database so you will see that just in a minute let's go ahead and create a new folder in our project right click add new folder and call the folder data in that folder create a new c-sharp class and call the class application db context we first have to import and install some nuget packages so let's move on to tools new get package manager and then manage new get packages for solution click on browse and now search for entity framework core there we go now we have to install three packages in total first of all entity framework core let's install that then go ahead and install the sql server so that we can use a connection string and so on in order to connect to our database and we also have to update our database and this is why we need the tools package we can find that when we scroll a little bit down or we search for entity form core dot tools let's go ahead microsoft entity framework tools right we need to install that so that we can really update and create our database from the package manager console here in visual studio that's amazing all right now let's close the new gate package manager here and we are good to go this is everything we needed to import now let's bring that into our new class application db contacts go to the very top called using microsoft dot entity framework core now that we have that imported we can inherit the application db context from the base class db context there we go now let's go ahead and create the so called db set right prop this is a property for sure and we change that to db set just imagine this is a table inside of our database right and the type of this table of this so called set is type of pizza order we don't have that imported yet so hold the cursor above this show potential fixes and let's import razer pizzeria model namespace right here right let's call that pizza orders or we can even simply call it orders but that's fine we can call it pizza orders that's how the table in our sql database will be named right we will see this just in a minute and as i said we will really get through this in detail later on so let's just continue and bring our database to life right so we need to add another thing which is really really important we need to add a constructor so write down ctor tab tab this is a constructor and in order to make really use of it first of all please don't forget that we need to call the base constructor because right now we are inherited right so application db context is inherited and we should really not miss the constructor of the db context or our application however the database will not work so let's call the base constructor this is simple inheritance right okay public application db context and now it's a parameter inside of that constructor accept db context options there we go off type application db context so this is how we will configure later on the connection string and we bring that down into the next line of code and add a nice name here let's call it options there we go this is how your constructor should look like right now so we have that constructor application db context and then we have the parameter application db context here from the db context options so there in this options we will define the connection string so that we say hey please create or connect to this database let's save this because we're done right now our new database will have one table with all the pizza orders right now let's go ahead and go to our appsettings.json and now let's add our connection string simply create a new connection string option here let's call it default connection now let's find out what your connection string is go to view go to sql server object explorer and by default when you install visual studio you will also have an sql server installed this is what i'm talking about so click on that and copy what's the name of the server now please notice that i have by default one backslash in the name but since this needs to get escaped it got converted into two backslashes right so all right just for you to see how this should look like now i will copy that and remove it again the default connection string consists of many attributes but some of them are really necessary first one is server server is equals to local db ms sql local db right now add a semicolon and now let's add the database name we want to connect to and if we don't have a database with that name we will create a database with that name so database you can write now or you can call it now as you like database for example pizza app right at a semicolon and we are now good to go okay so this is a very minimalistic connection string as i said it's just for getting you started now we're done here this is the property that we want to read from our program.cs so that we can really get the value of the default connection and this is where we will connect or how we will connect to our database now in order to do this we go to a program.cs right here before we add the first service at razer pages we will now add our database the applicationdb context and configure it in that way that it will connect to the connection string that we have just created so let's go ahead and call builder dot services dot add db context there we go of type application db context right this is the one that we have created right here and this one contains the pizza orders table so let's copy the name we will have to import namespace but that's not a problem let's go ahead hit ctrl dot and you can see using razer pizzeria data and now we can also add another namespace using microsoft microsoft there we go dot entity framework call we will also need that one now add db context right here let's add the braces and now let's configure the options so let's go ahead and say options goes to there we go like this and inside of that options we will now say options dot use sql server we can only call use sql server when we have that sql new get package installed what we did in the beginning so everything should work now for you here's sql server now we open the braces and say builder dodge configuration right this will lead us to the app settings and now let's go ahead and say dot get connection string and the connection string is bound to the name default connection here so let's write that down sorry as a string for sure there we go now i would just close the sql server object explorer real quick so that you can see a little bit more code there we go and we don't have to do anything else right so this will add a new service to or program or to a container which is actually an application db context so in simple words he will try to use an sql server and connect to the default connection so he will try to connect to this database so we're nearly done completing or database setup let's go ahead we need to call two comments in order to make everything run go ahead to tools new get package manager and open the package manager console now every time we change something in our database setup let me just explain that real quick let's go to the applicationdb context right because this is how our database will look like and if we change something right here or if we change the pizza order right let's go ahead if we for example add the phone number or contact or whatever we have to change our database right because we added the pizza order and that one is currently as a model in our database and if we change it here we need to change it in our database too so as soon as the database schema changes we need to update our database and this is called a migration so let's create our first migration because we haven't created one yet so we need to tell the system that our database has now a pizza order right so go to the package manager console and call add minus migration like edit pizza order there we go let's hit enter and it should create a migration file now and you can see some sql code inside of this right now he's simply containing because i just forget something let's go to applicationdb context and inside our base constructor we also have to use the options right this is where we even called the base constructor so just a small copy paste mistake here all right so now it's configured let's run the command at migration add pizza order again and now you will see the build succeeded that's fine and now it will open a migration file here right so this is a real file you can find that on the right side in the migrations folder now let's take a look a migration consists of two methods one is the up method so let's say when we run that migration right now we did not change the database right this is just like an open task so we really need to run that migration we have just created it but we did not execute it so let's take a look the up method will create a new table pizza order and we have some columns inside there id pizza name and base price and if we go back like in git version control then we have a down method and it will drop the table so we can simply switch between migrations move on move on move on or maybe go a step back and this is how we can simply understand how the database evolved over time all right so as i said we really will talk about this in detail later on however this is called a migration now this one is open this is an open migration we did not yet run it we don't have a database we don't have a pizza order table right now so let's do the final step let's create the database simply run update minus database and this will execute all open migrations perfect if you can see that done everything has worked as intended now let's try to check our database go ahead to view sql server object explorer now we in our server let's hit refresh open the server open database and you can see all pizza app databases right here now let's open that one up go into tables and as you can see our pizza order table is here make a right click on it view data and now you can see we don't have any values in the database saved right now because that's not what we did yet but we have the structure so id pizzanite base price that's amazing so now let's go ahead and add a new order to our database in the moment a customer orders a pizza now let's go ahead and add some real orders to our database in the moment when the client well orders a pizza so go to pages go to our checkout see is html cs file because right here after creating a pizza or clicking on a pre-existing picture we will get to the checkout page and right here we have the pizza name and pizza price so this is everything we need in order to save it to the database right so let's go ahead and do that really quick first of all the main question is and you will need that definitely in every application that we that you will create in asp.net call how can you access the database from here because we cannot call application to be contacts.save for something else we need to make use of a very very important system here in asp.net core and it's called dependency injection what does that mean it's pretty simple once you understand how it works in detail let's go ahead and open up program.cs right before we build the application which is happening here in line 14 where we hit app builder dot build right before that method we can see that we add some services and every service that we add in our application will be provided in the dependency injection so as you can see here we have the services and to the services we add a db context so what it means is that we can use the dependency injection to get the db context right so we add it as a service and the dependency injection will give it to us so that we can use it how does that work pretty simple in case we want to use the dependency injection in our custom class for example or in our custom controller or whatever we simply create the constructor so let's go ahead create a constructor ctor now every service that you want to use will get injected in the constructor as soon as you write it here so let's go ahead and say we want to make use of an application db context don't forget to add the razer pizzeria data namespace application ubcontext let's call it context and now let's save this context that we get from the dependency injection let's save this into a private read only application db context and let's call it context right notice the underscore this is because the variable is private and let's assign the private variable with the value of the dependency injection now we have the context and this context is our database let's go ahead and create a new model and save it into our database so our table is of type pizza order so let's create a new pizza order pizza order make sure to input the namespace pizza order equals the new pizza order pizzaorder dot name pizza name equals to pizza name right it's the one you can find right here and you also have the pizza price so let's go ahead pizza order pizza name pizza order there we go sorry pizza price or base price equals to pizza price there we go and now we want to take this pizza order here and save it into our database we only need two method calls for this let's grab our contacts that we have just created and go to the pizza orders table now call a method called add so add something to our database pizza orders table please add the pizza order and now very important please notice that every time you modify the database you add something you delete something you modify in value you always have to save the database call contacts dot save changes there's also an async version of the most of these methods but we will get to this later on right so let's add our pizza into the database or the pizza order and then save the database perfect let's go ahead and give it a try go to our database pizza order here hit a refresh right now it's nothing inside that's totally correct for sure and i also want to say something really quick we don't assign an id here so pizza order dot id we don't have to fill that out because entity framework will automatically create the primary key and id is our primary key right here so we don't have to care about that all right so let's save it and now let's visit our application let's order a margherita pizza get this pizza and in a moment we confirm the order thank you for ordering we will now have that in our database so let's go ahead to our application let's go to pizza order and update or refresh the entries and as you can see pizza margarita base price four so for sure i tried it several times before this is why the id is six for you it might be one right and now let's create a custom pizza pizza try now let's call it cheesy roni let's add cheese and pepperoni there we go check for the price prices for cheesyroni confirm take a look at the database refresh and you can see cheesyrony right so now we have saved something into our database so this data is persisted now when we shut down the application and start it again we still have our pizzas saved in the database now let's extend it even a little bit further and let's add an overview of all the orders that we have in our application into our front end so that we can see all orders when we click on orders in the navigation bar we will need to add that and afterwards we are done then you have learned how you can create a complete application also using sql database and entity framework core so that you can save and read persistent data all right so now let's go ahead and add another page to our application so click on pages right click add razor page let's call the razer page orders click on add and now let's first of all add it to our navigation bar so let me really quick close that sql server explorer here we don't need it anymore let's go to the shared folder and click on layout let me zoom a little bit out and now let's adjust it a little bit when we scroll to the very bottom we can see that privacy page here let's get rid of this completely we don't need it let's save it let's go a little bit up and then we have the privacy here let's adjust this to slash orders and set the name to orders too so let's save it let's take a look at the application as you can see in the navigation we have no orders let's click on that and we'll get to an empty page that's fine so in the end we will have home pizza and orders later on because the order should not be visible for everyone right they should only be visible for the manager of the pizzeria for example later on in this course we will completely check out the entire topic of authorization and authentication so i'm talking about an identity management system with users and roles and to explain it in the best way possible we will create a complete invoice management system for companies now let's just real quick move into or or the cshtmlcs and let's think about of what data we need in our view so what do we really want to display i think about this playing a small table styled with bootstrap which is simply displaying all the orders that we have in our database so we need a list of all pizza orders from our database let's first of all create that list public list type of pizza order we need to import that namespace control dot using razer pizzeria model there we go and then we say pizza orders equals to new list of pizza order so it's empty right now okay and then in on get we go to or context and then grab all the orders from the database so if you want to have the context you have to use the dependency injection and you can use the dependency injection by creating a constructor so let's again see tor constructor let's create a private read-only application db context context there we go import the namespace in the constructor take the application db context context let's set the value now we can make use of our context in onget let's grab all the information that we really need so we'd simply need all open orders or all orders in general so let's go ahead and say pizza orders equals to now really pay attention to that context we go into our database let's move into our pizza orders table and let's take them all the entire list and let's make a list out of it to list right pizza orders to list now we are done we have that we don't need to save you because we're simply reading data you only have to save if you are modifying data so adding deleting updating right pizza order and now let's move into or order cshtml you can see we're using the orders model here so let's real quick create some html markup let's go ahead and create an h3 for example call it orders let's add some nice space this hr is a very thin long line and now let's create a table we can pretty easily do that go ahead and create a table like this add a style class from bootstep let's call it table now let's add a t hat which is a table header and inside that t hat we add the first table row which is actually the head we'll see that in a second let's go ahead and the first one is for example the id you can really create it as you need but i want to give you a simple template right so now let's get that out id our pizza name and we have the price for example right so let's take a look real quick in order to see what's happening in the front end so let's build the application and take a look as you can see we now have bootstrap table id pizza name and price this is what we have created so far you can see the orders header and you the hr thin line i'm talking about and now let's bring in the data here go ahead and create a t-body right under the t-head so let's go ahead t-body there we go and inside that we have a tr table row and inside of that table row there is a data of a specific order so let's just real quick above this create a loop add for each let's write it for each loop var order in model dot pizza orders this will make it possible for us to create a table row inside of or for each loop and now inside that row we have some table data fields for each header field so this one is id this one is name and this one is the price right so this is matching with the structure of this one id pizza name price id pizza name price so let's insert the data add order dot id it's really pretty straightforward once you get the system it's absolutely handy and easy to create incredible huge web applications id pizza name and order dot base price there we go let's save it and take a look again now you should already see our information from the database so now you can create data and now you can read data amazing so this is how you can integrate a sql database using entity framework core from scratch so that you can read and write data so now let's just add some nice visual stuff to our pizza pitch to spice it up a little bit and then we have finished this application let's add a nice visual effect go to our pizza page and these blue buttons we should really adjust them and add a nice little hover effect to make it a little bit more eye-catchy so let's move to our pizza page which is pizza.cshtml and in or for each loop here we are looping through all the fake pizza database here in order to show all of the information about all the pizzas so let's go ahead and we have that atec here and this a tag is handling well the process of redirecting us to the checkout page so let's just combine this so copy the image tag here copy that one and let's go to the a tag and here where we have the get this pizza let me just bring that into the next line of code there we go inside of that a tag let's just get rid of the get this pizza and let's simply add the image tag we have just copied right now go ahead to the a tag and remove the button and button primary we can also remove the margin top right now let's save it let's take a look at our application when we click on margarita for example it should still work because we did not change any of the routing data so pizza is ready it's margarita right so this is absolutely not a problem meet fees there we go and then we can confirm the order etc we can still create our own pizza let's give it a try perfect so now to end this let's simply add a nice visual effect for this we will create a custom css class pretty easy let's go to our project let's go to ww root css site.css you can for sure create a custom new css file but we will extend it here as we did before let's go ahead and say dot pizza minus img and we only want to assign some new effects when we hover so make a colon and then say hover not after hover there we go and now let's write some nice effects transform colon scale 1.05 just to make it a little bit bigger when we hover right so now don't forget to assign that class pizza img go to pizza cs html and now here add our a tag let's add class again class equates to pizza minus img don't add it to the image directly because it's wrapped with the a tag so add it to the a tag let's save it in visitor application and sometimes when you change css styling code you have to refresh the page and clear the cache so press ctrl f5 now let's see if everything is working when i hover we got a nice small visual effect this is really important in web development it's important to drive the attention of the user this looks pretty nice and i'm pretty happy with that now so amazing yeah now we are finished with our application you have achieved something really nice because you have now learned an entirely new system which is razer pages and you have built a complete application including form data saving some elements to a database and much much more even styling right so we now have reached the end of this few free hours of the complete asp.net 6 course make sure to check the link to the full course in the description below and if you're new to the channel or haven't subscribed already subscribe and like the video right now to no longer miss any high quality programming content write a comment below and tell us if you liked the video if you have any questions or any wishes for new content so thanks for watching and see you next time

Channel: tutorialsEU

Views: 206,224

Keywords: html, tutorial, code, programming, simplilearn, how to make a website, razor, visual studio, website, course, mvc, programming with mosh, asp net, dotnet, code with mosh, entity framework, asp net core, tim corey, dotnet core, ASP NET, Razor Pages, Entity Framework Core, Course, asp, tutorialseu, csharp, c sharp, beginner, entity, framework, core, MVC, ASP.NET, Core, Crash Course, c#, freecodecamp, what is asp.net, asp.net for beginners, learn asp.net, freelance web developer, backend developer

Id: 7d2UMAIgOLQ

Length: 209min 39sec (12579 seconds)

Published: Wed Mar 23 2022