Top Course - Learn ASP.NET Core 5.0 MVC - CRUD Operations, EntityFramework Core

what's up youtube this is dennis panyuta for tutorials.eu in this video you are going to learn the fundamentals of asp.net core mvc while building an expense tracker we're going to cover the core concepts of the mvc pattern as well as the crude operations which stands for create read update and delete which are the core operations when working with data in a database you will need to have a good understanding of c-sharp as well as a basic understanding of sql as well as html in order to get the most out of this video but i'm going to of course explain every single step along the way so if you have no idea of those topics it might be very tough for you so you should definitely check out my c-sharp master class video that i've uploaded on this channel as well and by the way this is just the beginning of the complete course that we have created so i've been working with brugen patel a specialist in asp.net and we built this complete course so this video that you see right here on youtube is just the first third of the course so if you want to have the full course the full 10 hours course then definitely check out the link in the description they will become an asp.net advanced developer so they will really help you out to get better jobs in the future in that field because it's a really well paid area of course all right so let's get started and don't forget to hit that like button and of course also the subscribe button if you want to not miss out on any other great videos such as this one all right enjoy this video alright so now let's look at what we're going to build in this video so first of all we're going to build this borrowed items list where you can add a borrower as well as a lender and then the item that they have borrowed or landed and this will be quite easy so here create new item and then you can give it a name so let's say you borrowed the dartboard and your name is michael and the lender was frank so let's say frank landed michael the dartboard well then we can create this item directly here and this will then allow you to have an overview of what you borrowed or landed and this is something that happens to me in the past where i was borrowing a lot of stuff for actually i was the lender mainly so i would forget that i even landed something then i would get go to a friend's house and i would see that he's still having my thing and then we're like hey this is mine do you even need it anymore so that's something that can happen quite quickly with that where you forget that you landed it out but the lender at the borrower also forgot that he borrowed it and as this happens quite a lot i think this application will be helpful so we're not going to implement the delete and update functionality at that point so that's going to be a little challenge for yourself once you're done with the video so definitely try that once you're done with the full video and you've learned how to delete and update but we're going to implement it in my expenses so this will be the actual expense tracker so we will have two parts in the first part you will learn how to build this borrowed items thingy and then the expense list which will be a little challenge for you as well along the way so a bunch of stuff to learn for you okay and then once you implement this expenses list what you will have is an expense as well as an amount and you will be able to update and delete so the expense type that's something that will be covered a chapter just after this video in the full course so i didn't want to upload the complete stuff that i have recorded because there is a full part as well including the content that brugen has prepared for this course and he's the real specialist in asp.net so you're going to learn a lot more from his part of the course but this is the fundamentals so it's really important for you to understand those before getting into the other stuff okay so the part that we're going to build is where you can create a new expense and you can enter the name for it so let's say you bought a computer and let's say it costs 1 000 and well later on you will implement this expense type but as i said only the full course so let's say it's a nice to have because you don't really need a computer or actually the computer itself is a must okay so you can then see we are going to implement expense type so let's go ahead and create this must and now we have this new computer but now let's go ahead and add a new expense which will be a nice to have and that would be an rtx 3090 okay so maybe at that point when you're watching it there is even a ti version of it which will then probably cost something around 2000 and that's definitely not a must that's a nice to have except you are are a streamer and you need the best graphics card or whatever okay so let's create that and you can see now we have the different expenses with the expense types and now if we want to update that at any point and we decide to become a streamer and at a point we need to make really good content having an amazing graphics card as this one then this will become a must expense type and we can update it and this way we can have an overview of what kind of expenses we need and we don't need and so forth so you can see updating works flawlessly and it's all done using the entity framework core which is an amazing tool you don't need to run any queries here no sql queries it's amazing it's all done by entity framework core which is it seems like magic but you're gonna see how to implement that magic yourself in the video okay so then you can of course also delete entries so let's say well you thought about buying it and you already entered it but then you returned it so you didn't actually have this expense then and then you can just delete this expense okay so you're going to learn the crude operation so create read update and delete by while building this application but we're going to look under the hood what's going to happen with all different parts in there and how all of this is connected and also we're going to see what every single file does so even when creating a new project you will see what every single file does when creating it because there are a lot of files that are created for you without you having an idea what they do but after this video you will have an understanding for that okay so thanks a lot for watching this video i'm super excited to teach you all of that and also if you want to learn even more about asp.net i'd be happy to teach you more in my paid course so check out the link in the description down below so now let's get started with the real application and real knowledge so enjoy this video man in this section we are going to set up our first project then we're going to look at every single file that is created in that project automatically for us so we didn't even add any of these files manually they all come with the creation of the project directly that is what the ide does for us really powerful and this then allows us to really go through every single file and understand what this file is for and how it is important for the overall project that we're going to build and in general whenever you're building an application you need to understand these files and what they are for and then we're going to also look at mvc the theory at least behind it so what does mvc stand for what is the idea behind it and then of course we're going to build mvc applications later on where we're going to build models views as well as controllers because that's what mvc stands for all right so let's dive into the chapter and i hope you enjoy this let's get started in this video i would like to tell you which tools you are going to need to install in order to develop along with us and also in order to get started with asp.net core and we're going to need visual studio for this the latest version of it in my case is 2019 towards the end of the year 2020 so make sure that you are using the latest version of visual studio for all of this to work there you can just download the community version if you don't already have access to a professional or enterprise version by ikea in case visual studio is already installed on your machine make sure that you update it to the latest version okay then you are going to need sql server so you can just search for download sql server 2019 and then you will come to this page where you can just go ahead and try sql server 2019 this will send you to this page where you can then download the developer version of sql server 2019 you can use an older version but i would recommend to just use the latest version of sql server and then finally you will need dotnet 5.0 so the sdk if it's a newer version that's fine as well so just make sure that it's 5.0 at least and usually if you watch this video in the future you are going to see a later version than sdk 5.0.100 and also what you see here is that it requires visual studio 2019 version 16.8 to work so make sure that you update visual studio as i said otherwise this sdk will not work correctly alright so after you have installed all of those tools let's go to the next video in this video i would like to give you an introduction to dot net and as you can see here there is this keyword core and it is crossed out and that is because it was called net core up to the version 3.1 but now it's just called net because they put everything together so onepackage.net framework now consists of net core and a couple of other frameworks as well so net is a cross-platform and open source framework it was not a new version of the net framework but it was an entirely new framework created to build desktop web cloud and mobile applications but that changed a little so now it's all unified so net 5 is unifying net core with the other dot net frameworks it is a cross cross-platform and open source framework developed by microsoft and released under the mit license and the net framework is a modular framework and so it is possible to run two web applications with different versions of net on the same server so what is net it's a unified platform and you can see here that at the very bottom you have the infrastructure which are the runtime components compilers as well as the languages then you have the.net 5 layer with net standard on top of it which now works with all of those different fields so you can build desktop applications with it using wpf and windows forms as well as uwp then you can build web applications with asp.net which we are going to focus on in this lecture you can use the cloud with azure using.net which we're going to do as well in this course you can build mobile applications using xamarin gaming with unity internet of things for arm 32-bit as well as arm 64-bit processors as well as ai with machine learning.net as well as the.net for apache spark and the tools that you can use therefore are visual studio or visual studio for mac or alternatively visual studio code and the command line interface so let's look at the components of that net some of them at least the entity framework core it is an open source and cross-platform version of the entity framework it serves as object relation model also called orm to connect to the database using the entity model then you have the identity core component which is used to implement the form of authentication and roles and permissions it allows us to implement the login and register feature to the application that we're building as well as mvc core which is an open source mvc project under the net core framework or now.net framework okay so mvc stands for model view controller and we're going to look at mvc in depth in one of the next videos to see what exactly mvc really means and how we can use it then there are a couple more components for that not core or net and there is razer core also known as razer pages it's a project type under the net core framework it's a new type of project where there is no need to write controllers and the controller logic and the routing can be placed in the view page itself which is a different way of building such an application we're going to use mvc so that means we're going to use controllers as well as views as well as models then you have signalr which is a free and open source software library for asp.net that allows server code to send asynchronous notifications to client-side web applications and the library includes server side and client-side javascript components and then you have blazer.net which is an experimental project from microsoft that allows developers to write the client-side code in c-sharp it is composed of reusable components and serves the requirements of single-page applications or spas so if you hear the name spa we're not talking about relaxing in the spa but we're talking about single page applications and it is based on the web assembly concept now let's look at the evolution of.net core so as you can see it started with dot net core 1.0 in 2016 and then versions were improved so it never got past the two so it was 2.2 which was the maximum after that it was basically the next version or the next iteration of the net core version so 2019 3.0 was introduced and also 2019 towards the end 3.1 was introduced which was then the latest version all the way up till now where we have.net five and it was introduced just a week ago so now we're at dot net five you can see there's no core anymore because net five now includes core as well as some other components okay so that's the evolution and with every version of course a couple of changes came for example with net 5 net core will still continue to exist so it's still open source and community oriented on github it's still a cross-platform application it's very high performance it's actually higher in performance so it's so fast they're really focusing on the speed or they were focusing 4.95 on the speed it allows side-by-side installations of different versions small project files are also enabled and it's basically more powerful than net core 3.1 was but you also now have more choice on runtime experiences and then java interoperability will be available on all platforms objective c and swift interoperability will be supported on multiple operation systems and so forth so there are a bunch of new changes for net but because i'm assuming that you are new to asp.net the specific changes aren't that interesting in such a video i highly recommend that you check out the dev blog with all of the changes that came with dot net 5 and there's a great article about that we're going to link that so you can read through this article all right so thanks a lot for your attention let's go to the next video quick pause this video was only made possible because i have a bunch of people buying my courses okay so this video is a third of the complete asp.net course that we prepared and if you want to get that full course definitely check out the link in the description so in that course you're going to become an advanced isp.net core mvc developer you will learn to use.net identity for user control for example to create an admin user role as well as in this case a doctor as well as a patient user role you will learn how to deploy your application to azure which is a cloud solution so you can then make your application available to everyone around the world which will be an important skill to have you will also learn how to send out notifications in via your application so in this case notifications via email to the doctor as well as the patient you will be enabled to build any type of asp.net core mvc application once you're done with the course so you will learn all of the important skills that will enable you to become a real asp.net core developer and apply for jobs and of course we're going to look into the mvc pattern in more detail so you will become even better at using patterns so that's a generally important skill to have whenever applying for a senior developer job all right so now don't waste any more time get the full course the link is in the description down below i'm very excited to welcome you there and that you will get q a support of course so if you have any questions or are stuck you will be helped out and many more perks alright so now let's get back to the video in this video we're going to go ahead and create our project so let's go ahead and open up visual studio 2019 and click on create new project then we need to select asp.net core web application because that's exactly what we want to build so we're going to use this one here using asp.net core web apps and so forth so not this one where it says dotnet framework but we're using that one here which says asp.net core web application once you've selected that click next and now you need to give this project a name so i'm just going to call this project in and out and the location will stay the same and once you selected the location where you want to store it as well as the solution name you can click create once we click create you can see that this new window pops up where i can now use templates so here i'm not going to use the asp.net core 3.1 but i'm going to use asp.net or 5.0 as you can see here i have multiple options now so i can use an empty project template for creating an asp.net core application i can use the core application using core mvc views and controllers a web app using razer pages or the mvc so the model view controller project template and that's the one that i want to use because it's going to help us to create our application very easily because it's going to populate all of the folders and files that we are going to require okay so then once you selected that we could add authentication so you can see here we can change the authentication to individual user accounts work or school accounts as well as windows authentication but i'm just going to use no authentication because we're going to set that up manually later on okay then press ok then you need to make sure that configure for https is enabled because we're going to use that we're going to ignore enable docker support for now because we're not going to need it but one thing that i want to activate is the razer runtime compilation so pick that box because i want to make sure that we don't have to restart our application each time that we make changes to our code base so this will allow us to make some sort of a hot refresh so that's how you could see it right so let's say we make changes to the javascript code or to our code in general and then we want to see the changes directly in our application it will refresh it instead of re running it completely so opening it up from scratch okay so that's going to save us some time and it's also a lot smoother in the process in the past you would need to install a new get package for this but now luckily we can directly choose it from here and visual studio has it incorporated directly which is amazing okay once that is done press create and your project will be created and in the next video we are going to look at all of the files that were created for us alright so now that we have our project let's get started by looking at different files that were automatically generated so you can see if you open your project in the solution explorer that there are a bunch of folders and files that were automatically generated for us so the connected services which we don't use yet then you can see the dependencies that were added so there are a bunch of dependencies that were added by default and we're going to be able to use those and then multiple other folders we're going to look at those step by step in this and the next few videos okay so the first thing that i want to look at is the actual project file so here this is the project file you can just double click on in and out and this should open up or alternatively you can right click on it and edit project file so you can just click on this it will open up this cs project file in and out okay so here you can see that you have a property group in which you have the target framework and in my case it's dotnet 5.0 so this is our target framework that we are using in our application because we had selected dot net 5.0 we this is exactly what we see here so if you use a different version then you will see a different value here then we have another property which is the copy reference assemblies to publish directory which is currently set to false later on we can then add additional properties to the property group what's interesting as well is that you can see that we have this item group here where we have a package reference so we are including the microsoft asp.net core mvc razer runtime compilation which we have enabled when we created the project you might recall this was this little tick box that we selected which allows us to use this hot refresh kind of feature okay and the version is set to 5.0.0 this is just one package that we have added and that was added by default as you saw and we will later on add additional packages such as database packages or email packages and so forth but we're not going to do that manually here directly in this project file but we're going to use the nuget packages feature and that will then automatically populate this file with the right package reference all right so now that we looked at the project file let's look at another important file first before we go to the other files so we're not going to go from top to bottom but we're going to look at them step by step where it really makes sense for you so let's look at the program cs file as you can see here we have a bunch of namespaces that are automatically added but what's more interesting is that this is using a main function here like we would in a console application so you can see it starts off as a console application and then it calls this method called create host builder which is this method that we have established directly inside of the program class and you can see it returns an i host builder so the cool thing is now that this is going to create our web application so it's going to use this web builder to use this startup cs file in order to then build our application and the smart part here is that it uses dependency injection so we're going to look at dependency injection in the next video where we are going to then understand why it is useful and why it is used here because it saves us a lot of hassle along the way it's not that relevant when you're working with super small projects but if you want to have an extendable project that will be growing over time and that is basically well built and uses best practices you will need dependency injection so this create default builder will create a default web host okay so it's going to configure the web host using the default settings therefore it uses a web builder and then it starts up our web app so this console application starts our web application and that's a very powerful thing so basically this here is one line of code written in multiple lines as you can see here with the semicolon at the end okay so let's look at dependency injection before we look at the startup cs file okay so let's look at dependency injection because it's going to be very valuable to understand it in order to understand how our project our default project is built so dependency injection is a technique whereby one object or static method supplies the dependencies of another object a dependency is an object that can be used so it's a service okay so we're going to see how to use those let's look at a particular example so let's look at this example where we don't have dependency injection and we don't use it so let's say we have a website with a couple of pages and we want to use certain services certain functionality let's say the database first so what we would need to do is we would need to go ahead and create an object of the db class in all of those pages in order to use it so let's say we want to add the email functionality later on and we want to use it in those pages as well so then we need to create all of those objects in those pages and we need to manage them so we first need to create them then we need to manage them and potentially also dispose of them so as you can see with three pages this already looks like a mess let's say we make changes to our database or email class and we now have a different definition or we make major changes on how to implement those classes then we have to go to all of those pages and make the individual changes and this is really like a hot mess and you want to avoid that if possible and that's exactly where dependency injection comes in so let's look at this dependency injection example we have the same concept we have email database and the different pages but now we are using a dependency injection container in the middle which is going to take care of the whole mess so it's going to keep everything clean and tidy so it's like our little minimalist right so here we now need to create an i email so an interface of our email class as well as an interface of our database class as well as the classes themselves so now our classes will implement those interfaces and we are going to register the interfaces in the di container so we tell the i container our dependency injection container that iemail is an interface and that email implements this interface so now if our pages need any of the objects it will ask the dependency injection container directly and it will take care of the creation of the individual objects so in the pages we are going to use the interfaces and the dependency injection container is going to do all the magic for us and will take care of the different objects way we can keep everything clean because the pages they don't need to take care of all of the objects that's what the eye container will do and it will take care of the creation the allocation the changes and also the the location so that now means that if you need to ever make changes to your email class or your database class you will only need to make changes in the di container as well instead of doing it in all of those different pages because the di container is taking care of that and of course also the disposing of those objects is going to be taking care of the dependency injection container as well so a lot less stress for ourselves so you can see dependency injection is a very powerful tool that really helps us out and it's a good architecture and a clean architecture as well that basically makes us better developers if we use it and by the way the dependency injection is the fifth principle of solid so if you ever heard of solid solid the five basic principles of object-oriented programming and design by uncle bob which states that a class should depend on abstraction and not upon concretions so in simple terms it shouldn't be hard code so in our case as you can see we are going to do that with dependency injection so it's definitely a good practice to use dependency injection and we're going to see how to do that right because it's done for us already by default and we're going to see how we can apply it manually ourselves as well now that you've seen what dependency injection can do for us let's look at how it is already implemented directly in our project even though we didn't add anything to it so we have this program cs file in which we use the startup with our startup file inside of our create host builder okay so our main method creates the host builder or calls this method and that method then uses startup so what's happening in startup let's look at that startup is this file here the startup cs file and you can also get to it by holding control and clicking on the class name and that will then open up the class definition itself or the whole class file and what you can see here is that we have a constructor then we have an eye configuration property but what's more interesting are these two methods so we have the configure services method as well as the configure method okay so let's look at the configure services method first because this method gets called by the runtime and to configure method as well but first the configure services method is called and then the configure method is called so here you can see that we have an iservice collection which is a collection of services so that means we can have multiple different services and as you can see there is one default service already added here which is this add controllers with views but we're going to add other services later on as well so this is basically our dependency injection container so this configure services because here we can then add our different services that we want to use inside of our application so let's go back to the presentation for that real quick so it's this part here this di container it's this configure services method so we can put all of our services directly inside of the container which is for example email database or in this case controllers with views so add controllers with views okay so that's something that you just need to take into consideration when using dependency injection you need to have your dependency injection container at one point and that's where you then can establish all your services so this is where we're going to implement our services later on we're just going to add them here and then we will be able to use them throughout our application which is a great practice which also makes sure that our application stays easy to maintain and improve and now let's look at the configure method okay so this method is also called by the runtime and what's interesting is that we have two parameters here so we have the application builder as well as their web host environment so the environment basically checks if we are in the development environment or if we are in production environment for example so here we're checking are we in the development environment if that is so then use the developer exception page so for our app so if we have any exceptions then we would display a very specific information about the error that has appeared and then otherwise if we're not in the development environment we know that we are in production for example and then we would go ahead and use the exception handler which sends us to home error so this will then send us to the error page in which we can then define what will be displayed in the error page and then our app uses hsts hsts stands for http strict transport security protocol so how the information is transported by the http requests and now the thing is that using hsts during and development is not really recommended because the hsts settings are highly cacheable by the browser and we want to make sure that we always see the latest changes that we make in our application and then we have the https redirection static files routing and so forth all of these methods that you see here are middleware so we are basically adding middleware to our application so let's look at the dotnet core pipeline so on the left hand side we have the browser for example chrome firefox or whatever browser you can think of and on the right hand side we would have our application it could be on a server or it could be on our pc or whatever okay and then we have this request from the browser to our application and that goes through that pipeline and in that pipeline you can position all of your middleware that you will require for the functionality to work correctly and for the application to display the right information on the browser in the end so the pipeline as i said is made up of middlewares and mvc is one of those middlewares so let's look at that so here we have off for authentication for example then we have the middleware mvc we have another one which is called https redirection and so forth okay so here you can add all of your middleware and that they will influence basically how the whole response will be so if you want to use mvc for your application you need to use that middleware the request will go through all of this different middleware and if it is passed from one middleware to the next one then that one will do its magic and then pass it to the next middleware so it goes to the first middleware for example authentication if authentication says it's fine then it sends it over to the next middleware and the following one and so forth until it comes to the end point and once it reaches the last middleware it's going to return the response to the server so this is basically what happens here because we have all of those middleware to what that we are adding so we first check if we are in environment or not then depending on that we use different middleware so we use the use developer exception page middleware then the exception handler the hsts the http has redirection static files routing authorization and then we could add additional middlewares manually or we will but then in the end we reach the end point so when the request comes in it is passed from one middleware to the next to the next and so on until it reaches the end point okay so let's look at the end point and routing in more depth welcome back in this video i would like to look at this endpoint a little further because we have this here this code but what does it do all right so that's what we're going to look at and therefore we need to look into routing okay so routing is the process through which the application matches the requested url path and executes the related controller and action so now we haven't covered controllers or actions yet but we will do that later on of course so let's look at that there are different routing mechanisms in net core for example controllers razor pages grpc services endpoint enabled middleware as well as delegates and lambdas registered with routing sv.net core controllers use the routing middleware to match the urls of incoming requests and map them with the controller in action so we're going to see what controllers and actions are just a little bit in this video but we're going to really dig deeper throughout the course so roots are defined in the startup code so the startup file that we have just looked at and then we describe how a url path is matched with the action that we're using as well as the routing is used to generate urls for links specifically so we have a certain structure of our application and we want the user to be able to move between different pages and therefore we're going to use routing with the different actions and controllers so let's look at that in this particular example so here in the controller action the url will be appointment slash index so it will match the first action it will map the appointment with the controller name and index with the action name so here on the right hand side you can for example see such an action okay we're inside of a controller where we have an action so we have this appointment which is our controller and then we have the index which is our action and we can have multiple controllers as well as multiple actions so for example we have another action here which is details and there we even have an id so now we will use this link here this url to get to the specific information which is passed this or behind this id so in the second url we have an extra parameter after the action so we have to write the parameter id in action as you can see it's here okay so the url pattern for routing is generated and added to the domain name so we have the domain name for example localhost1337 then we have the controller then the action and then finally the id and the id is optional okay so let's look at this so this is how a link or an url could look like okay so if we look at this particular table here we can see that for example we have the controller home and the action index and the id is no so the page that will be displayed will be home slash index then we only get the controller home in the second line and you can see it still displays home index and null so why is that let's look at our specific example here so the default code that we have we have this endpoint which is our map controller route and we are using the default name here and we have a specific pattern and the pattern is that the controller is set to home by default and the action is set to index by default and we can see that the id is optional because that's why we have this question mark so we don't need to have an id we can simply not use an id but if we don't pass a controller and if we don't pass an action it's just going to use the default which is going to be home slash index okay so if we have the website where we for example would only enter localhost one three three seven we would still get to the page home slash index okay and then for example we have this tool where we have stored our customers as well as our employees so if we enter company slash customer slash one into our browser then we will get controller of company and the action of customer as well as the id of one so whatever our customer with the idea of one would be that's the information that we would then load and display on the page for example and the same goes for companies slash employees slash three so here the controller will be company and the action will be employee the id will be three so this might all look a little confusing because we have not seen controllers or actions in action but no worries we're going to do that and we're going to create our own controllers as well as our own actions throughout the course where we'll then of course see how that works in real life okay so then there are different types of endpoints for example mvc razer pages and signal r are some examples for those endpoints and so generally what will happen is that in use routing there will be defined which technology we are going to use are we going to use razer pages are we going to use mvc or whatever right and then based on that the endpoint will be defined in our case here we are registering an mvc endpoint all right so that's how the whole startup cs file does its magic so you can see it is not that much code but there's a lot going on here so there are services here as we saw this was the dependency injection container then we have the configure method which does all of the middleware application and then in the end we have routing which then takes care of the endpoint so how the link will then be generated for us okay because we need to generate those links so that they can work for our application as well of course and that is done using our endpoints welcome back in this video i would like to cover appsettings.json as well as launch settings.json and finally ww root so let's start with app settings.json so here you can see that this is the json file that we have here it's a json format as you can see as well and here we can add settings to our application for example we will later on add our connection string here so that we can use it throughout the application and that's generally a great spot where you can put all of those settings such as the connection string and you can then just add them in here and then use them everywhere in your application so that's basically what this file is for and then we have launch settings.json and here there are different profiles set up for example so you can see the iis express profile is the one that you would use for development here for example this is one of the profiles that is available to us but then we also have one that we created ourselves not manually but it was generated for us which is the in and out profile and you will also find the different options here the different profiles so in our case iis express as well as in and out are the options that you can use for the profile when testing your application so as you can see in both of our cases the environment variable for our project is set to development so in iis express as well as in our in and out project in both cases the asp.net core environment is set to development alternatively if you don't want to make the changes in json code you can also make them directly on your project level so right click on your project level go to properties and there you will find the different debug options so here profile iis express and the other one the in and out one that is also created you can see that for this one the environment variables are set so for example we are talking about the development environment as well as the hosting startup assemblies is in our case the razer runtime compilations so that's the little checkbox that we checked when we started the application and you can also see the app url which in my case will be localhost 5001 as well as 5000. so you can make the changes here or you can make them directly in the json file itself okay so however you decide now let's look at www root so this folder here it consists of multiple subfolders so for example css json and libraries so here are static files that we can use in our project for example css is there to style our project or our website or basically the looks of our website and application then we have js which stands for javascript so we can add our javascript scripts here as well as third-party libraries such as bootstrap jquery and so forth we can add additional third-party libraries here and then use them so bootstrap is for example there for creating nice little applications very easily using classes jquery is just an extension for javascript which is also super powerful and can really help us in many different cases so what's really interesting is that this w w root is made available by this line here so this is the middleware that we also use in our startup cs which is app.use static files which basically uses those www root files we're not going to add any c-sharp code inside of this folder but we're going to extend our css as well as extend js and then if we want to use images for example we would also put them here or we will also put them here all right so at this point we have seen everything but controllers models and views and they are so important because we are going to do most of our coding in those different files so in those folders basically okay so see you in the next video so now we only have three folders left that we need to look at and that's controllers models and views and if we order them differently then it's models views and controllers so mvc that's where it comes from so we have the model we have the view and the controller and now let's look at the presentation where we can see how they are connected to each other and what the responsibilities of these parts are so the model is responsible for managing the data of the application it contains no business logic and in simple terms models are the entity representation of the database tables that consist of properties of table columns okay so if you look at a data class for example you have all of those different properties such as id name age for example right and each of those properties can also be seen as a table so in a table they would be the columns of that table and that's how you can see your model right and that's how you also use your model because then the model will be basically stored in a table so in the model format the data will be stored so however you define your model that's how the data will be stored in your database that's why the model is so important then we have the view the view is the user interface it contains the markup for example the razer syntax it uses the razer engine to render the view and the view renders the model data passed to it via any controller so we can also write the shop code in the view we can write razer syntax but also c sharp code in the view so we can basically create our own view using c sharp code we're going to see how to do that later on but now we have the m and v now let's look at c because c is controlling everything that's the controller right it controls the communication with the server so it gets the model so it knows how to handle data then it sends it to the view so the view knows what to display and all of that is then sent to the browser so that the browser can display whatever we're trying to display so the controller handles the user interaction and it is responsible for invoking the action based on the route and fetching data from the model to render it on the view so let's look at mvc in general so what is mvc it's a design pattern for developing applications in our case web applications nvc isolates the application logic from the user interface layer and supports the separation of concerns and in mvc architecture the controller receives the http request and then works with the model to get the data and render it on the view okay so the http request comes in the controller gets it and then it knows where to well how to work with the data based on the model and then it knows how to display the data or how to render it based on the view or inside the view and the controller specifies which view to render based on the http request because based on the link that you enter you want to display different data right and that's what the controller takes care of okay so let's look at this graphical representation here so the client which is the browser here in this case sends the request to the server then the server finds the root specified by the browser's url so whatever the url was that was entered and then sends that via the route to the controller the request goes to the specific controller based on the root name so as we saw earlier home slash index for example right that is sent to the controller now the controller knows what it has to do so then the controller communicates with the model to fetch the data the controller then passes that data to the specific view assigned to that action so for example index was the action and then the view populates the model data and then finally the controller has everything he needs to send it back to the server and the server then sends the response to the browser basically displaying the page on the browser so on chrome for example okay so that is the workflow of the mvc architecture and we're going to see how we can build our own controllers our own models as well as our own views in the next few videos all right now let's look at the different classes that we still need to look at for example controllers models and views so in controllers we have this home controller okay so this home controller is very interesting because it has two actions here which are going to be relevant for us so there is a third action here at the bottom which is an error action but i'm just going to ignore that for now we have the index action as well as the privacy action and all of that inside of our home controller so if we would route to home slash index on our website it would lead us to this action so it would call this method here and then it would return a view but what view will it return well it's going to return the view that has exactly the same name as the controller so first of all home this is the folder of the home controller so to speak for the view so basically if you have a home controller you also need to have a home view inside of your views and then we have this home folder in which we have the different actions so for example i'm using this index cs html so c html so it can work with both right c sharp as well as html so here we have the html code which is basically just a header saying welcome and then a paragraph saying learn about and then building web apps with asp.net core and a link to the documentation okay so if we run this application now and we go to home index this page will come up so you can see it says welcome that's the header and then that's the paragraph so now you might wonder where does this home and privacy come from we're going to see that in a minute but first let's focus on this part here all right so now let's go over to privacy so once i click on privacy you can see home slash privacy is open for me so this is the privacy policy page use this page to detail your site's privacy policy where does that come from well you might guessed it so it comes from this privacy cs html and that again is this action here this privacy action so if we go back to our project we can see that if we go to home privacy we come to the privacy page if we go to home index we are set to our welcome page to our index page i could also have just clicked on this home button here at the top which sets me back to the home page there is no url here at the top you can see except for of course our base url which is localhost in my case 44320 in your case it might be a different localhost but basically we see that this is the default why is there nothing added here so why don't we have any specifics in terms of controller slash action so here controller action okay so controller would be home action would be index as we have seen if i go to or in this case privacy controller will be home privacy will be the action so where does that come from well if we look at our startup cs we can see that the controller is set to home by default and the action is set to index by default so by default if we just go to the localhost website without any additional information we are going to get to this index page because that's the home controller as well as the index action and we can even test that so let's add a breakpoint here and also in privacy while we're at it okay so let's add to breakpoints and let's now debug our application you can see that it is loading but nothing's happening so let's continue and we see we are on our home page now let's go to privacy you can see now we are at this line here return view and let's continue as well and it sends us over to the privacy policy okay so this is where the code goes and which code is executed and then basically it sends it over to our nxcs html so let's just add a hello world in here hello world let's run it again and this will be in the index page then we will see that our code actually does what we wanted to do of course we don't have any id or anything like that yet and let me continue because otherwise it's not going to load correctly but overall you can see that basically our code does what we wanted to do so it says hello world inside of welcome so as you see we're not using any ids yet but that's fine for now we are using the controller as well as action and you can see hello world is now in fact being displayed based on whatever we have added in code in our index c-sharp html file so now at this point only models are missing and the shared folders that we're going to look at in a minute but the models well in our case we have the error view model which has a request id and the show request id but if we ever want to add tables to our application that's where we would then create a new model inside of our models folder and we're going to of course do that in this course later on all right now let's look at this shared folder because we have this layout c-sharp html file and it is a shared file so let's look at it there is a lot going on here as you can see so we have a lot of code and that is our html code we have the head tag with all of the style sheets that are used then we have the body with all of the code that we want to display or the html that we want to display so this is basically what you see inside of your application if you run it at the top and at the bottom so it's this header as well as the footer okay so here and i should get rid of those breakpoints here and then continue so now you can see that it's this header here as well as this footer at the bottom so that's what happens inside of our layout cshtml so a lot of different code even some javascript that is used here so for example jquery as well as the bootstrap javascript and so forth so the idea behind the shared folder is that this is something that you want to use throughout your application so that you for example want to use all over your app for example you always want to have your header in your website or in your web application as well as the footer no matter which page you are that's why you're using the shared folders so this is the layout that is basically surrounding whatever you add via your views for example our home view this is just a partial view that's why we have this underscore here so underscore layout the partial view because it's just a part of a view it's not a complete view and it is the default master page for our application so how does our body come then in for example our home page or our privacy page well let's reduce the header and reduce the footer and you can see what is left is our div container which is our render body so here it's going to render the body based on which view we need to display based on routing okay so based on whatever url is entered in our browser then you have this additional file here which is a partial view this validation scripts partial which for now just has a reference to a couple of javascript files and then we have error.cshtml which is a default view that we have for our development process so this is just for us to see the error in a certain way and this helps us to understand our error a little better and then we have a couple more files here for example the view import cs html so the idea behind this file is to provide a mechanism to make directives available to razer pages globally so that you don't have to add them to the pages individually and what you can see here is that it is using our in and out as well as the models of our in and out and then it has a tag helper so it adds this particular tag helper which is the one from asp.net core and there are multiple different types of directives so this is one directive but there are different type of directives such as add namespace add inject add model and so forth so this add tag helper adds the stack helpers and these tag helpers are something that you can see here so let's open the header once again so what these do is they help us with binding so we are using html code but we are binding using c sharp tag helpers is a concept that was already used by react or angular and it was very successful that's why they decided to also incorporate it in to asp.net so in case you want to add any additional tag helpers that's where you would do it so in view imports all right now let's look at view start which is the last file that we need to look at so in view start you see there's not much happening but even though it's cshtml with this add and the brackets we are saying that this is c sharpcode so we are just setting the layout to be the underscore layout file which is our underscore layout cshtml file so we're just saying that the master page for our application is going to be the underscore layout file so this one here this shared file and you can of course make changes to this code you can make it more complex you could add your own complex logic if you wanted to but for now we're just going to keep it simple and just going to keep it as our layout file all right so that's it for the theoretical part now we're going to do a lot more hands-on we're going to see how to manipulate all of the things that we have basically seen in theory so far and to take advantage of all of the functionality that allows us to build amazing web apps welcome to section three in this video we are going to specifically look at controllers which are an important part of mvc because it's the c in mvc and we're going to see how controllers work we're going to create our own controllers then we're going to look at routing and the different types of routing that there are as well as we're going to see what actions are and how we can run actions ourselves execute those actions and adjust them accordingly to what we need them to do all right so let's get started see you in the next video now that you know all of the files that are in our project by default let's go ahead and create our own controller and in order to do so you can just hover over controllers here and right click and then hover over add and here you can create a new controller so basically the first option in my case let's go ahead and select that and here you can see that we can select multiple options for example an mvc controller an nvc view razer components and so forth but we are going to focus on the mvc controller now we could have read and write actions create for us by default but we're just going to use the empty nvc controller so that we can build everything from scratch okay so select that click add and this will now open a new window this will add a new item called mvc controllermd that's the one that we selected and now you should give this a name so as you can see it's already homecontroller1.cs that's the default name but i want to change that i'm going to call that one appointment controller okay so it will be called appointment and then controller whatever comes before controller is up to you but you should definitely have that controller keyword in here because this then is acknowledged as a controller so you definitely need to make sure that this keyword is in there all right so let's add that and once it's there let's look at it so you can see it's a class which inherits from controller and it's called appointment controller then we have this index method which will return an action result so what is the action result in our case well it's the view so it's returning a view for us but now let's change that up a little bit we're going to return views later on but we are going to for now adjust this code so that it will return the date time okay so let me comment that out and instead i'm going to create a new variable today's date which will be date time dot now dot to short date string okay so i want this to be you easily readable and then it of course needs to return something this method as you can see here index is not happy because it's not returning an i action result so let's return something and i'm going to return an okay result which is an object that produces an empty microsoft asp.net core http status code okay so we're creating a status code the idea behind this is to just see that what we are doing is having an impact on our software okay and i'm just going to pass the object and in this case it will be our string which is today's date and now let's run this and see what we will get from it by default we are directly on our home page which is in the end this extra page that we had right this one here this home controller but what we want is to display this i action result inside of the appointment controller so in order to get there we need to change the link i'm going to show you what we need to enter so here because we want to go to the appointment controller i need to enter a point mint and then i want to run a particular action in this case the index action so i'm going to enter index and once i enter those values you can see that it displays the current date which is in my case the 8th of december in so you can see we can access actions by using the controller name and then the action name so this is called routing and we're going to look into routing a little more in the next few videos but for now it was just important for me to show you how you can display your own code in your browser using a controller quick pause this video was only made possible because i have a bunch of people buying my courses okay so this video is a third of the complete asp.net course that we prepared and if you want to get that full course definitely check out the link in the description so in that course you're going to become an advanced isp.net core mvc developer you will learn to use dotnet identity for user control for example to create an admin user role as well as in this case a doctor as well as a patient user role you will learn how to deploy your application to azure which is a cloud solution so you can then make your application available to everyone around the world which will be an important skill to have you will also learn how to send out notifications it via your applications in this case notifications via email to the doctor as well as the patient you will be enabled to build any type of asp.net core mvc application once you're done with the course so you will learn all of the important skills that will enable you to become a real asp.net core developer and apply for jobs and of course we're going to look into the mvc pattern in more detail so you will become even better at using patterns so that's a generally important skill to have whenever applying for a senior developer job all right so now don't waste any more time get the full course the link is in the description down below i'm very excited to welcome you there and you will get q a support of course so if you have any questions or are stuck you will be helped out and many more perks all right so now let's get back to the video alright so now that you have seen how to create a controller we also need to create a view for that controller okay so we want to have an extra view for our i action result index okay so here as you see it returned a view before we made any changes even though it didn't have a view that it would return so let's go ahead and add that view ourselves so i'm going to make sure that return view is the active code in our index method again and now i right click on i action result in order to add a view now the cool thing is that this will then create the extra view inside of the right folder for me because if you look at our solution explorer you can see that we have a home controller and we have a home folder inside of views and that's exactly what we need so we need to have the same thing for our appointment controller now we could of course go ahead and create a folder manually called appointment and then we could go ahead and create the view inside of that but the easier way is really to just do it as i show you here so in this case i'm going to select the razor view all right so let's add that and this will then open up this little window in which i can give this view a name so i'm just going to call this view index because that's also the name of my action here which is called index so this is the action method and we called it index and then here you can select the template so there are multiple different templates available create delete details edit empty without model so for now we don't have any model that's why i'm just going to select empty in this case and then i can just go ahead and click add and the rest will be done for us as you can see i need to install nuget packages this will take a couple of seconds because it's installing a microsoft nuget package in your case this might be the same except you already have installed it and once it is done it opens this index.cshtml so it's a c-sharp html file so it's combining c-sharp with html so here is our c-sharp code with the add and the brackets and then inside of that we have this view data at the position of title is called index and here is our html code so this is what will be displayed if we open this page okay so index and i'm going to call this index 101 okay so let me change that and let me run my application and go back to appointment so the same page that we had before so here i'm going to appointment and index so it's this one here and you can see it's displaying index 101 so now we have created our own view now you could go ahead and modify this view to your liking so that it will display whatever you need from it so this is basically how you can create a view you can see that it is connected to our appointment controller because now we have this appointment folder in which we have this index cshtml you can see we had the same file name inside of home but that was this one here which said okay let me display this hello world that we had changed before where you can learn about asp.net core with an extra link and so forth but now we have our own appointment folder that we just created with our index file to which we can get via our appointment controller with this action here because it returns now a view which view is it going to return it's going to return the view which has the same name as this action so index as well as is in the same folder as this controller so appointment so it's going to open up this index cshtml in the next video we are going to look at routing so we understand a little better how this link comes about that we are using that we have entered into our browser in order to open this view all right so let's look at routing in mvc core because routing is the process through which the application matches the requested url path and executes the related controller in action so we have seen what controllers are and we've seen what actions are but now let's look at routing because routing takes care of actually then displaying the right content on the web page once the right link is entered right so that's the idea behind this routing let's look at this so in dot net core there are several ways to configure routing in any application for example controllers as we have done it then there is the way of razer pages grpc services endpoint enabled middleware as well as delegates and lambdas registered with routing and we're going to focus on the controller's part so the other terms are just for completion here that you are aware of the different ways of routing mechanisms okay so an asp.net core controllers use the routing middleware to match the urls of incoming requests and map them with the controller and action okay so you have this link the url that you're entering and then asp.net core controllers use then this routing middleware which is just one of the middlewares that we're using in asp.net core right and this one then takes care of what it should display basically roots are defined in the startup code so we saw the startup file earlier we needed to make sure that routing is enabled and routine describes how url paths are matched with the action so we also saw an action in our case the action was index routing is used to generate urls for links let's look at a particular example here for this to make a little more sense so here in the controller action the url is appointment slash index and it will match with the first action it will map the appointment with the controller name and index with the action name so you can see here on the right hand side we have the appointment which is our controller name and then we have index which is our action name so this here is an action because it returns an i action result and then we have another example so let's look at part two in the second url we have appointment slash details slash one so in this case it will be public action result details with an id that we can pass which is an integer in our case the code will be super basic it will just return okay you have entered id so in this case it will just return a result code this is just for simplicity purpose but basically once you enter this id so in the url it will then display the code that fits to this url and specifically it will display you have entered one so let's test this let's just use this code as you can see here we have details as the action name and then we have a parameter called id and now we can go ahead and return our result code once again so this is really just for testing purposes to make it super super simple so we're just saying you have entered id and then we display the id that was entered and now if we check that in our browser you can see well actually we can get rid of this to make it look a little better but basically you can see you entered id one so now let me change that let me enter one three three seven and you can see it displays id1337 so now of course the changes in code that i just made didn't have an impact yet because i didn't rerun my application but basically you can see now it works totally fine and displays the id so now routing is in full action here the mechanism works as follows the url pattern for routing is generated and added to the domain name so the domain name could be something like localhost1337 and then comes the controller name as well as the action name and then finally the id but the id can be optional okay so this could be a url that you would have so controller name action id so now let's look at this example here so we have the url which is home index so localhost and home index this will send us to the controller called home and to the action called index you can see id is null so we didn't enter an id so that's fine it's just going to send us to the index page now in the second example we have home once again but we didn't enter an index but index is the default action so it's going to send us over to home and then index id is null once again so it doesn't really matter so that's totally fine and then we have company customer one for example we have the company name the customer action as well as the id and the ids one so that's going to be the url that was generated for us so it's going to send us the details about the customer with the id one let's say we're a company and we have a bunch of customers and that would be the first of them and then let's say we want to access the employee information so that would be company employee and then the one with id3 so it will display the controller company in there it will run the employee action and it will pass three to that action to do its magic so for example access the data from the database and display information about employee three so whatever information that should be displayed on this page okay so this is the whole idea of the routing now there are different types of endpoints and we looked at the mvc part there are razor pages as endpoints and finally signal r so what are endpoints endpoints are the apps units of executable request handling code endpoints are defined in the app and configured when the app starts so the endpoint matching process can extract values from the requested url and provide those values for request processing so using endpoint information from the app rooting is also able to generate urls that map to endpoints so these are some examples of endpoints that we can use now let's look at different types of routing because there are multiple different types and we're going to look into those with a little more details in the next few videos so conventional based routing so in conventional base routing the route is determined based on the rules defined in the root templates which will map the incoming requests for example the urls two controllers and their action methods an asp.net core mvc application the convention based routes are defined within the configure method of the startup cs file okay so the startup cs file you might recall this one here that's where our routing is used and the endpoints middleware is also used so these are where they are defined okay so we have routing as a middleware we have authorization endpoints as middlewares and here we have the map controller root which is defined so controller home is the default so it asks for a controller first then it takes the action and then it takes the id you can also see that the controller is by default set to home the action is by default set to index and the id is optional that's why we have this question mark afterwards and then we have attribute based routing so the route is determined based on the attributes configured at the controller level or the action method level so we can use both so the conventional waste routing as well as the attribute based routing in a single application and we're going to look at those two different types later in the course all right so let's look at convention based routing so by default in mvc core applications conventional routing is enabled the code for it is written in the startup.cs file we looked at it before twice already so let's look at it from a routing point of view from an endpoint point of view so here the first path segment is called controller equals home so the default value is set to home and we pass in the controller so this maps the controller name then the second segment maps the action name so whatever we enter as the action that will be mapped to the action name and the default is set to index and then we have the third segment which is the id and this is used for an optional id so the question mark makes this id optional which means you don't need to have an id for this endpoint to work now let's look at dedicated conventional routing so you can see here we have our use endpoints once again which we had before but we only had our map controller root with the default pattern so that we used before now let's create our own for let's say a blog so in case of a blog we have this pattern of blog slash article okay so now we will so in this case the block root in the shown image is called dedicated conventional root because it uses conventional routing but it's dedicated to the controller blog okay so to this specific controller called blog and they can have the default values control the block as well as action article so it will then send the person to blog slash article the only url path that match the block root r however slash block slash block slash article and slash block slash any string so let's say you have any type of name for an article for example so these are the only paths that will work for this endpoint so let's look at output of block dedicated conventional route so here we create a controller named block and in there we create a new action which is called article so in our case it's just going to return our ok once again to make it simple right so it's going to display our response code which will just say action of block controller is called so if you do this you will find that all the urls will hit that single action article so it doesn't matter which one you enter so if you enter blog slash blog article slash blog article slash mvc core so whatever you enter there it will always send over to this particular action and it will run this action and therefore will return only this string here so without a dedicated conventional route when we type just the controller name in the url it hits the index action of the controller by default but not in the dedicated conventional route so you have multiple ways of doing your routing so these are just two different ways and we're going to look at the third one in the next video so see you there let's look at another type of routing so attribute based routine which can be done by setting up attributes at the controller level or the action level so this time not directly in the startup.cs file but in the controller itself so let's look at it we can use the shop attributes on our controller classes and on the methods internally to define the routes it's an alternative to convention based routing which we have seen in the last video and the video before so roots are evaluated in the order that they appear so the order that you register them in is relevant still it is quite common to map multiple routes particularly if you want to have different parameters in the url or if you want to have different literals in that url so let's look at a particular example here so here you can see the roots are mentioned on the action with the attribute root so here we have the root block with the root block index with the brood block index slash id all of them will send over to this on actual name all right so this action will be called with the urls like slash blog or slash block index or slash block index 1 so either of them will call this particular action so the third parameter is optional so it's written with the question mark so id question mark which will make this optional but then we can also have it on the controller level so here the attributes are decorated on the controller level so now we have to write something like admin contact to call this controller okay so this will then send us over to that controller but as you see we don't have any contact page here but we could define that for example so each action method is defined with the custom action name with the root attribute so something like slash main or details slash id because these are the routes that we have used here right so now let's look at the url entries here so something like admin contact main will invoke the index method so action main will be called when we call admin contact details however it's invoking the some action name action so here in this action the id is optional so it's going to call action details called so you can see if we enter details slash an optional id it will call the sum action name and if we just call main it will call the index for example all right so now you have seen different types of routing all right so we have seen what controllers are we have seen what actions are but now let's look into actions a little more so controller actions are the methods used to handle the http request and to act accordingly to return a view or other result so actions are the methods in controller classes that are responsible for returning the view or for example json data any public method on a controller type is an action so whenever you create a new public method inside of a controller it will be an action that can be used and then action result is a result of action methods or return types of action methods so as we've seen the i action result interface which basically is a result of an action method or return type of an action method then action methods cannot be overloaded in the controller so no overload and controllers directly action methods cannot be aesthetic so these are the basic details about actions so what you need to consider when creating actions so i action result defines a contract that represents the results of an action method i action result and action result work as containers for other actual results i action result is an interface and action result is an abstract class from which different action results inherit so in short action results are classes which represent things the client is supposed to do as a result of the controller action they may need to get a file or redirect or any of a myriad of things some action results merely return an http status code and in short the most common things the client might want to do after calling controller action are represented as action results there are five major sets of action results the status code result status code with object result the redirect result a file result as well as content results so you can see that there are multiple different types of results and we already have resulted with the status code for example in one of the videos where you saw that we would just display the status code instead of a view if we are displaying a view then we're displaying content or even specifically a file so here you can see the different action result sets we're going to look into them a little more later on but first of all we're going to look at actual parameters so see in the next video when we're talking about actions we also need to look at our parameters so passing parameters to actions is an essential part of building a.net core web application as well as apis so we're going to look at the different action parameter types in this video so let's go ahead and look at the overview first so there are parameters which you can pass as part of an url then you can pass parameters with a query string you can pass parameters with headers as well as pass them with the request body and finally you can pass parameters in a form we're going to look at the different examples here step by step so let's look at passing parameters to a url so when passing a parameter in a url we need to define a routing that would contain a parameter so notice in this case that the id is part of the routing so the valid url would be something like get slash one because we have this action called get and we could use something like get slash one because of this route that we are using here right here at the top and then we can also use the from root attribute that you can find here before the variable type but this is only to emphasize however because it works by default without this from root in the same way so this is going to basically give you the same result but this here is more explicit so you're specifically saying that you want to get the id from root all right now let's look at how to pass parameters with the query string so this is a very common method for passing additional parameters because it does not require for us to change routing so it's also backward compatible so as you can see here we have this url here at the top and what it does is it calls the appointment controller with get some data with this action that we have here and then we pass after the question mark values okay so we're passing the value from the query so we're saying okay get this value from the query so whatever the user has entered as url get that value from there so in this case we're getting values as nvc empty space core so this percent 20 is like an empty space or it behaves like an empty space but this is just how you can pass empty spaces inside of a url so what we're doing is we're getting the url and then we are using it in our get some data action and for simplicity we're just returning a result code again saying the value and values is from query string so we're getting the value and we see core which is what we have after the equal sign and we see percent 20 core so this is a way to pass the parameters via query string now let's look at the headers so there is a way to pass parameters via headers and here we are using the from header keyword so passing parameters and requests header are less popular but also widely used and they're super powerful as well it doesn't show in a url so it's less noticeable by the user so this would make sense for example if you want to pass credentials or the token id to authenticate a use of an api or something like that where the user shouldn't see those values in the url they should only be passed via the header so in this case we're using postman which is a tool to get this action call and we have this header which contains a key value pair where you have the key of parent request id and the value of 12. so in our code what we're using is the from header keyword here for our parameter parent request id and then we return once again in this case not a view but just a request code where we say got a header with the parent request id and then we use the parent request id so here it's not inside of the url where we pass this value of 12 but we get it from the header so that's another way to use it cleanly then we can also pass parameters in a request body so here the most common way to pass the data is to include it in the request body okay so here we have the post with a request body so this looks more like a object so we can really use an object here and we can add a header content type with value for example application slash json in our case here and inform the receiver how to interpret this body because here we're getting it from a request body and we wanted to be of type appointment so you could already imagine an appointment has a name a description a date and duration and that's what we get this from okay so we use the from body attribute to indicate that the appointment will be taken from the request body so when you're creating a post request then you would pass in the request body and that can then be used as a parameter for our code okay now let's look at how to pass parameters in a form so sending content in a form is not very common but it's the best solution if you want to upload a file so let's look at this example that we have here so we have this action called say file which has two parameters the file name which we get from the form directly as well as the high form file which you also get from the form so the file itself therefore we use this interface called iform file which just helps us to handle files and it's just making our life a lot easier when it comes to handling files so here we have this post with the body which gives us information about the file name so let's say the profile picture and then the file itself let's say the profile picture itself so the image that you have as a jpeg format or as a png format saved for example on your pc okay and this is how you can pass it in a form and this method doesn't send a file but it will successfully receive a file from the request okay so we're not sending files this way but we're actually just receiving them this way okay and iphone file is the interface that makes it easier for us okay so these were the different ways to pass parameters to our actions and this is going to help us out to basically create our applications in the future so whenever you need to pass information now you know you have multiple different ways of passing the details to your action to then accordingly display the right information to the user all right so in this video we're going to look at action results and asp.net core has a set of action results which are intended to facilitate the creation and formatting of response data so you can get responses and they can be in different formats and in this video we're going to look at the different types of formats you don't need to memorize the different types of formats you just need to know that there are plenty of them and you can just see which ones you can expect in this video okay so let's have a look at them so what are action results well action results are classes which represent things the client is supposed to do as a result of the controller action okay so our controller runs an action and then we want to get a result from that they may need to get a file or redirect or any of a myriad of things some action results merely return an http status code and we're going to see many different types of these action results in the next part of the video okay so first of all a little bit of a presentation but then afterwards we're going back to visual studio to see those different code samples okay in short the most common things the client might want to do after calling a controller action are represented as action results of course once you are entering something into your browser you want to see something right so you want to have a result and that's basically what we do once we call a controller action it should display something for us right so let's look at the types of action results status code results are one type status codes with object results so where you also get an object then redirect results where you basically are redirected to a different page as well as file results where you get a file and then finally content results and i'd say let's look at all of those in visual studio instead of looking at them in this presentation okay so there we are and the simplest type of action results are defined by asp.net core mvc and these are the status quo results so let's look at those so first of all so we have this okay result and we saw it before where we used the okay result where we just entered a string in here and displayed it once we called this action so in this case we called it ok result but this is basically the result type it will give us so when it's executed it will produce an empty status 200 okay response 200 okay means everything worked fine so this was the status code of 200 let's look at the status code of 201 which is a response with a location header okay so this indicates the request has been fulfilled and has resulted in one or more new resources being created so the created result can be achieved by using the created method where we have the url as well as the new item that is created so in our case it's a new item that was created from this result so it's just one resource in our case but it could be multiple resources okay and then there is the 204 status code which just says okay no content so there is basically no content on this page then we have the action result which is the bad request result an object result when executed will produce a bad request response it indicates a bad request by the user it does not take any argument so bad request 400 this basically indicates a bad request by the user okay and then we have the unauthorized result which returns the 401 status code its difference to the challenge result is that it just returns a status code and doesn't do anything else okay in contrast with this counterpart that has many options for redirecting the user and options related to asp.net core identity so unauthorized result so when we're trying to access something let's say without a token or without being authorized for whatever page we try to access as the current user and then probably the most common one is the 404 response which basically is the not found result so we didn't find the page and now we get this not found and then the final status code result that we're looking at is the unsupported media type result so this action result returns a 415 status code of 415 which means the server cannot continue to process the request with the given payload so it's doing it by inspecting the content type or the content coding of the current request or inspecting the incoming data directly so that's our unsupported media type result then we have the status codes with an object result so when executed performs content negotiation formats the entity body and will produce a status 200 okay response if negotiation and formatting succeeded okay so we we are creating a result here which is the new okay object result with a message saying 200 okay and also passing the current date or the date time now and then we are passing that result so this is what it will return then you have the created add action result that returns a created 201 response with a location header okay so it just returns an object of created action result where as you can see if once you hover over it you pass in the action name the controller name as well as the object root values and the object value okay so that's what we're doing here this is the object root value which is empty and the object itself the object value and then we're returning this result then we have the bad request result but this time with an object so bad request object result where we have a bad request but at the same time we're also passing an object so in this case this object here with a message as well as the current date and then we have the not found object result which is similar to the not found result but again it just passes an object as well so you can pass an object with the 404 response okay let's look at the redirect results so here we have the redirect result where we basically just pass in a url to which we want to redirect the user if that result is triggered in this case the permanent 301 property is set to false then we have the local redirect result which redirects to a specific target on your own page so it's not redirecting to an external page such as google but on the own software so it's redirecting to a different target because for some reason the current page doesn't load or doesn't work then this local redirect result can be executed and then you have the redirect to action result which can redirect us to a specific action so here you can see we're passing when you hover over it you can see it so it's the action name as well as the controller name so inside of appointment i'm passing the action target as well so i want to get to that action with their controller appointment in this particular case so that's the redirect to action result then we have the file result so in this case i'm using a file result to return a file in my case it's going to be a pdf so here we're returning a file so here this is the path of the file and this is the type of the file so it's an application file which is a pdf then we have the file content result in this case we return the file as an array of bytes as you see in the file content action result so very similar but here we're actually well we have this pdf bytes which reads all of the bytes from the pdf and then returns the pdf bytes that we prepared as a pdf and then we have the virtual file result so use it if you want to read a file from a virtual address and return it so here we are reading the file from a virtual address and again we're passing the type so paths given to virtual file result are relative so to the ww root folder so if you look at our solution explorer it's inside of this www root folder so we would have an extra folder here let's say pdfs or whatever and there we put put this pdf and we would make it available through that then physical file result is to read a file from a physical address to return it so it's not a virtual address but it's a physical address so that's the difference here and if you look at it you need to pass in the file name again and content type so here i get the file name from i hosting environment content root path with my path which is again ww root downloads and then pdf sample so you would have to have a downloads folder or you could call a pdf folder or however you want to call this folder and you will have to have it available in your ww root for this to work and then we have the content result so in this case we have the index which we have seen before right we have seen our index action result where we return a view so it renders a specified view to the response stream and displays that view then then we have the partial view result where we are just rendering a specified partial view to the response stream so in our case earlier it could have been the header and the footer for example and then we have a json result so if you want to pass in a json json stands for javascript object notation result so it has a specific format so you can just use json here with a new json object that you're passing where for example the messages this is a json result and then you have the property date which would be date time now okay and then we have finally the content result so it displays the response stream without requiring a view so here we are directly passing the content here's the content result message so this could also be html code that you're using if you want this to look a little more complex but you're basically returning a content directly without returning it as a view as we would do in our case where we actually have these specific views such as index privacy and so forth all right so this was an overview and as i stated earlier you don't need to memorize those things it's just good if you know that they are there so they exist and today is how the different types of result types that you can expect from an action and you can use those in your project quick pause this video was only made possible because i have a bunch of people buying my courses okay so this video is a third of the complete asp.net course that we prepared and if you want to get that full course definitely check out the link in the description so in that course you're going to become an advanced isp.net core mvc developer you will learn to use.net identity for user control for example to create an admin user role as well as in this case a doctor as well as a patient user role you will learn how to deploy your application to azure which is a cloud solution so you can then make your application available to everyone around the world which will be an important skill to have you will also learn how to send out notifications via your applications in this case notifications via email to the doctor as well as the patient you will be enabled to build any type of asp.net core mvc application once you're done with the course so you will learn all of the important skills that will enable you to become a real asp.net core developer and apply for jobs and of course we're going to look into the mvc pattern in more detail so you will become even better at using patterns so that's a generally important skill to have whenever applying for a senior developer job all right so now don't waste any more time get the full course the link is in the description down below i'm very excited to welcome you there and that you will get q a support of course so if you have any questions or are stuck you will be helped out and many more perks all right so now let's get back to the video welcome to section 4. in this section we're going to look at models so how we can create our models what we need to consider when creating them then we're going to look at databases and how to set up a database in sql server so that we can store our data in that database we're going to see how to create tables as well as to update tables and migrate them with new versions of our table so if we want to ever change for example the amount of columns that we have then we're going to see how to apply the crude operations because we definitely need to create read update and delete data whenever we're building any type of cloud-based solution so that's going to be very important and then of course we're going to also see how to create a page in which we can run all of these operations and you will have a couple of challenges that will help you to prove that you have understood what you've learned all right so let's get started so we have seen an overview of what mvc stands for right what it is model view and controller so we have seen what controllers are and we covered them rather extensively in the last few videos now it's time to look at models we have seen views before and we are going to look into views a little more once we have set up our model and we can actually display something meaningful but for now let's look at this m in mvc which stands for model and is basically a normal c sharp class so let's look at what this model does so a model represents the shape of the data so basically all of the properties inside of a model will be the columns in your database model represents the main specific data and business logic in mvc architecture it maintains the data of the application so as i said if you have one model class that will for example have three properties each of those properties will be a column so id will be column one then let's say name will be column two and last name could be column two three for example all right so then model objects retrieve and restore model state in the persistent store like a database so we're going to use a database in our case but if you want to use a different way of persist your data that's fine but we're focusing on databases here okay so the model class holds data in public properties and all the model classes reside in the model folder in our mvc structure okay so we have these different folders right one of them was the controllers folder then we have the views folder and we also have this models folder in which only one class was there by default which was this error model again we're creating our own models in the next few minutes okay so in order to create a model just go over to your models folder right click on it click add and then add a new class and then you can give this class a name for example if you wanted to have a student model you could just use the student dot cs name and then you could go ahead and create these properties that you have here so for example the student id student name as well as the h or you could also call it student age if you wanted to so this is just an example of how to create a model let's go back to our project therefore and i called this project in and out basically it means what came in and what again went out so the idea was to make this little lent versus borrow application right super simple where you just can enter whatever you borrowed from someone or wherever you landed something to someone okay so the difference between borrow and lent so borrow is if you take something from another person and lent is if you give something to another person so we have a borrower as well as a lender and i want to know who was the borrower who was the lender what was lended and the id okay and maybe also you could add a date for example if you wanted to but let's keep it simple for now let's go ahead and start with the model so here i have this folder called models and as you can see we only have this arrow view model but we're going to create our own model now so let's add a new class and this will be a default c-sharp class so i'm just going to call this item okay so it will be an item that was borrowed or landed okay so here we need to add the properties so i'm just going to enter prop and here i can now give this property a type as well as a name so i'm going to start with id id is very important because id is the identifier of every single item so every single item should be unique therefore it needs to have a unique identifier and if you use id here this will be our default identifier so the id in the database would be usually the primary key so now you need to tell the database that this is the primary key now you can go ahead and add the annotation here saying that it's a key so in my case it's not there it's complaining that it doesn't exist that is because i need to import this namespace so it's the data annotations.keynamespace so let's add that so you can either do it this way or you can of course also add that to your namespaces up there so using that namespace and now we can go ahead and use our key now the cool thing is the id name is so specific that it already is considered the primary key so we don't even need to take care of that the primary key is the identifiable value for an entry in your database and it is also going to be automatically incremented every single time that the new entry in the table is made so you don't need to pass in the id manually it will be created for you depending on how many entries there are already in your table it will just add one to it and will create a new entry so let's say you have your very first entry it will have the id of zero the second entry into your database will have an id of one then third one will have an id of two and so forth now as i said you could have just let this out but i want to be specific and i want to say okay this is going to be my primary key property all right now you could have called this for example item id that would have been fine as well but by default you can call it just id okay so that's our first property then i want to have another property it will be of type string and this will be the borrower so who was the person who borrowed something from someone else all right and that is already our first model i will extend that later on with the lender but i just want to first show you how you can create a table out of that or how you can basically create a database with a table out of that and then later on update that table with the new column that we're going to add later on okay that's the whole idea behind me not creating the lender property straight away all right so i'd say let's go to the next video all right so what we started with was the code first approach and we didn't even know that it existed or maybe you did but i didn't even express it specifically so let's look at what the code first approach means and why it makes sense to use it so the code first approach with ef and ef stands for entity framework code first is a very popular approach and has full control over the code rather than the database activity so instead of creating the database first and then creating the columns inside of the database and all of that we are doing all of that in code so we don't even need to touch the database specifically using sql server we're going to do that to see if our database actually works and if we can actually see the data represented there but we're not going to do it manually inside of the code and we're not going to add entries using sql code for example okay so use this approach when you do not have an existing database for your application and in the code first approach you start writing your entities so domain classes and context classes first and and then create database from these classes using migration commands and that's also what we are going to do okay developers who follow the domain driven design so the triple d principles prefer to begin with coding their domain classes first and then generating the database required to persist the data later and that's also what we're going to do so let's look at the flow here the workflow so we create or modify the domain classes then we configure the domain classes and we have an automated or code based migration which then migrates the database so what is migration well when developing applications the model is likely to change often as new requirements come to light so that's exactly what the situation is that we have now so we have our model which we called item and then in there we had the id as well as the borrower but we don't know who was the lender right so we might need to change that later on and then if we later decide to also add a date at which the item was landed then we would have to add another column to our database and then maybe we decided later on to also add a deadline at which point the item needed to be back or needs to be back we can add another column to the database so as you can see we constantly will need to update our model and this means that our database also needs to be adjusted it needs to understand that there is a new way of having to display the data or store the data and that's where migration comes into play because migration allows us to basically migrate our versions of databases okay so the database needs to be kept in sync with the model otherwise our code won't work and our program will not work correctly so these migration features enable you to make changes to your code and then propagate those changes to your database schema so that it works correctly as well so migration is a way to keep the database schema in sync with the entity framework core model by preserving data okay so we have our database and then we have our model and they need to be in sync with each other so that it works correctly and now the cool thing is that migrations are enabled by default in entity framework core so we are going to need to install that entity framework core and we're going to do that using nuget packages so entity framework migrations are a set of commands which you can execute in the new get package manager console or in the dotnet command line interface so there are two different ways to do it and let's look at the different commands that we need to use so if we want to create a migration by adding a migration snapshot we need to use the pmc command add minus migration and then the migration name and if we're using dotnet cli the command will be add and then directly the migration name so then if you want to remove the last migration snapshot we can just use remove minus migration in the pmc command or remove in the net cli command as well as if we want to update the database schema based on the last migration snapshot we will just use the update minus database and a pmc command as well as just update in the net command and then finally if we want to generate a sql script using all the migration snapshots we would just enter script minus migration for the pmc command or script for the dot nut cli command in order to even use these commands we are going to need to install a new get package using the nuget package manager and that's what we're going to do in the next video so see you there alright so now i would like to create a table in my database using this model that we have created in order to do so i need to create a connection string and in order to create a connection string that is going to work i need to know where to connect to right so to which database to connect to so i'm going to show you the different connections that you can use here so you need to make sure that you have sql server management studio installed for this and then once you want to connect to your server you have multiple options here so localdb is one of the options and the other one will just be a dot so you can use either way so i'm just going to connect to the server name dot and then inside of databases that's where i can then go ahead and create databases so i can of course right click and create a new database but what i want to do is of course do it via code instead of having to do it manually inside of this tool so this tool will only be there for me to basically display the data in a easy to read format and later on we will see how we can display the data of course in a view using our asp.net core application in order to now connect to the server we need to add a connection string and we can do that inside of our app settings json file so this one here app settings json and you can either do it at the top level or you can do it at the bottom level either way is fine i'm just going to go ahead and create it here where i create a new connection strings and then colon and what's important is that everything that i write here has to be written exactly like that and then at this point we will need a default connection so you can just write it as you can see here so default connection and then colon the server is set to dot the database is set to whatever name you want to give it in my case i'm going to call it in and out i'm going to set the trusted connection to true as well as the multiple active result sets also to true okay so this is one default connection that i want to be able to use and then i'm just going to comment this out so this will be the alternative and here i'm going to use my local db so here if you want to use the localdb instead you can just copy it from here and then replace the dot with that local bms sql localdb alright so that's how we can set up our connection string and next will be the db context so let's go ahead and do the db context in the next video so see you there all right so now that we have our connection string we will need to install a new get package okay so in order to do that you need to go to your tools then to the new get package manager and then the manage nuget packages for solution once this opens up you can see the nougat packages that are installed for us but then you can also browse for new packages and the one that we're going to need is the entity framework core now this by itself is going to be fine and it's going to work but we're not only going to require this framework we're also going to require the entity framework core sql server okay so what you can do is you can instead just install the sql server and then you need to select the sign in and sign out so you can instead search for sql server here and you will also find ntg framework core sql server here you select it for your project then you need to make sure that you're using the version that you have for your project so i'm using the stable version 5.0.1 and then i click install in order for this to install all of the packages that are going to be required for us to create a db context so then you need to accept the licenses if you haven't done so already once we installed sql server let's also install the entity framework core so here i'm going to install that in my project as well accept the license agreement and then it will be downloaded so you can see here like the stable version is installed for my entity framework core all right now let's go ahead and create a new folder in our project so open your solution explorer and create a new folder i'm going to call this one data and in there i need to create a new class as well so let's go ahead and create a new class and i'm going to give this class the name application db context so here this is going to be our database context we could have called it something like in and out dbcontext or something like that but i'm going to use the application db context name for it all right so in here what we'll need to do is we need to make sure that this class is inheriting from db context okay so here use db context this will of course only work if you have the entity framework core installed you see that's why we need to install this nuget package because otherwise it wouldn't work so let's import this package and now we can go ahead and create a constructor so i'm just going to enter ctor and then press tab and this then basically creates a constructor for me so now we have this new constructor called applicationdb context so here we need to now pass the db context options okay and the options that we are passing are the ones from our application db context and i'm going to call this options and we need to pass these options to our base class so now if all of this didn't make too much sense for you no worries we're going to look into it a little more later on but for now it's just important for you to understand that you need to set this up for you to be able to use db context and then basically use your database and store data in the database so now we have our database context what's now left to do is to create a database in our code and then create a table in the database in order to then store the data in the database all right so see you in the next video so now we have our applicationdb context and what i would like to do is i would like to use it in order to create a new entity of my item so i want to have a new database table with items in it therefore i need to go ahead and create a new db set inside of my application db context so here i can go ahead and create a new property like so and this will be of type db set and here you can see i need to enter what kind of db set i want to use so what kind of entity i want to create and i want to create an entity of items in my case i also need to make sure that i have added this using statement here using in and out models so this is the entity inside of our database and this here is the table and i'm going to call this table items because i wanted it to be full of individual items so now i want my application to use this db context when it starts and when you want to do something when something starts you need to do it in the startup file so let's go ahead and check out our startup file because here we need to make a little change in our configure services so the services that we have as of now are add controllers with the views but here i need to add another service which will take care of my database so now the service that i want to add is the add tv context service okay so this one here then you need to enter the entity and it is our application db context so application db context now once again i need to make sure that application db context exists in this context so i'm going to add the namespace and then i need to pass the options here so i'm going to pass the options and what are the options in rdb context well it's the ones that we are passing here so we get them from our startup and we're passing them over here so now we need to make sure that we set the right options and the options are basically where i will say which database i want to use because you might recall that we created this connection string right inside of our app settings dot json file now i need to make sure that this connection string is used when we use the applicationdb context because it needs to use the database that we set up and the basically server that we set up so it needs to know which server we want to use so here i'm going to use options.u sql server and for this to work i need to make sure that i use the entity framework core so let's add that to our code so now it of course needs to know which sql server i want to connect to and i'm going to connect to our default connection okay so inside of my connection strings i can set up multiple connections right but i'm going to use this default connection that we have set up which is our server with a dot okay so let's go back here and make sure that we use our default connection in order to do so i need to use configuration dot get connection string and then i need to pass the connection string so here inside of quotations i'm going to pass my default connection so that way it will retrieve the connection string and it will pass the options to the sql server so that means that we can then get these options in our application db context and it can then do its work so at this point we are almost ready so we have our application dbcontext we even set up the startup cs file in the configure services method we made sure that we have our connection string set up so that we now can basically use our db context but we still don't have our database setup in the server in order to do that we need to understand migrations and that's what we're going to look at in the next video all right so now let's look at how we can do migrations because we need to migrate our database and therefore what we'll need is to add another nuget package okay so we have a couple of packages already you can find them here under packages in your project but the one that we are going to need is tools because it allows us to then basically run migrations and directly do them inside of visual studio therefore go to tools nuget package manager and then add the tools to your project so here i'm entering tools i'm just searching for them and the one that i need is this microsoft entity framework core.tools so i'm going to select my project here and i'm going to install this to my project okay and once it is done we can go ahead and run migrations so now it's really important that you ran this step because otherwise you can't do the next step that we're going to do so let's go back to our project and open the package manager console so you can find it under views under windows and then here package manager console i'm going to put it at the bottom of visual studio so here what you can do is you can go ahead and enter your commands that you want to run so now at this point one thing that you need to make sure is really that you have a comma here separating your connection strings i didn't have that before and that's why i might run into errors so make sure that you have this comma just after the closing bracket and then you can go ahead and write the migrations as we saw earlier this is one of the commands that we can run here so for example to add a migration and now i need to give this migration a name so i'm going to call this add items to database okay so let me run that by pressing the enter key and then as you can see this file opens up so here you can see all of your migrations in and out migrations has been added to our project and the migration that we just added was the add items to database migration okay so this is a partial class and this is exactly the name that we have given it and we can see that it's of type migration and what happened here well basically it created a table called items and it has certain columns in that table so one of them is the id and the other one is the borrower where do those come from well they come from our item class as you might recall so we have this key id and then we have our borrower column that's what is created for us automatically here so it creates the columns for us then it adds the constraints in this case specifically saying that the primary key is our items id so xid which is this one here and all of this is done by entity framework core so we didn't need to do any of that manually the only thing that we needed to prepare is all of the code and then just add this migration so now if you would check sql server you would not find the table there even though as you might see everything is prepared so what we now need to do then is to update the database what this will do is it will run all of the pending migrations as this one here so we re created this migration but we never actually pushed it to the database so we need to update our database for this to run so if there was no database existing that had this name then it will create a database for us if the database already did exist then it will just update the database with the relevant information okay so at this point our database is done and we should be able to find it inside of our sql server so let me refresh this let's go to databases and you see that we have this new database called in and out okay so now inside of this we have the items table okay so we have a couple of columns here the id as well as the borrower so basically our database is prepared for us and we can now go ahead and push data to it and we just ran our first migration and you can find your migration history also inside of your in and out database so here let me just select my top 1000 rows and it will display all of my migrations so it shows me the one migration that we did and it was called at items2 database and now we can of course also examine our items table so let's select the first 1000 rows and we can see we have the column item as well as the column borrower but no data in there so we didn't enter anything there yet but we will do that using code later on so remember every time that you want to make changes to your database in terms of the structure of your database then you need to add a migration and then you need to update your database in order for this to run so first run the command with add minus migration with a meaningful name and then once that is done and worked out well go ahead and run the command update database all right now that our database is ready let's go ahead and prepare everything so that we can actually get the data from the database and display it in our application in order to do so we first of all need to make sure that we have a controller that takes care of that so as you can see we have controllers here we have the appointment controller that we created and we have the home controller and then inside of our views we also have appointment home and shared but what i actually want to do is i want to go ahead and create a controller and then go ahead and create a view so you can try to do this yourself okay so i'm going to call this controller item controller because it should take care of the items that were borrowed all right so let's go ahead and create a new controller here i'm going to select the empty mvc controller and i'm going to give it a name item controller and there we are now i can of course go ahead and create a new view by creating a new view this way but i also can just go ahead and click on index right click and add view and here i'm going to select razer view not the empty variant you can give this view a special name and then you can select the template so here for example create you have then to also select the model class so for example the item that we prepared and then you will need to select a data context class that would be an option but i want to use the empty variant without model and we can make changes to it manually later on once we require them so this will not be a partial view because we haven't covered partial views yet we will do that later on but for now let's just add this new view to our application all right so now we have our index page and i'm going to call this one index items just for testing purposes so here inside of the index cshtml file go ahead and make changes to your documents or whatever html code you want to use for this is going to be fine but now how do i get to this page so how can i move over to that page because if i run my application there's no way for me to get there via the website itself i can now of course access this page by entering the controller name which was item and then i can go to index and you can see it opens this index minus items but the problem here is that i don't want to enter the url manually but i want to have a button here where i can click on and then it sends me over to this page so how can i do that well in order to do so i can first of all stop my application and then inside of views go to my shared file called layout cshtml which has an underscore which makes this a partial file so it's just a part of the complete file so to speak and then what we can see here is that we have this list here which is the nav bar and here we have the asb controller which is home as well as the asp action which is privacy so now i want to move over to not home but actually to item and here to the action called index and i'm going to call this my borrowed items okay and now let's run it again and see if we can actually move over to our page so there we are my borrowed items let's click on it and we can see we jump over to index minus items all right so now we have prepared our controller but let's actually display all of the items because i want to be able to display whatever i have in my database in here i want to add entries to the database manually and so forth because right now the database is empty right and we can fill it with data manually but we also want to be able to do it directly inside of our project itself so not in code but actually using our application for it so let's get started with this in the next video all right so now we want to get the data from the database and display it in our view in order to do so i'm going to first of all start with the item controller and here i'm going to use dependency injection which is a technique in which an object receives other objects that it depends on these other objects are called dependencies and in the typical using relationship the receiving object is called a client and the past so that is the injected object is called a service okay so we are going to use this concept this principle with just a couple of lines it will happen in the background it will all be taken care of by asp.net we really don't need to do much more so the cool thing is first of all we need to start with a new read only variable here or object which will be our application db context so that's the one that we created earlier so this one here okay so we will use this application db context and i'm going to call this underscore db now i need to import it so need to add this line using in and out dot data for this to work and now we need a constructor from where we will then get the database context so the db context so here inside of my startup.cs as you might recall we added the db context so the application db context which now allows us to use it directly inside of our item controller so here let me create a constructor with ctor and double tab and here i can go ahead and set my db so my local application database context and where do i get it from well whenever this controller is created the information will be given to it via the application db context db here so that's what the whole point of the preparation was that we did so we did a lot of preparation we did all of the setting up and so forth and now we can use the concept of a dependency injection here to do all of the cool magic that you will see in a second that it was done for us so here i have prepared the local db now we can use our database throughout this class so throughout this item controller and now inside of my action result i want to retrieve the items from my database okay in order to do so i'm going to create a new i enumerable which will be of type item and here we need to make sure that we're using the one from our models and then i'm going to call this one object list which will be our underscore db dot and here you can already find for example our items okay so i want to have all of the items that are in my item database and this is the way to do it so now i can pass this object list directly to my view and inside of my view i can now go ahead and work with it and display the items that i have in my database so another cool thing is i don't need to have to worry about all of the back end stuff i don't need to create an extra sql query or anything like that it's all handled by asp.net for us so the only thing that we need to do is now to use it and to display it correctly in order to test if this is actually working let me add a breaking point here alright so let's run it and now go over to our borrowed items and we can see it jumps over here directly and we can hover over the object list and we can see it and now press f10 to jump to the next step in my case f10 is already used by another software that i'm using so i'm going to step over and now let's have our opera object list again and we can see that it is our internal db set item now if we want to display anything in there let's actually add two entries to our database so here inside of our items i would like to add manual entries therefore i'm going to add a top 200 rows and here i'm going to add borrower dennis as well as frank okay so now i have these two in there let's go back to our application let's run it again and let's click on my borrowed items and we can see it is null so now let's step over let's hover over it and it is our object list let's open it up and now once i go to result view you can see we have two entries here number one is boro dennis and number two is borrow frank all right so as you can see now we get our data already and we are passing this data directly to our view which then can now go ahead and of course start displaying it so if we jump over to our items folder inside index here is where we now get the data and we of course now need to use the data and display it so let's do that in the next video okay so now we know that we get the data and we get the data in our item controller and we're now passing it over to our view as you can see here with this object list because in the last video we saw how object list is actually a list of objects that is coming from our database so now what we need to do is to send it over to our index or actually retrieve it in our index because we are sending it already but now let's retrieve it in order to retrieve it what we need to do is we need to add this add model statement here and now i can create an i enumerable here which will be of my type in my case in and out dot models dot and here we had our item class this one okay so now i say okay inside of my index cshtml i'll fetch the data that i'm getting and it's of type item so it's of this model you could have also just used item here but it can lead to confusion if you have a bigger project so it really makes sense to just have the full path then it's easier to find the direct file that you're looking at all right and now here we can go ahead and display the data okay so in order to display it in a nice format i'm going to prepare a little bit of code so let me type that in and then i will talk over it so let's start with some basic html that i have here now the cool thing is we can use bootstrap so you see here there is bootstrap in our libraries inside our www root folder okay that means that we can use their classes so if you don't know what that is i highly recommend to check out a course on the basics of bootstrap basically it's a library that allows us to make beautiful websites very easily definitely check it out there is a lot to know about it but basically it allows us to really quickly make html a lot cleaner and look a lot better than the default html and we're going to use it throughout the course okay so i'm using a container class p3 so if you want to know what this specifically means and you will see that here this is the container class that we are using and there are different kinds of classes container small container middle controller large and so forth and these are the class names okay and this is also how they behave based on the size of the screen and so forth so which kind of width they will display okay so we are using this and then we're using the p3 okay p minus three and you can see that p minus three stands for padding and three is just a specific width of padding or space of padding that we are using here then we are creating a row and we are creating columns inside of that row we're saying okay one column should be six and the total amount of width is 12 so here we're saying half of the width should be used with this saying borrowed items list and then the other half should be saying create new items so that's going to be their column 6 on the right hand side and these are basically containers inside of html code so we have a container that is our complete page then we have a container which contains our row in which we have a container that contains our header that says borrowed items list and it's text primary which will make the text bigger and thicker and then we have this other column which is just going to say create new item so how do we actually use the sharp code in here now because this is all html code so how do we use the sharp well the cool thing is this is a css html file so it means we can use c sharp and razer syntax allows us to do so so we can just go ahead and use the add sign and then use our c sharp code such as if statements or for each statements and so forth okay so i'm just going to use a for each here in which i then can basically also put my html code in there because i want to run through my complete data that i'm getting so this complete information this object list of items which is an i innumerable i want to iterate through it and then display the data okay so for this to work i can of course use direct my for each but i first want to check if i actually have data and how do i do that well by using model dot count okay this will give me details about how many items i have inside of my model that was passed to me now this is something where i have to be careful because here i'm using the capital m and here at the top we used a a non-cap m so small m now this is something that you have to be aware of when working with this code so at the top when you're using app model use the small m and here use the capital m so now we know in this case we actually have data that we can display so now let's just format it in a way that it looks better okay so i'm just going to prepare some html code once again and you can then check it out okay so let's look at what i've created here so i created a table and inside of that table i have a table header which consists of three columns okay we have the column item name the borrower and the lender okay and then in the body i have my for each statement which now goes through every single item inside of that model so this model count so the model basically that we get from our item controller which is a model of type item which basically has an id and a borrower so we don't have a lender yet and we don't have the item name itself yet and that is on purpose we are going to later on see how we can adjust our database in order for it to accept multiple more columns so we will see how we can do another migration and so forth so for now what we have is a for each iteration which for every single item inside of that model is going to create a table row so it's going to create a new row with table data and the table data will have a width of 30 for each of the different columns so the first column will be empty because that will be the item name itself then the borrower and then just for now i have used the id later on we are going to replace this with for example the lender and then after all of that i have this else statement saying no items created yet so here i'm just saying in a paragraph that there are no items in the list yet but later on we can add those items because that's what we have this create item diff for which we will later on adjust so that once we click on it it will actually do something and it will allow us to create items so once we run this application you can see this is what we get so you can just go ahead and run your app and this is the borrowed item list that we have here with our create new item text that i have at the top and then i have my table with three columns so the item name the borrower as well as the lender and for simplicity purpose because we didn't add those columns to our database yet to the table format yet you can see that i'm just using the ids for those entries here so id1 for dennis and id2 for frank you can also see that this has a certain design and all of this design has to do with the classes that i'm using so i'm using the class table so it knows okay i want to look like a table then i'm using the table border so it creates all of those borders around every single element and then i have the table stripe which makes this gray and then white iteration so the next one will be gray again the next row that i will enter and then it will be white and gray and so forth okay so the width of this is 100 percent so it's basically just 100 of the available space for this page so if i change the size of the page you can see that all of this is adjusting itself as well which is one of the strings of course of bootstrap alright so the next thing i would like to do is to be able to create new items but before we do that i would like to actually make sure that we have the lender property inside of our item.cs file so inside of our model as well as the item name so we will need to update our database and that's what we're going to do all right so now let's update our database because for now it only has id and borrower as the two columns but i would like to have more columns i would like to have the lender column as well as the item that was borrowed okay so therefore we're going to have to change our item model okay so here inside of our models folder we have this item and it's this one here item cs where we had the key with end id and the public string borrower so i'm just going to copy this one because i just need a lender as well as the item itself which i'm going to call item name okay because item is already used at the top for our class itself so it really doesn't make sense to give it the same name so here i'm going to call it item name okay let me save this file once that is done i need to now to of course update my database therefore go to view and then other views and make sure that you open up your package manager console and you might recall that we needed to add a migration and then we need to give it a name so here add lender and item name columns okay that's how i'm going to call it pretty long name for a migration but let's call it like that let's run this this will then take a little while and once it is done you will see that it generates this file for us so here edit the column and add it another column okay so one is the item name and one is the lender okay and now we need to update the database so update database let's run this build started build succeeded now let's go over to our database and refresh it so let's refresh our db items actually let's just go over to the columns and now you can see the different columns exist here so let me select the top 1000 rows and you can see that now we have an id a borrower an item name as well as a lender column each of them are null because our entries are empty so let's change that real quick for those two so now let's edit the first two entries so here the item name as you see the order is not exactly the same of those columns as we have created them in so here for example he borrowed his bicycle and the lender was frank okay now frank what did he get from dennis let's say he got the darts from him and we only have those two users in there so as you can see here dennis and frank are the entries that we have now a little challenge for you please adjust the code of our view so that it displays the data correctly okay so i hope you tried it so now let's start with the item name so this will be add item dot item name then the borrower and then finally we have the lender okay now let's test this and we can see that this is the information that we get so item name bike borrow was dennis lender was frank and then the other item was darts borrow was frank and lender was dennis okay so now you know how you can adjust your database very easily if you ever need to do so if you ever need to add another column to your database so basically you can see our database is just following the structure of our model but of course we need to add a migration once we change the model and then we need to update our database for it to understand that it needs to add a column for example or maybe even get rid of a column okay so now let's take care of creating a new item in the next video quick pause this video was only made possible because i have a bunch of people buying my courses okay so this video is a third of the complete asp.net course that we prepared and if you want to get that full course definitely check out the link in the description so in that course you're going to become an advanced isp.net core mvc developer you will learn to use.net identity for user control for example to create an admin user role as well as in this case a doctor as well as a patient user role you will learn how to deploy your application to azure which is a cloud solution so you can then make your application available to everyone around the world which will be an important skill to have you will also learn how to send out notifications via your applications in this case notifications via email to the doctor as well as the patient you will be enabled to build any type of asp.net core mvc application once you're done with the course so you will learn all of the important skills that will enable you to become a real asp.net core developer and apply for jobs and of course we're going to look into the mvc pattern in more detail so you will become even better at using patterns so that's a generally important skill to have whenever applying for a senior developer job all right so now don't waste any more time get the full course the link is in the description down below i'm very excited to welcome you there and you will get q a support of course so if you have any questions or are stuck you will be helped out and many more perks all right so now let's get back to the video alright so now we can get over to our borrowed items but this create new item button doesn't really work as a button yet so let's make this a button as well as let's create the page that will then allow us to create a new item okay therefore the first thing that we need to do is to make this a button and in order to do so we can go to our index html that's where we created this element so here we have this div which is taking six columns and now let's make sure that this is now actually going to be a button and in order to make this a button we can very easily just make this a link that will then look like a button okay so so an a tag allows us to create a link and i want to have a link that sends me to the next page so how do i send over from one page to another well in order to find this out what you can do is you can of course also look in your solution explorer because there we already did it so here we had this list item which was of type nav item and it has this class details with the tag helpers so this is an asp tag helper and here area is not so relevant for us what's interesting is this part here where we have the controller as well as the action so now if you want to move over to our other page let's say we create a new page to which we want to move over we just need to say what page that should be okay so for this to work we of course need to create a new action and therefore let's go over to our item controller and here we had our index action and now i'm just going to create another action this action needs to get a name and i'm going to call this create because it should create what should it create well items okay because we're in the item controller we don't need to create an object list for this and we don't need to pass anything here basically we're just saying okay we want to send over to a new page which will be the create page for now so now while my project is running this will of course show me this little warning but now let's go ahead and create an extra page for this so right click add view as we have done before razer view i'm gonna call this create everything else will be default and this now creates a new view for me all right so this new create html file has been created for me and you will find it and you will find it in the item folder so you can see here create cshtml as well as the index cshtml so they are both there and now this is our new file now the thing is what i want to do here is i want to actually also use the model even though we are not passing any things so if we look at our item controller you can see here we're not passing any objects so why would we need to have a model well the thing is when we are creating something i want this something that we are creating to be of that type of the same model that we have used for our items so i want to basically use the item model here so what we can do is we can use that same statement here as we did before so model innumerable in and out models item okay so it will be the same model so this part here we can take out and now we can go ahead and design our page that should then allow us to create new items before we create anything here let's actually take care of sending us to this page okay so as i told you earlier we can learn from the layout file because here we had these tag helpers so asp controller as well as asp action and we are going to need those two so we can just reuse them inside of our index and they should be executed once we click on that create new item okay so this is now going to be a link but if i want to make this look a little better i want this to be a button i'll need to adjust it accordingly but for now let's test it this way let's see how this is going to look like so here you can see it says create new item so it's a link that we can hover over and we can even click on and this then for right now sends us to the index page but we don't want to go to the index page and we don't want to use the home controller we instead want to use our item controller and the action that we want to go to is the create action okay so that's what you need to change here now there are other tag helpers so if you enter asp minus you can see that there are multiple different tag helpers that you can use and we're just using the ones that we have used before but we're going to use other ones later in the course as well so now how do i make this look like a button well i can just go ahead and add this class here saying button so this should just be a button and if i want to make it look a certain way you can see that there are a bunch of different ways to use it so button secondary button primary button outline warning success will be for example a green button but the one that i want to use is the button primary which will be a bluish button and now let's make sure that this is also towards the right hand side so the text should be on the right hand side so the button will not be in this weird position where it is right now but it will be at the right hand side okay so let's run it again so you can see there is our new button it looks significantly better let's click on it and it sends us to item create which is of course empty as of now but we're going to take care of that in the next video so see you there welcome back so in this video we are going to take care of the create page at least of the ui so first of all what you can see here is that i have created a bunch of code that you can download so i would recommend that you download this that you don't need to type in all of that but basically when you paste that code in which you will get is the following result so this is how the create page will then look like add item you have an item name then the text box should be here another text box and another text box so item name borrower lender and then you have the create button and the go back button so in case you decide to not add the item in the end but you just want to go back to the page where you see all of the items that were borrowed okay so this is the fundamentals here we are going to now take care of making sure that these elements here are meaningful and that they actually display something meaningful so let's look at what we have here real quick so we have this asp action create as of now we don't have a create action that will run a post request okay so if we look at our file our controller here we can see we have this create but this is just to get the data so we are sending over to this other view but we will need to create another method that will then actually get the model and then we'll store the model in the database okay so store that object in the database that we have created this new item so to speak okay we're going to take care of that later on but for now let's change our ui so we have a div with which is the border then we have a form group which is this add item so just this header that we have there so this one here add item pretty neat and then we have a row which has all of the different columns okay so we have the bigger column 12 so this one is going to take the whole width in which i have a row which then is these three columns okay so item name borrower lender and then we have the text box here which we will need to replace with actual text boxes and then at the bottom we have the two buttons here to allow us to create and to go back now let's actually make those interactable or actually get data from our database to display the right model information and so forth because instead of item name it should display something like our item name here or instead of borrower that i have hard coded so to speak it should use the name from the model okay so how can we get that so here right now the names are hard coded and you could of course do so but what if you actually want to use the names from the model well that's the better way and let me show you how you can do that now before we can actually do that we need to make sure that we're not using the innumerable here as a model but we're actually just using the item as a model okay so we copied it from our index.html but here we actually needed to get the list of model items and here we just need to get one particular item okay so now let's go ahead and use the actual item name and therefore what we can do is we can go ahead and use a label and tag helpers so we are going to use the for tag helper which allows me to now use for example the item name here you can see it gives me the property name from my item and that is this item name here okay so now let's do the same thing for the borrower so i'm going to now do this for the borrower as well as the lender so borrower as well as lender okay now if you run this you will see one thing that isn't that nice okay so let's look at it so here when we create a new item it says item name so this is something that you wouldn't want to display to a user now the cool thing is we can use data annotations here in order to display something meaningful which means instead of displaying item name i'm just going to use a data annotation here which will then allow me to give this item name which is the internal name for this item in our database a name that we want to actually display in an application and the data annotation that we need to use here is called display name and then in brackets we can give it a name and i'm going to call this item name for this to work you need to make sure that you're using system component model and then you can use your display name all right so now it's going to display item name and maybe we don't even need a capital n here so let's run it again and we will see how this actually takes effect so let's go over to our create item and we can see it says item name now so instead of the property name it's actually displaying the display name now okay now what is the advantage here well the advantage is that we have a lot more control over the ui via code instead of our html here okay so now that we have that out of the way let's take care of the text boxes and in order to actually add a text box here what we can use is simply the input tag and this allows us to then define this for a specific entry so in our case here i want this to be for item name so whatever we are inputting here should actually have an impact on the item name property of that model item that we have here okay and then i'm going to give this a class so that it looks like i4 okay so then i'm going to do the same thing for the other text boxes that i want to have this one will be for the borrower and the last one will be for the lender okay so now we have those three let's have a look at how this is going to then translate into our ui so you can see now we have these text boxes here that we can now use in order to enter the data in there so now let's take care of the create and back button alright so in order to do so we need to have another input button here so this time we need to add a type and this will be the submit type so this will actually submit the data then and i'm going to give it a class so that it looks like a button then it looks like a blue button so this is how you can do it with button info as well as i'm going to give it a certain width so here let's say width of 75 let's try that one and then this will be our input right the value that i want to give this button is going to be create so this should be the text that will be displayed there okay so it's going to display create now for this other button this go back button i actually want to go back meaning it will go to the index page of my controller so of my item controller so i can just get it from the layout here as you might recall it sends us over to our aspcontroller item so here my borrowed items let's go and use that now instead of this being just this text my borrowed items i want this to actually just stay back and now let's add a design here so i'm going to give it the class of button i'm going to give this a button and here we can use danger for example this would be going back and canceling the editing of whatever we're doing right now okay now we don't need to use this asp area as well as we don't need to use this asp controller item even because we are in the same controller we want to stay in the same controller so we just need to say that we want to use asp index so this is something you can do if you don't want to specifically again state that you want to go to the same controller that you're already at and asp.net will be smart enough to understand that and it assumes that you want to stay in the same controller if you're not specifically stating the controller that you want to go to and by the way this class that we had here we don't need that because you don't want to have two classes otherwise you run into errors here okay so this should send us back let's also give this a width so let's say also 75 so that the two buttons have the same width and now let's check it out there we are so we have the item name and the borrower and the create as well as the back button now we could center them so that it looks a little better so let's take care of that as well and i'm just going to use offset of 2 because the overall width is 4 per button so to speak and we have 12 in total so if we offset it by 2 we center it basically and then we get the following results so we have the create as well as the back buttons here perfectly available on our page so let's go ahead and test the back button and you see it sends us back to our item page which is the index page so create item and back works totally fine all right so now we actually need to take care of the create button and that's what we're going to do in the next video okay so now let's take care of this create button because right now as you can see it tries to execute something but it doesn't really do anything that's because we didn't implement the functionality for it and therefore we need to go to our item controller because that's where we can take care of creating something so if you look at this code that we have here we have a method here at the very top which says method post and the action that should be run is the create action now the thing is if we look at our item controller we have create function already this is an action that we could use but this one is only the get action so this is the get create okay so we need to make sure that we also have a post create okay so let's go ahead and do that let's just copy and paste it and now we have this one and it will be the post create now if you want to post something you need to transmit the data you need to send it over in our case it was the item and i'm just going to call this object so now i will now actually send over the item from our page here from this create a cs html from this form over to my item controller and i can now use it in here now for this to work i need to specifically state that this is an http post and for this to be secure as well so that not everyone can host it but only people who are have actually a security token and who are actually logged in for example which in our case is not relevant yet but basically a good practice is to do the following as well to use validate anti-forgery token so what this does is it will check if we still have a token it will only execute the post request if we are still logged in so that the security cannot be tampered okay so this is a way to make your application safer then what we actually want to do here is we don't want to then go ahead and just display a view or return a view here what we actually want to do is we want to make an entry to our database so how do we do that well we can just go ahead and access our db our database and here we have our items table and in that table we can now add something and that's the power of the entity framework that it really allows us to use these kind of things so here we can now just go ahead and pass that object over to our database at this point the entry is not saved yet so we need to make sure that our database also saves the changes so save changes is what i need to execute at this point and instead of returning to a view i want to return to a specific action to my index action which will then by itself return the view with the new list of objects because i want to make sure that the new lists that i have added something to you actually also displays the newly added item so in order to do that we can use another method here i'll return another method here which is called redirect to action so it's this one here where i now just need to define which action i want to redirect to and because i want to redirect to the same controller i only need to specify the action name as you can see there are multiple overloads here for this method if you want to check it out there are plenty of overloads as you can see the action name or the controller name and the action name then the roots and so forth so there are a lot of different ways how you can actually use this redirect to action but as we are in the same controller we're just using index here which will then execute this action okay so now let's add a breakpoint here to actually test this so i'm going to insert a breakpoint and i'm not using shortcuts here because of my software that i'm using to record the video so let's run this and see if this is actually going to work for us so there's our software let's add the borrowed items create a new item and this one was let's say dart board that was borrowed and the borrower was michael and the lender was frank okay now let's go ahead and create that and you can see we're hitting that point here you can hover over your object and you can actually see that the borrower is michael the id0 the item name is dartboard and the lender is frank so this actually works but the point is at this moment it's not saved in the database yet so let's go over to the next step and you can actually go over to your database to check it out so here in db items select tab 1000 rows you will see there is no new item there now let's go to the next step let's actually save the changes let's refresh this and we can see that now michael dartboard and frank are actually in our database as well now let's actually see if it sends us out to another page and we can see we're back at this page where it actually also displays the dartboard the borrower as well as the lender all right so now you see how you can basically create items you saw how you can display items and what is now of course going to be interesting is how to edit them so update an item as well as how to delete an item from the database okay so that's what we're going to do later in the course all right so now you might wonder how is that even possible so what happened there how did all of this happen well the cool thing is if we look at our create cshtml here we used asp4 which allowed us to specifically say we want to specifically post this information to our item dot item name and here it's item.borrower so basically asp.net core took care of all of the background execution so we didn't need to do any of that as you see we just needed to set everything up at the beginning but now it just helps us to take care of the database so easily we don't need to do any sql coding or anything like that it's all done for us with a super easy way all right i really love this and yeah let's go ahead and see you in the next video alright so now i have a little challenge for you so you should apply everything that you have learned so far in the specific example i want you to create an extra page here so meaning an extra controller which will allow us to display our expenses so it should be called something like my expenses and then once you go to this page you will see something like we have here so borrowed item list but it will be expensive so you will only need two columns for one column you will need to enter what the name of the expense expenses and then the other column will be the amount that this expense to cost you or how high this expense was okay and then of course there should also be the capability of adding a new item so of course once you add a new expense so to speak and then here you will of course also only need two entries so you need to create a new model you need to make sure that you have an extra table in the database basically i want you to build the same capabilities that we have built so far and we are not going to do the validation for example making sure that it is in effect a number that was added as of now but we will take care of that later on so in the next chapter we're going to look at validations as well as server-side client-side validations and so forth so yeah we're going to do that later on but for now this is your challenge so good luck with it please really take the time to try it even if it takes a little time but you can really get inspired by the code that we have built so far and this should definitely help you to achieve this functionality all right so good luck all right so let's get started and build the solution for our little challenge the first thing that we'll need to do is to create a new model so i'm going to add a new class in here and i'm going to call this class expense all right so what do we want to have in here in terms of properties well we have the expense name so string and expense name and then we have the amount so here i'm going to call this amount and of course we will need an id which will be our primary key and therefore we need to make sure that we have data annotations and our used namespaces so basically you could just get inspired from this item.cs file now what we can of course do is to add a display name here as well for our expense name so display name will be in my case expense so in order to use display name therefore we need to make sure that we have component model available so there we are and now the next thing that we need to do is to create a new controller i'm just going to go ahead and create a new controller here which i'm going to use the mvc controller empty and give this the name of expense controller and i'm going to copy everything that i have in my item controller so basically just copy everything from here okay so let's go ahead and replace this part so we have the application context db then we need to make sure that this is called expense controller we need to make sure that we have the in and out data so that we can use the application db context then this will be of type expense and for this we also need to make sure that we have our models installed and this will be db dot expense which of course now also needs to be set up inside of our application db context so here db set item this will be of type expense so and i'm going to call this expenses now we need to make sure that it's db expenses here and this was of type expense now let's go ahead and take care of the migration because our database needs to be aware of this new entry so here let's open up the package manager console so here let's add the migration and let's call this add expense this is to database for this to actually work you need to make sure that you comment those two lines out for now and return a view because otherwise it just fails so the build will fail but once you commented those out the build will succeed and now we can make sure that we update our database as well so let's run update database here and once that is done let's check out the database if this actually exists now so let's refresh it in my case a refresh wasn't enough i had to disconnect and reconnect but now it's there so we can see our expenses let's check it out let's select the top entries and you can see here id expense name and amount are all there as we need them okay now we can uncomment these lines so of course it's db expenses and not db expense okay so let's save this as well and now let's take care of the views so i'm going to basically copy item here and i'm going to rename this this one will then be expense because that's also the name of our controller right expense controller so the folder should be called expense and now let's look at the create page so we need to make sure that we make some changes to the model so we're not using the item model but we're using the expense model this time then we should call this not add item but add expense as well as this will be then the expense name and this will be the amount so now we can get rid of this line as well as this one here so we don't need those extra columns this one will be as well the expense name and this one will as well be the amount you can now of course also change the width year so it will be a little wider so column six because the total is 12 right and as we only have two entries now we can make them wider both of them and on top of that we need to make sure that we check our layout cshtml because we need to add a new list element here so another knife item so let me add that real quick and this one will not go to item but it will go to expense as well as the index action that's fine and this one will be my expenses so my expenses and now inside of our index.html and i'm talking about the index.html of specifically our expense controller so you need to make sure that it's actually this one here so inside of the expense folder you have the index html that's the one that we need to change so here instead of either using an ie numeral of type item it should be of type expense and then of course it's not borrowed item list but it should be expenses list expenses list is the overview it should not send over to item but to the expense controller and there to the create action that's fine and the text should be create new expense so the next one will be to make sure that we are displaying the right information so we're not showing the borrower anymore we are showing an expense as well as the amount and then accordingly we need to make sure that we are not running through items but through expenses so i'm going to call this expense and therefore i need to make sure that here i'm get talking about the expense name and the expense amount we don't need to have the third column here this one will be 50 this one also 50 and now let's check it out let's see if this is actually going to work as intended so there we have our expenses so my expenses no items create yet which is fine because we haven't created any expenses let's say this one is rent and let's say it's 600 let's create this entry and we can see now rent with the amount of 600 is there let's create another entry let's say barbershop and that was fifteen dollars or whatever let's create that and we see it's there okay now we can also of course double check our database if it's available there so let's execute our sql code and we can see both of them are there so rent as well as the barbershop area now you could of course go ahead and extend this functionality so that you actually have a final total amount at the very bottom which takes the values here and then displays the total amount at the bottom but that's something that i can really leave up to you and yeah that's already it that's the challenge so you know you see how you can basically create your very own kind of list for this of course we don't have a validation here yet so let me check this test and e let's create this and well it shows at least in german gives you a number iron so enter a number so you see even here it's smart enough to understand that our model expects a number here so we can't enter a string so that's amazing that's even easier for us but still we're going to look into validation a little more and of course into how we can edit or delete certain entries so see you in the next chapter okay so before we do the updating and editing functionality let's look at validation first so once i create a new expense i can enter values here so this has to be an integer right it is defined in our model that's why that's the case but i can enter negative values as well as positive values if i want to limit that i can do so and if i want to make sure that expense is in fact not null so i can go as you see created even if it's empty i need to add validation so i can either do server-side validation or client-side validation and this video we are going to look at both sides of it okay so the first thing that i will do is i'll go to my expenses.cs so as you see we're working with the expenses.cs not with our items this is the one that we had from the challenge so i hope you follow the challenge otherwise you won't have this in your project so definitely make sure that you try the challenge for yourself and then check out the video in which we finish the challenge and here we can work with annotations once again so we have we used the key data annotation we have used this display name but there are other options that we have here so for example if i want to make sure that the expense name isn't empty so the user has actually entered something i can add the required statement so here i'm just going to add required and then let's say i want to make sure that amount is also required but i also define that it mustn't be negative so the amount needs to be positive even though expenses are in a way negative but if we call them expense then they will always be positive okay so here i will also make sure that this is required so here required as well as i can define a range okay so this is another annotation here and this range i can define where it starts so let's say here as you can see a double minimum a double maximum and so forth so there are multiple different overloads here we can also do integer minimums and maximums so i'm just going to use integers here because our amount is also an integer so it's not a double of course you could define this as a double if you wanted to but i'm just going to use an integer here only whole numbers are accepted here and then what is the maximum value that i want to allow as an expense well i can use the maximum value of an integer and then i can also define an error message for example so let me define the error message and you can see here there are multiple different optionals so error message error message resource name and so forth but i'm just going to use error message here and define my own message so here i can add the error message saying amount must be greater than zero okay so this is going to be the error message that will then be displayed because we overwrote the default message and now it will use our own message but of course this is not it we also need to make sure that this will actually be displayed and in order to do that we need to go to our create cs html and here i'm talking about the expense create cshtml so it really depends on what you want to extend so in my case i'm going to do it in the expenses one so here let's look at the solution explorer you can see that we're in this index of our expenses and i will basically just add a quick div here at the top and here i'm going to use an asp validation summary so i can now use multiple options so all model only or none okay we're gonna go with model only for now we will see later on what the idea behind this is and i'm going to give this the text danger kind of color so this will be red basically okay we can leave this div empty there's no entry in there but now i can go ahead and inside of my form group here i can add a span here so the span will be for example asp validation 4 and in my case it's the expense name and i give it a class of text danger once again so it should be also displayed in red so what this will do is it will basically show the error message underneath my input object or input element of my screen and now i do the same thing for the amount so here i'm just pasting in the code as well for the amount now this by itself will not do the trick so we need to make sure that we also go to our controller and in this case it's the expense controller and here in this action that we're currently in that's the create action right this post create action and that's where we are then creating the element so we are currently not checking if what we're entering follows any rules or any guidelines that we have defined at this point we're just saying okay whatever you get as an object of type expenses just add that to the database and save the changes okay we're doing nothing else here so what i instead want to do is i want to check if the model state is in fact valid so there is this model state that we can use and it allows us to check if something is valid and it allows us to check if the entry is valid which means it will then check whatever we have defined here in our expenses so for example that it is required it will check whether it's the range is set and so forth okay so then in here i just want to run my code so the same code that we had here but of course we need to have another return statement here so here i'm just going to return the object and we can then do with it whatever we want later on in that view this then allows us to display object information if you want to okay so this now will allow us to do server side validation so before we look at client side validation let's actually check this okay so i'm going to add a breakpoint here and i'm going to run my code and see if our expense tracker or expense software is how to speak is actually doing what it should so there we are let's go to my expenses and as of now we are getting an error that's because i entered a null value later on and that's something that our software isn't very happy about so let's execute this query and you see here it's null okay so let's change that real quick therefore i'm going to add it to top 200 rows and i'm going to enter a value here so what could have been 123 euros video games something like that video games okay and now let's actually run our software once again because now we should be able to see our expenses and let's go over to expenses because this time it should work so my expenses and you can see now it actually works so this was a little error that we had now let's create a new expense and let's enter something here like car repair for example and now let me enter -1 and let's create this so you can see here it already says amount must be greater than zero okay so we directly get this information here where does this come from well if we look at our create cshtml we have this span which is the asp validation for the amount okay and we defined this as model only now let's change that to all for example and let's run our application once again and test this again okay so let's go to expenses and now create a new expense and now let's add minus one here and leave the expense name empty so now we can see the expense field is required as well as amount must be greater than zero okay so this is what this validation summary all adds to us so this is the stiff here at the top which basically displays this error message and if we say all it will display the error message in the validation summary div as well as at the form level as well so the text field the level here at the bottom as well and if we just say model only it will only display it in the model which means only here in the span that we have defined here specifically and of course we want to have the breakpoint at this level here so here at the if statement level so make sure that you have it there when checking so let me check once again so let me create and you can see it jumps over to this level and now let me check here so here we can see that the validation state is invalid for the amount as well as the expense name okay so it checks it on the server side for us and that is of course because both of them are empty so the expense name is empty as well as the amount is empty okay so now let's look at client-side validation because we don't need to hit our server with this this is a very basic validation that can be done on the client side directly in order to use this what we can do is we can go over to our create cshtml which is the one for our expenses okay so we're in the same one and here at the very bottom i'm going to add a section which is going to be a script so here we can use javascript code directly and i'm just going to specifically state here once again that i want to use my code here which will be partial and the name and here i need to define to use specifically this validation script partial okay so this is a script that we can now use and it's important that you enter it exactly like it is written at the bottom there okay it has to have the exact same name okay and then close this tag it will do the validation directly on the client side we can test this very easily let's run it and let's see if our breakpoint is ever hit so let's go to my expenses let's create a new expense let's create it and you see the expense field is required the amount field is required but it's never actually hitting our server side validation it's only hitting the client side validation we can see that in two levels one of them is that the server side check is never done so it's never checking our server side entries so you can see now it's done on a client-side level we can see that because it's never actually hitting our breakpoint that we have defined okay so we created this extra break point in our expense controller here but it's not even being hit at this point because it's not doing the server side validation it's doing the client side validation for us so it doesn't even need to jump to that point now there's one more thing that i want to quickly show you and that is that you don't need to have this line here so you can comment it out it's no problem and it will still work the same this is just for you as additional information that you know okay you can have this top level where you can specifically define a validation summary at a specific level of your view you can define where it is and you don't need to specifically say that it's model only if you have the span here with asp validation for a specific property this will be sufficient and will do the job already okay so that's it for this video see you in the next one all right so now let's take care of deleting entries so i want to be able to display a delete button and then that button should send me over to a screen where i have an overview basically of the screen where i have an overview of the expense and then i can click the delete button or go back so this is at the same time like a confirmation that we're doing here okay so inside of the index.html and here you need to make sure that it's the index.html of our expense because that's where i want to do it so here i'm going to add another table data so another column so to speak and this one will be the delete button so here let's say these two should be 30 and this one will be 40 something like that and in here i'm just going to add the anchor tags so let me go ahead and add those i'm going to basically use this here that we have done before so this will be our tag that will send over to create well we will need to change that this will be to update and then another one will be done delete so here this should just say something like update and the other link will be to delete so we will need to create these two actions later on but for now we just set them up what we can also do here is of course make this red so this delete button will be red the other one will be blue now there is one thing that we definitely need to add here because how does our software know what we want to delete because we don't pass any id to it but where do we get the id from well the cool thing is we get it from our expense here so as you see we get the expense name as well as the expense amount but we also get the expense id which is our primary key which then means that this individual element is unique so we will definitely know which element we have here so in order to define this we can add another helper here asp root and then we need to enter the name of the element and i'm just going to use id here so it will be our expense dot id here and here for we need to make sure that we are using the add sign so it knows that we're using c sharp code here so expense id and it goes also for our delete button so both of our buttons now will know what they are deleting so they will get the id of the element that they are about to delete because we need to pass it so that it then sends over to that additional action so basically it sends it over to a new page now i'm going to give these two buttons a little bit of a margin so that they have a distance to each other so here margin on both sides just a little bit mx1 will give them a margin so let's look at it let's just see how this is going to look like on our index page before we actually add the action for deleting so my expenses and we can see we have this update and delete button and at this point i feel like they should be centered okay and maybe the width is a little too much here doing for 40 so we can play around with this so now let's change up the values a little bit so this will be 35 35 and 30 and then let's change the width of each button to let's say 100 then we have this to be a button group and we can make sure that it has the role of a group so then we have our two buttons let's give them a little bit of margin so mx1 in both cases and let's run it again so mx1 will give margin and let's see how this is going to look like so my expenses and then we have our update as well as delete buttons now we can of course add a little table header here so i'm gonna add a table header and this one will be changes something like that and then this looks quite good so now we need to make sure to actually have a functionality once we click on any of the buttons okay so let's click on the delete button and do something with it okay so for now you can see we're already passing the one over but we're not actually doing anything okay so it's not really working correctly but but the good thing is this is the id1 which was rent id2 which is which was on our barbershop so it's already working to pass over the id correctly so this part here does already work as intended now we just need to catch it at the right screen which is the delete screen which means we need to create a new view and then we need to do the deletion process therefore we can go over to our expenses controller here we had this post for create now let's add a post for delete okay here i'm going to call this post delete and i'm going to call this action delete this will give me the expense object and as you might recall we don't need the expense object here but we are actually getting an id so an optional id this can be passed or it cannot be passed so let's make this optional and then we need to make sure that we get the object for that particular id and the cool thing is we can just use our db here so underscore db dot and then we call the expenses and then there is this method called find so you can see add find remove add range move range and so forth so the one that we want to use here is find and we want to find the id so now we can check if the id exists or not so if the object now isn't null so now what do we want to do if it is now well we're going to return not found okay so we saw what not found does it's just going to return not found very basic information and then here instead we want to basically do all of this action here so where we not add something but remove something so we delete from the database expenses now the object that was passed to us afterwards we saved the changes and then we sent over to the index so that's what should happen once we actually do the delete functionality now let's do this same thing for the get so we need to make sure that we also have a get request where we just send the user over to this other page so here we need to make sure that we also get the integer we don't need to validate and it's not an http post here because we're really just sending the user over to another page and we can also check here if the id is null or if the id is zero and then we can also return not found and otherwise we can get the object from the database so var object is going to be underscore db dot expenses dot find and we find the id because now we know which expenses we want to display or which particular expense we want to display and if that object is empty so if it's null we know okay well unfortunately there was nothing to show so let's also return not found and then we can go ahead and return the view with our object here because we want to display the information about that object that we're getting okay so that means that we now need to create a delete view now the problem is as you can see here we have the delete action twice so one of them is the delete action for the get request so here get delete and then we have the post delete so what we need to make sure is that this delete here the second one has a unique name so i'm just going to call this one delete post okay so now inside of our index where we call this delete we need to make sure that we call it delete post so now we need to make sure to create this view now this delete view i want it to be pretty much the same so let me just create this view real quick i wanted to pretty much be the same as our other view which was the create view okay so let's create this one real quick and then let's get inspired from our create view which basically means we need to look at our create here actually we can just copy everything and paste it in here of course this will be delete expense so the headline will be delete expense then we also need to make sure that we display the expense name as well as the amount which here means that we can get rid of this validation because we're not really validating anything the user cannot change anything either way at least after we make sure that it is disabled so we can just add the disabled keyword here there's a bolt this way and i'm going to do that for both of the values so for my expense name as well as the amount both of them are disabled now so the user cannot change them but you can see them so that's the idea you should be able to see them now accordingly here at the bottom i want to be able to go back as well as to delete so this one should be then button danger instead so this one will be the actual delete functionality and then let's call it delete with a capital d and then we have the button success which will just send the user back okay so now this case the green button will say okay it's fine you can go back and it will send us back to the index which means the overview of all of our elements and the other one will be red okay now there's one more thing that we need to make sure is that we are not using the sp action create but we're actually using the delete post because if you look at it that's the name that we gave our action here so this is the action that we want to execute we want to delete the post what's important is that we of course have the same model so we're using the expense model once again and now let's actually check it out and now i also realize that i have a little bug here still so i'm missing a closing bracket here and now before we run this we need to add one more line and that is to make sure that the input is set to our id so it is going to be for our id and i'm going to make this hidden okay now it will know okay whatever input we are using will be for our specific id which will be the one that we are passed on to from our controller okay so now let's run it and go to my expenses and go to delete video games for example delete and we can see now it's gone so it's not available anymore let's delete the barbershop as well or just go back from here you can see now it's not deleted and now let me delete it once again now the barbershop is gone as well so that's how you can basically delete an entry from your database and do it via your user interface so in the next video we're going to look at how to update the data so see you in the next one all right now let's take care of the update functionality and therefore we need to go over to our expense controller once again and we're going to create another action which will be very similar to our delete action okay so i'm going to add it here i'm going to call this one get update and this one will be called update okay so i'm going to do the same things here i'm going to pass the id then if the id is null we will say not found or if it's 0 then we will find the expense based on the id and if the object is null we are going to return not found once again and then we return the view itself with the object that we're passing which is basically our expenses object now we need to have a view for our update so we can add a view again i'm going to use razer view here i'm going to call this one update and basically will be the same thing as our create view or our delete view they are going to be pretty much the same except for the activity that they will execute so let's go ahead and copy the whole create file and now let's replace the update file with it directly so here the asp action will of course be update but because the name here is exactly the same so the name of the file the action is exactly the same as the view we won't even need that so it's optional here so you can get rid of it but you can leave it in there if you want to specifically state it here because as i said the action has the same name as the view okay now we don't need that we commented it out earlier anyways right so now it will not be at expense but it will be update expense for example and now this patent we can just run it there we are my expenses and let's update this you see we are sent over to the update screen so here we can now make changes and of course we need to make the change to this button here it should say update instead of create so let's change that real quick and that is here at the bottom i'm going to call this update and let me refresh that real quick but basically you already can see that our software is populating the data as you can see it populates the data for us so now we can just really go ahead and make changes and and hit the update action so we have one update action which we already created in our expense controller which is the get update now we will also need to have another update method which will be the post update method alright so now we need another update method which will be the post update method which will be pretty much the same as our post create so we can just go ahead and copy this and put it down here so this will be our post edit or update however you want to call it so i would also need to change the name here to update and now even though those two methods have the same name you see there is no problem here because this one is requiring an integer and this one is requiring an object of type expense okay so everything else can almost stay the same the only change that we need to make is to actually update here so here expenses dot update and now there is one more thing that we need to change and that is we need to make sure that our update cshtml has another line up here because this view might know what kind of expense we get but it needs to specifically state the id we need to know which id we shall update and therefore we need to add the same line that we had here where we say asp4 id so this input will be isp4id and that way when we post the form with the object we get the id as well of course the object has the id but this way we can really make sure that we are passing the id correctly and it knows directly which element to update in the database all right at this point we can check it out so let's go ahead and update this rent here and let's say rent was a little more expensive than we had anticipated so it's 650 let's update it and you can see the amount is now reflected here okay so now at this point we have seen how to do all of the crude operations so create read update and delete we had a slightly different order because we first read them before we created them but then we also first deleted them before we updated them but basically we did all of the crude operations now you see how you can create data how you can read the data update it and then delete it if you ever need it all right so that's it for this video thank you very much for watching it all the way up to the outro so in this video you learned a lot about asp.net core so if you feel like learning more about it definitely check out the link in the description we have a full course as you probably already know based on the ads that you saw on this video so thanks a lot again and if you like the content that we produce then definitely hit that like button please and also subscribe because your subscription to the channel really helps us out and for you it's really just a click on the button okay so thanks a lot again and have a nice day

Channel: tutorialsEU

Views: 228,757

Rating: 4.9462557 out of 5

Keywords: Learn ASP.NET Core 5, learn asp.net core mvc, learn asp.net mvc, learn asp.net core mvc for beginner, learn programming web applications using asp.net core, asp.net core mvc tutorial, aps.net core bootstrap, asp.net core tutorial, asp.net core basics, guide to asp.net core mvc, fundemantals of asp.net core mvc, asp.net core 5 mvc tutorial, asp.net core 5 mvc beginner

Id: DqD-NJf7-OM

Length: 217min 33sec (13053 seconds)

Published: Fri Jan 22 2021