Introduction to ASP.NET Core MVC (.NET 8)

foreign [Music] are you looking for the complete guide to dotnet core MVC if so then you are at the right course my name is brugen and welcome to dotnet mastery if you are new to the channel make sure to hit that subscribe button that way you will never miss an update from.net mastery now this is not one of those courses where we typically have a small application and we perform crowd operation and with that you might be wondering what exactly will you learn from this.net core MVC course we will start from Ground Zero when it comes to MVC or net core we will understand the fundamentals of dotnet core and all the basic files and folder structure that comes when you create a dotnet core project main target for the course will be MVC but I will also give you a basic introduction to Razer pages and how it is different from an MVC application once we understand the fundamentals we will start building a simple crud application using MVC and Entity framework core and while we build that we will see client-side and server side validation we will be using SQL Server to store our data and to access that we will use Entity framework core with repository pattern while we build our project we will learn some Advanced concept like viewpag view data temp data data tables in.net core how to integrate toaster and Suite alert notification aligning and then I'll show you how to debug my main goals so I want to show you the happy path of programming because of which that will give you a real world exposure to the common error messages and how do you debug and fix them as you can see this will be a lengthy course with almost 10 hours of content there is a lot to learn and explore and I have covered all the basics of.net core MVC if you enjoy the video make sure to like the video and leave a comment but before moving forward let me show you the final application that we will build let me show you on what we will be building in this course we will be building a fancy application where we will display all the books for sale on the home page you can see all the products we have a login and register button here when a user clicks on register they can populate all the information here and we have multiple roles in our website right now because we are learning on registration we are allowing them to select the role but in production this will be hidden once you register you can log in and we will have two types of account first will be a customer role where when they log in they will see all the products they can navigate to the product details and there will be an add to cart where we will display coming soon that is all that a user can see if it is a customer user if we log out here and if we log in as an admin on the other hand we will be able to perform all the credit operation and you can see based on the role a special content management just appears in the drop down that a user can see all the product categories they can create a new category we have validations there and they can delete a category if they want next we have credit operations on product and this time we have a fancy data table where user can search for something they can sort and do all kinds of fancy stuff they will be able to create a new product from here where we have a fancy rich text editor and basically we will have to provide different price we have to select category that we want for a product and user will also have to select an image that will be uploaded if we go back and try to edit any of the product we can see the existing product and we can replace that if we want on top of that when we try to delete we have nice notifications that you can see right here also when we create a new category let me try to create a temp category here we have toaster notifications that looks much better as you can see admin can manage all the content and if you click on the email address here you will notice we have a manage profile where admin can manage their profile update their password and do other things so you can see there is quite a few things that is going on in the website that we will be building but the main focus here is to understand the basic foundations of dotnet core MVC with a small crud application and then take that application further by implementing authentication authorization and much more let me walk you guys through the Journey of dot net core in this video dot net core is probably the biggest change.net programming language has encountered in 2002 Microsoft introduced web forms and that was a revolution at that time but web forms had its own drawbacks and there was a need to overcome all of them because of that the dartlett team came up with a new architecture which was.net MVC now even though I love MVC and I have built many applications using MVC it had its own flaws like it was created on top of the components of web forms because of that it was tightly tied to IIs and ultimately Windows operating system but with evolution of development Microsoft had to keep up with the changing technology as a result of that in June of 2016 Microsoft released asp.net core and it was the first version of dotnet that was built on top of this new.net core framework this.net core platform has been completely Rewritten and it is a cross-platform version because of that it is not tied to Windows operating system now since net core was Rewritten it was written with Cloud architecture in mind and because of that it is extremely robust then in August of 2018 Microsoft released the next version of.net core which is dotnet cover 2.0 and after that the team has been very active in releasing new versions of net core lately they have finalized that in November each year they will release the new version with new features so in November 2022.net core 7 was released and net core 8 will be released in November of 2023. now even though the final version of.net 8 will be released in 2023 we can use the preview version of.net 8 using visual studio preview so the preview version is out there and that is what we will be using in this course that is a small overview of the.net framework and its evolution now that being said why should you even learn.net core and what are the advantages that.net core brings to the table when you compare the classic.net language the list is quite extensive first one is that.net core is fast and open source if you compare that with traditional.net applications there have been quite a few Benchmark and dotnet core is very fast when you compare that to web forms or even.net MVC then.net core is cross-platform the classic.net was tied to IIs and windows but since.net core is Rewritten it has removed that dependency with.net core and with.net core we have a built-in dependency injection dependency injection is super great when you will move along with the course and by the time you finish the course if you work with dotnet core you cannot imagine yourself going back to the code where there is no dependency injection it saves a lot of time and it is extremely efficient in managing all the dependencies with any programming language it is critical that new updates or new versions that are released they should be easily upgradable and that is one of the great features with dotnet core the updates have typically been very smooth and because of that you can always keep up with the new version .net core is also Cloud friendly as we move along with the development more and more companies are leaning heavily towards Cloud development and dotnet core has been built with Cloud architecture in mind so that is why it is very flexible when we have to integrate.net core with the cloud Technologies lastly when it comes to performance.net core exceeds all the previous version and even the new versions that are released in.net core they supersede the previous version Microsoft has invested a lot in dot net core that gives us a clear idea that Microsoft has long term plan with this technology so with that brief overview let me continue from the next video when you will be working with the course you will require some project resources I have edited all of the project resource in one place which is dotnet mastery.com so there if you navigate to courses go to the course detail here we have few things right here first I have a live preview of the final project that you will be building if you want to navigate next I have GitHub code well let me go back and open that in a new tab here and there if you notice I have all of the commit based on the lecture name so we have section and then the lecture name if you go there you can exactly see in that lecture what was modified so if something does not work for you you can go here and look at that exact comment to make sure that you do not have anything else that is a great resource then we have course content make sure to download that and let me open that file once you open that you will see two folders inside there if you are taking the old codes in dotnet 6 there are all the resources based on the old course but if you are taking the.net 8 course there are all the project resources where we have all the image that are being used we have code Snippets for lecture and I have the final PowerPoint which you can use in your project so make sure to download all the project resource before you move forward in the next video before we move forward let me walk you through on what are my expectations before you take the course this course has a very few prerequisites as you know we will be learning asp.net core MVC in this course because of that you must have a basic understanding of the c-sharp programming language if you have worked with the traditional.net applications that is completely okay as long as you understand the basic foundations of C sharp you should be good with the course on top of that we will be using SQL server for our database so you should have some experience in writing queries per SQL Server I do not want any fancy experience like functions and anything complex but Basics equal like select statement delete statements and those basic SQL syntax you should be familiar with them as long as you have these two basic foundations you will not face any issue in the course I will be starting from Ground Zero when it comes to explaining.net core MVC and how everything comes together with that let me continue from the next video now when we are programming we will require some tools these are the three tools that you will need for this course first you will have to install dotnet 7 r.net8 when you are taking this course F dot net 8 or latest version of.net if that is in preview then make sure to download the preview version and follow along you will require Visual Studio 2022 if you are using.net 7 because.net 8 is in preview right now but if you download.net 8 then you can download visual studio 2022 preview and with that we will be able to use dotnet 8. finally for the database we will require SQL server and SQL Server management Studio so basically you can follow along with this course using.net7 or net 8. I will also have links to everything in the description of the video so make sure to download them and let me continue from the next video what we have to do is create a project using visual studio 2022 I have opened Visual Studio 2022 here and I will select create a new project on the left hand side here I will have recent project templates but what we want to do here is search for MVC and with that we should get asp.net core web app now the project we want to work on is MVC application so make sure to select the one with model view and controller there is also a web app without MVC that uses Razer pages we do not want that we will give our project a name of bulky web location wherever you want to save it and then we need a solution name now solution name I will keep that as bulky because in there we will have multiple project with that configured let me hit the next button the framework that we want to use is dotnet8 we will select that authentication type we will be adding authentication later on but right now we want to keep things super simple and then we will add on to our project so right now we will keep that as none configure for https that looks good and we will not check the do not use top level statements it is just adding the using statements at the top and it is not that important that is why we can just ignore that and hit the create button with the click of that button the magic happens and your project is created I will explore all the files and folder that are being created by default but before that let me add this to Source control I have already signed into my git repo so that is coming along repository name let me call that bulky underscore MVC I will make that a private repository for now but once the course is launched I will convert that to be a public Repository with that configured let me hit create and push button and perfect we have two outgoing changes let me push them perfect so we have created our project and we have committed our code to the git repo our project is created here let me walk you through all the files that we see right here one by one but before I even do anything with that let me run the application by clicking the https here and that will build the project and open that in the browser Perfect by default we have a simple application let me zoom in here and we have two things in the header here home page where we see welcome here and we have a privacy page where it displays a different page so one thing you can see right out of the box we have a header here we have a footer we have a body here and we have navigation that is already configured by the default.net project that is great news but before we take a look at any other files the main file that I want to show you is the project file itself to examine the project file you have to right click on the project now here there are two things one is a project which is bulky web and then one is a solution which is bulky a solution can have multiple project in.net right now we only have one project which is bulky web when we examine the project file it belongs to a project so we will right click on bulky web which is our project and there we have something called as edit project file perfect when I open that you can see it is pretty simple right now in the older versions of dotnet core this was more complicated but they are simplifying this with the newer version inside Property Group we have something called as Target framework which says that we are using net 8.0 which is the.net 8 framework then we have something called as non-label and that is enabled now what exactly this nullable will do I will cover that in the later videos because it is too early to go into those details and next we have implicit using statements if you are coming from any front-end library or any other Frameworks you should be familiar with some import statements that you write to import other libraries now because implicit using is enabled here the default using or import statements from the.net libraries we will not have to write all of that it will automatically be included with our project if you disable that then basically you will have to explicitly add import statements nothing more complicated but it is a convenience to have implicit using enabled and that is the setting we will keep as well project file basically has all the project properties which are set by dotnet right here and on top of that when you add some of the nuget packages or npm packages then you have to add them in the project file now when we add new get package I will show you how the project file here gets updated in the upcoming videos but right now when we have the project file we have the.net Target framework that is really important and we have nullable which has been introduced from.net sex I will explain that in later videos as well and we have implicit using nothing that fancy right now but when we add more things to our project I will show you how the project file gets updated with that brief overview let me continue from the next video after the project file we have something called as connected services but that is empty we will ignore that next we have the dependencies when we build a dotnet application we always or most likely will be having more packages that will be added for more functionalities like if we have to access database if we want some payment integration we will be adding more packages right now in our dependencies we do not have any package now when we have multiple project we might also add project as a dependency so when we do that this dependencies will automatically reflect that and we will do that in future videos so do not worry dependencies basically mean that this project is dependent on some packages or some other project but we do not have any dependencies on your get package or any other project right now then we have a properties folder and there we have launch settings.json now this launch settings.json basically defines a file which will say that when we are running or debugging the application right here when we click on https what should be some settings that should be used you can see here there is IIs settings and there it is saying that you should use the URL which is http1 with the port number but if it is an https this will be the port number then if we scroll down we have something called as profiles these profiles resemble everything that you see here you can see we have an HTTP profile https profile and IIs Express in profile we are saying that when we use HTTP profile we want to run the application on this URL and we are setting some environment variables environment variables will basically be like a global variable that is defined and we can use that in application as an example let's say if you are setting asp.net core environment to development then inside the code you can check this variable if that is development you might use a different development database if it is production you might be using a production database same applies for let's say if you have a payment integration if it is development you want to use your development keys that way you do not have to use a real credit card but if it is production then you want to use the production key that way real credit card payments can be processed so we can Define all of those environment variables and profiles in launch settings.json if you scroll down we have an https profile and that is what we are using right here you can toggle between the profiles by selecting which profile you want to run the application with we are using https here and here we have the application URL let me hide that and that is 7169 I can update that to be 7001 and let me run this perfect when we execute that you can see the application is now running on Port 7001. that way you can toggle some of the properties we also have IIs Express here and you can modify them as per your requirement now typically you do not modify the profiles that much but I wanted to give you a quick five minutes overview on launch settings.json perfect whoops let me stop the application here next file that I want to show you is in the controllers well in the launch settings let me revert back the change so here I can undo my git change and that will bring back the original board now of course you can use whatever you want but I'm not going to change that with that we have covered launch settings and the project file next folder that we have is www.root folder and this is an important folder in the application this folder will basically host all of the static content of your.net core or your project now what is static content static content basically means any CSS any JavaScript any nuget packages or third-party libraries or if you have any images files PDFs PowerPoint and so on anything that is static which does not have an HTML code goes into the www root folder so you can see right here we have a global site dot CSS which is already being used in the application so if you want to add some styling here you can always add that next we have the JS file which is site.js but that is empty we just have a basic template there inside the lib folder we can see bootstrap jQuery jQuery validations all of them are included by default when you create an MVC application in future when we have to add images or anything else which is static we will always add them in one place which is www.root folder always remember that after that we have controllers models and views that I will cover in the upcoming videos but after that we have something called as app settings.json and then if you expand that you can see we have app settings Dot development.json app settings will be the place where you will host all of your connection string now when I mean connection string it is not just connection string but basically any secret key that you have for your application an example of that will be for your email you might be using sendgrid or you might have a secret key for email you will add that in app settings when you have database connection you will add those secret keys there if you are using Azure blob storage or Azure storage account you will be storing all of those Connection in one place that way when you have to change a connection you always know that you have to go to app settings.json and not go through all the code trying to find out where is that connection all of your connection all secret Keys should always go inside app settings.json now here you see there is app settings.json and app settings.development.json if you remember inside launch settings.json we have the asp.net core environment now based on this environment it will be configuring to use a different connection string like let's say in production you will have an environment variable with the name of production then inside app settings.json well in the project here let me add and show you that new file we will be adding a new item and we will search for Json file we have the app settings file I will call that app settings Dot production.json we save that here and what will happen with dotnet core is it will dynamically use that connection whoops I have a spelling mistake there fix that so perfect now in production if you are asp.net core environment name this is production then it will be using the connection string and all the settings from this app settings Dot production.json so it is pretty smart on what connection it will use but we will uncover that in the upcoming videos right now we do not want to go into that complexity only thing you should remember is all of your secrets or connection string will go in app settings.json file let me remove the production file that I added right now we are not going to use that but in the final section where we will be deploying the code I will modify that and show you how things work so perfect with that in the next video Let's examine program.cs which is a critical file now I want to cover a main file which is program.cs in the older versions of dotnet core we used to have two files we had program.cs and we had startup.cs but with the newer version the.net team has combined both of those file in one file which is the program.cs file now here let me zoom out and when we have to configure a.net application there are two things that you should remember first we have to add some services to our container and next we have to configure the request pipeline in the program.cs those are the two things that are being handled first you can see there is builder.web application that creates a builder on that Builder we are adding some services right now we are using MVC for our architecture and that is why onbuilder.services it has added something called as ADD controllers with views that way it knows that okay our application will be using controllers and those are already defined in the.net project so I know how to handle that service in future we will be adding many more services inside program.cs file like if we have to inject something using dependency injection which is a very critical aspect in.net core we will inject all of them inside the services right here and the next thing that we have is we have to configure the request pipeline pipeline basically means that when a request comes to an application how do you want to process that now one thing that you'll see on line 9 here is we have app.environment dot is development this is the same environment variable that we saw in launch settings.json its development is a built-in Helper and you can see we also have its production a staging but if you have some custom environment name you can use its environment and pass it there as well that's too technical for now but I just wanted to give you some overview on how the environment variables are being used here we are saying that if the environment is not development then we want to use an exception Handler and we want to redirect to home error page but if it is development then we want to see that exception that is why we have this if condition after that in our pipeline we have added https redirect and app.use static files when we add the use static files it will configure the www root path and all the static files in there will be accessible in our application after that we are adding routing to the request Pipeline and we have authorization now ignore this authorization right now we will cover that when we have authentication and authorization in our project but by default in the request pipeline just have that authorization is added if you even forget that that's okay next we have something that is important now when we have an application we are telling it how the routing should work and for that we have app.map controller route it basically has a default pattern that if nothing is defined in the route you should go to something called as a home controller inside there you should go to index action and ID here can be defined or not question mark in.net basically means that ID can be defined or it can be null so we are defining the default route that it should follow and finally we have app.run that will basically run the project now it might be confusing on what is going on here why do I need program.ces file what is all this middleware pipeline very strange words do not worry when we progress with the course everything will start making much sense the reason I spent five minutes on this file right now is you have a rough idea that there is one file where if I have to add a service to The Container or I have to configure the middleware I have to go to program.cs file that is all that I want you to digest from this 5 minutes and have a rough idea of what I talked about if nothing here makes sense that's okay you should only remember that when you have to configure something in the pipeline program.cs is the place you have to go with that understanding let me continue from the next video if I go to solution Explorer and open the program.cs file you can see in the routing we have something called as controller and action remember these keywords for now if you open the solution Explorer again you will notice we have a folder with the name of controllers we have models and we have views that basically defines the MVC keyword MVC stands for models views and controllers but how do all three of them come together let me show you a brief overview about that in the MVC architecture as I said first letter stands for model represents the shape of the data so if you have any tables or if you have any classes model will have all of that and what I mean by class is let's say you are building an e-commerce application where you have products you will have orders you will have order details shopping cart and much more models will basically have all of those class files next we have something called as view which stands for the user interface so whatever you see on the screen that is the view part of the MVC application the model represents the data and what you see on the screen is the user interface like if you have a form or if you have a fancy chart that you see on the browser all of that is represented by the view view will control the HTML element of your web project now you have the view where you have the fancy HTML that you see on the screen but when you have the data you will have to process or even fetch that data because data might be inside database so you need something to fetch that data and display that in a table on your HTML view that you have that missing piece or heart of the MVC application is the controller which is the last piece of the missing block here controller will basically handle the user request and it will act as an interface between model and view what happens is when a user clicks on one of the button or opens the website the request will first go to the controller controller will then determine what model it has to fetch it will retrieve all the data that is needed using the models and then it will pass all the data that is required to be displayed to the view component what view will do is it will add all the data in its HTML formatting and pass that data back to the controller and then controller will send that response back and the data or website will be displayed on your screen so one thing that you should always remember is in an MVC architecture controller is heart of your application and it might sound like I'm repeating this over and over again but MVC architecture can be tricky to understand if you are getting started so let's walk through that again when a user opens a website it goes to a controller controller will then fetch data from the models or wherever it has to do process that data like there might be some conversion or anything that it has to do and once the data is in good shape it will pass that data to The View on that static HTML it will add the data that controller has passed like in view we might have defined that there is a table but what data that table needs we will pass that from controller to the view then view will add that data in the HTML and final content it will return back to the controller which will ultimately be passed on to the user screen and user can see the complete website this my friends is the basic architecture of an MVC application our controller can have many action method action method basically Define the end points in a controller and we will uncover that in the next video but there is something called as action methods there as well if I go back to the website here you can see where we have the default route we are saying that if nothing is defined you should go to the home controller and there you have index action and something called as ID Let's ignore that right now you know the basic MVC architecture and let's cover this routing in the next video now we want to understand routing in an MVC application routing basically defines that in the URL when you type something where it should send that request to we have configured a default route here but when it comes to an MVC application we have a certain pattern and before I show you that in the application let me walk you through a presentation here to give you a rough idea you can see the URL pattern for routing is considered after the domain name localhost and port number is the domain name this localhost can be google.com can be.net mastery.com or whatever you want when we have to consider routing we remove that piece and anything after that is considered the routing pattern in an MVC application the typical route that we have is a controller and then action those are the two words that you should always always remember and write it down there is a controller and inside controller there are action methods let me show you that with an example here in this first URL you see we have the domain name which is localhost and then we have something called as forward slash category forward slash index and then a number three so the first thing that you see after the domain is the controller name and next thing with the forward slash will be an action name after that if there is anything there that will be the ID ID is an optional field that we already saw right here you can see that is question mark so if we go back what is the first thing after the domain name that is the category after that we have index and then if there is anything present that will be populated in the ID that is the default pattern that has been defined in the dotnet project now of course we can modify some things here and we will do that in the later videos but this is the default pattern we have controllers and inside there we have action based on that I have an example here and I want you to find out that based on the URL what will be the category and what will be the action and if there is an ID or not the first example here category is the controller and index is the action we do not have any ID so ID will be no after that we only have something called as category if there is no action defined then by default the action will be index action we do not have any action defined in the second example so controller will be category action will be index and ID will be now in the third example here we have controller name as category action name as edit and then we have some ID with the value of 3. and the final example here we have a controller with the name of product we have an action with the name of details and ID with a value of 3. now you might be wondering what is the importance of this assignment well it is really important from now onwards if you look at a URL that is using MVC architecture you can tell what is the controller name and what is the action name now if I go back here we are saying that the default controller is home and action is index that basically means that if nothing is defined after the domain name it is telling the application that you should go to home controller and index action method that is the default route that.net team has configured in program.cs if you want you can change that default route but that is the default route and you know how that will be converted to a URL if you want now enough talking let me show you routing in action in the next video now you have a rough idea of what is a controller and what is an action based on the URL so basically if you have a URL from that you can tell me what is the controller what is the action and what is ID with that rough idea let me go back to the project here and I will open solution Explorer you can see there are three folders here that we have not covered yet there is a view folder there is a model folder and there is a controller folder and controller you can see we have something called as home controller when we are naming any controller one thing that is important is the controller keyword so if you have a home controller you should have the name followed by the controller keyword and that must be placed inside the controllers folder if you place it somewhere else it will not work these are the rules that are defined for the MVC architecture so in controllers we have home controller in models we just have one model which is error view model it is a basic class file and it has two properties nothing fancy and we don't want to go into those detail right now another thing that I want to point out is when a request comes to controller it is not always required that a model is needed sometimes it can render a view which can be a static View and no model is needed in that case but I want you to keep that in mind that model is not always needed perfect so now we have a home controller here and all the views related to that controller will be placed inside the views folder with the exact same name as controller and this will be home and not home controller controller is a keyword here so actual name of the controller is home and that will be the name of folder inside views folder that is the architecture for MVC we have controllers and all the views that corresponds to that controller must be placed inside the views folder with a subfolder of the exact name as the controller name so perfect we can see in home controller we have an index View and we have a privacy View if I run the application here and right there you can see we have a home page and a privacy page right now we only have one controller in our application so both of the view belongs to the same controller when we load the page you can see the URL we do not have any controller name or action name we just have this welcome text let's see where the text is inside home view we have the index view if I open that that is the exact text that we see right here we have the welcome we have learn about and we have an anchor tag with building web apps with asp.net core so what we see on the home page here basically is displayed from this index view inside the home folder when we click on privacy here we have the privacy policy and if I open the privacy.cshtml file that is the data that is being displayed right here ignore this view data for now but you can see the paragraph tag is exactly what we have now something interesting that you should notice here is when we are going to the Privacy page the URL here is something that we have seen before with routing based on this URL can you tell me what is the controller name and what is the action name the controller name is home controller and action name is privacy now how does that come together I will show you that but before that let me change this to be index so home controller index action press enter and perfect we get back to the home page how did that happen when we click on home page it does not define anything in the route and that is because the default route that we have here we are saying that if nothing is defined go to home controller and index action so that means that even if you define home controller and index action it will take you to basically the same page so I hope you can see how things are coming together the main question how does it know where it has to load this particular view that we see let me show that we have home controller and index action for that let me go to the home controller here and we have few things right here you can see there is something here but ignore that what I want to show you is in home controller what we have down here these are called the action method on line 11 we basically have a Constructor for our class and I will explain you that in later videos but other than that we have three action methods here and they are returning something called as I action result I was telling you before that there are two things controller and action what we have defined in the URL we are telling go to the home controller and get the index action so at that point it will go to the home controller and it will execute this index action in index action we do not have any code we are only saying return View what does this mean well it basically says that we have to return some view inside the views folder but what view does it have to return and that is where the naming that we have given to folder comes into picture if we have not defined a name inside this round bracket it will use the same name as the action name so it will return an index View but where will it get that view from it will get that view from the home controller so it will go to the home folder inside views and there it will get the index.cs HTML and if we type home forward slash privacy it will execute the Privacy action method and the view that it will return will be the Privacy view because that is the name of the action method now we ignore the error action method that we have here but you can see how index and privacy are executed now with Visual Studio we have great debugging functionality for that what you have to do is right here when you hover you can see a circle Dot if you click there that means you have added a debugger let me add that in both the lines here and if I go back here and if I execute home index and press enter you can see the breakpoint is being hit here that means that this statement is being executed right now so that proves that it is going to the index action method we will have to hit continue here and then it will navigate or continue execution and bring back the website when we click on privacy it will go to the Privacy action method and we continue here and perfect so with that I hope you have a rough idea of how routing works but let me show you something before I end the video when we are returning back to the view actually let me go to program here and rather than home controller index action let me set the default to home and privacy and let me run that now when the application loads we do not have any URL defined so on the home page it will invoke the Privacy action method and that view will be returned perfect let me roll back that change and I will go back here to controller there when I am returning the view as I said before if nothing is defined here it will look for the same view with the name of the action method in the folder of that controller name now rather than that I am saying that when the index is being called I want you to return a view with the name of privacy in that case it will go to the home folder and look for a view with the name of privacy and Views have an extension of dot CS HTML let me run this Now the default page it again loads the Privacy page but to prove you that if I go to home and index privacy view is being loaded so you can always overwrite what view will be returned but this is the default that we have if nothing is present I will also roll back that change to keep things simple for now but I hope with that you have a rough idea of how routing works and again in controller we will have action methods that will Define what view needs to be returned back now MVC is tricky to understand as I have said before so I do not expect you to understand 100 of the things that I'm explaining right now but even if you are understanding 50 to 70 percent so far that is a great progress and when you actually start implementing this in the upcoming section everything will start making much more sense and you will understand why this pattern is so powerful with that overview let me continue from the next video now that we have seen routing we know how the views are being displayed based on the URL but if I run the application again that is not the only thing that is being displayed on the page because if I open the index.cshtml you can see there is a welcome text and a learn about that we see right here but what about this header that we have on the top and we also have a footer how is that getting loaded and for that we have to go to solution in views folder we have seen what is there in the home view but we have something called as shared and we have something called as underscore view Imports and underscore view start if you have worked with older.net application you might remember something called as Master page and a child page underscore layout is the master page of your complete application if I open underscore layout here you can see we have doctype HTML we have a head here with some styling we have a body and there we have the header in header you can see we have the home and privacy links here and we scroll down we have something called as render body this render body is a built-in helper in the MVC and that will display anything that we want in the body now what that body will be that will be determined by what is returned from the controller if we return the index view it will display that view right here after the vendor party we have a footer here where we are displaying the bulky web if we go back to the application that is what we have right here so underscore layout will be the master page of your application or the main page of your application always remember that and in underscore layout we will add all the JavaScript all the CSS that we want to use globally in the application with that we have something in the anchor tags like ASP controller ASP action these are called tag helpers but ignore them when the time is right I will explain you why we need them right now underscore layout is the master page of your application and whatever view we return from the controller that will be displayed in the render party content of underscore layout after that let's go back and we have something called as validation scripts partial there we have basically included to JavaScript now when we progress with the course we want to add client-side validation and for that we will be using this JavaScript because of that on all pages validations are not needed so what the.net team has done is it has added some of the basic JavaScript here and then on the pages where validations are needed it has separated that out in a different file and we can use them in our file only if needed we will see that in action down the road but here we have something called as validation script partial now one thing that you notice here is invalidation scripts partial we have an underscore this underscore is not required in layout or validation scripts partial but typically if that is a page or component that is used throughout the application then we typically like to add an underscore that way when we look at the name we can note that okay this view will be used throughout the application and that is also a special name for that which is partial View partial view basically means that they cannot be displayed on the Page by itself they will be incorporated as a part of some main View but that is a little too technical or little too early for now but just keep that terminology in mind that there is something called as View and there are partial views by the name partial views or basically the views that you do not use by themselves they will be consumed inside the main View then next we have a view for error.cshtml this is the view where we display the error message if anything is encountered and we can ignore that for now now one main question that I had when I was learning MVC was how does the application know that this underscore layout is the master page of the application that is simple we Define that inside the file which is view start Dot cshtml there we are telling that the layout of the application is underscore layout if I change this to be layout here let me stop that and run it things will not work we have an exception here the layout cannot be located and you can see where it is actually looking for the layout to fix that what we can do is I can rename this to be layout and then it will start working again perfect so you can see that is how the application is configured to know what is the default layout or Master page of your application let me revert back the change here I will keep it underscore layout that is the name you should be familiar with and not layout perfect let me run the application and it should work the same great so view start will Define what is the master page or what is the layout of your web application then we also have something called as view Imports here we have defined bulky web and bulky web dot models we have added using statements here if you are working with dotnet you know the using statements are used rather than typing that every time if not do not worry when the time comes I will show you why using statements are needed but on top of that it has added something called as stack helpers that also we will cover in upcoming videos but view import you can think about that as a global import file rather than importing or writing the using statement in all file you can add that here and that will automatically be available in all the views now again the view import or the using statements that we have added here will only be available in the views and not in controllers or models when the time is right in the future videos I will show you the importance of your Imports and we will also be adding more Imports in the file let me close all the tabs here and with that I believe we have covered all the files in the views we have a model controller and perfect now with the overview that we have covered with all the files and folder it is the perfect time to get our hands dirty from the next video now there is a one teeny tiny thing that I want to tell you right now when we go to controller we have a controller and we have an action method there it is returning something called as a view if you are coming here from traditional.net or some other programming language you will be smacking your head what is this view what is this action result why is this return type typically we have a return type of let's say an object or maybe a string or something like a list or a innumerable I action result is one of the custom classes or rather interface that is implemented in the.net framework and that basically implements all of the possible result type for an action method so even if things are looking like it's magic right now it is not and when you progress with the course you will see how everything comes together so right now do not and I'm saying that do not try to smack your head or be too hard on yourself on trying to understand every small piece that you see on the screen by the end of this course I will cover all of them to make sure that no stone is left Unturned but when I say that just assume this is the syntax right now just assume that for now because I know when I will be moving forward with the course you will understand all the basic Foundation nothing is Magic everything is programming and you will learn all of that by the end of this course so right now don't be too hard on yourself and let me continue from the next video when we are working with a new website typically we have a database and inside there we have multiple tables and based on that table we perform some operation and display some data before we get into all the complexities here when we are working with Entity framework core and MVC application we do not create tables directly in the database rather we create a model in our project and we tell Entity framework that hey based on the model that I have created here I want you to figure out and create table inside database and do that automatically now that might seem magical right now but it is the power of Entity framework core that will allow us to do all of that before we do anything like that in our models we have to create a portal so in the bulky web here we have the models folder right click there and we will add a new class now it does not have to be inside the models folder there are no rules about that it is one of those things that models we typically add them in the models folder you can rename that folder if you want but I wanted to point out that models is not something that is required like we have the controllers and Views folder those names cannot be updated they have to be exactly the same name but models you can change it if you want the first model that I want to work on is the category model so I will write category.cs and press the enter button perfect it creates a class here and inside this class of category we will be creating multiple properties now all the properties that we will create in the category class they will basically be all the columns that we want in category table how that mapping Works do not worry right now I can write prop here and press tab it is a code snippet we have to press tab twice and it automatically creates a property I will call that as ID I have defined ID as the integer property and this will basically be the primary key of the table next thing we have another property which will be string and let me call that name which will be the category name and last property that I want right now is display order if we have multiple categories which category should be displayed first on the page that will Define the display order so perfect we have created a category class here in there we have added three properties next item that I want to focus on is I already set that ID will be the primary key of the table but how can we explicitly Define that in our model for that we have to use something called as data annotation let me walk you through them in the next video now I have said before that ID in the category table will be the primary key but how do we Define or rather say that this ID must be the primary key because sometimes let's say if the name is category underscore underscore and then we have the ID if the variable name is something like this then how can Entity framework core know that this particular property that you have will be the primary key of the table for that we have something called as data annotation so right here in square bracket if I write key you can see it is inside system dot component model dot data annotation when I press enter here key data annotation is added here and that way Entity framework core will know that this property will be the primary key for the category table so that sounds good but by default if the name is purely ID it will automatically or rather Entity framework core will automatically think that this is the primary key and because of that the key data annotation will not be required also if the name is exactly same like the model that we have which is category followed by an ID like this then also it will automatically tweak that particular property as the primary key but with all of that defined if you explicitly Define the key data annotation that way looking at the key data annotation you can tell that ID is the primary key for category table along with that we also have another data annotation which is required once you add required to any of the property here when SQL script will be generated to create this particular table in database you will see that string will have a not node setting that is why we have the required data annotation now there are more data annotations but we will uncover them as we proceed with the course right now we have talked so much about creating database creating models having tables and adding multiple columns in there how do we Define a primary key in that table but how do we actually create the table for that we have to Define connection string in our project to the SQL server and we have to configure our application to use Entity framework core and SQL Server that configuration is little bit lengthy so stick with me and we will continue on that from the next video we have the connection string in app settings.json file what we want to do next is basically create database in SQL Server but the database that we want to create we want to create using Code that we have in the application using Entity framework core Entity framework core is the framework that will let us do all the things related to database directly from the code right here now back in the old days of dotnet 2.2 Entity framework code was already included in the main package of.net application but as the.net framework has enhanced the basic application comes with the packages that are needed and everything else have to be added manually to the project in order to add a new get package to our project we will go to Bulky web here right click and we will select manage new get packages the first package that we need is Microsoft dot Entity framework core it is already supported based on intellisense but if not you can search that as well now the version that you see here is 7.0.3 but we are using the dotnet 8 in preview so we have to enable this checkbox include pre-release if.net 8 was released then if you do not have this checkbox on you will see the latest version we want the preview version so select that and we will select Microsoft dot Entity framework core nougat package let me install that package here except the license and perfect that looks good we will be using Entity framework core but for the database we will be using SQL Server so that is also displayed right here we need the package Microsoft dot Entity framework cover dot SQL Server we have the version here let me install that one thing that I will always remind you is if you install one preview version or even with any.net version make sure all the Microsoft packages are of the same version like if you install Entity framework code with.net 8 and then if you install other package with 7 things will not work so make sure that every package that you install is of the same release let's say in middle of the course if Preview 2 or preview 9 of.net 8 is released when you are installing here you can always install the version that you want and you do not always have to install the latest one so make sure to remember that but after the two packages that we installed we also have to install Microsoft dot Entity Framework code.tools this package will enable the commands that we will use for migration now what is migration do not panic when the time is right I will explain everything to you but right now make sure to install Microsoft dot Entity framework core dot tools to the project and perfect now we have installed three packages if you go to the installed tab here you can see all of the packages again if let's say new version is released you can go to update here and update all of the packages rather than updating a single package but right now everything looks good now because we add these packages inside the manage new get package they are also added in the project file so if I click edit here you can see in the package reference it has added all three packages right here this is the actual location that is very important anytime you add a new get package an entry will be added inside the project file of that project and that way project knows which are all the packages that are being used and it will load all of them with that we have added the nougat packages let me continue from the next video in this video we want to add connection string to our project now when we are adding a connection string we actually need a SQL Server so I hope you have installed SQL Server as well as SQL Server management Studio with that in place if you hit the connect icon here it will ask you for a server name now I have multiple servers that are installed on my local machine if I type localhost and connect I am able to connect there next I have local DB forward slash Ms SQL local DB if I press that I am able to connect to that as well and I also have a local server with just a DOT here when I do that I am able to connect successfully so I have three different server on my local machine based on what server you have and you are able to connect in the SQL Server management Studio you can use that in the connection string right here if I expand database you can see I have an MVC test and a red mango API database we will be creating a new database but for that we need to Define connection string inside our project defining that is super simple but where do we Define that you can always hard code that in program.cs where we will be setting up the Entity Framework but all the connection and secrets will always go inside app settings.json it is a basic Json file where we have a key and we have value so if you have to define something with connection string you can say connection here but when you start typing intellisense will show you that there is something called as connection strings now you can ignore that and Define your own custom key here but connection strings is what we will use to get started that is one of the helper methods that have been provided with the app settings so if I double click or you can just type it here it will be connection strings that will be the key name so make sure there is no spelling mistake here and it is exactly the same inside the double brackets here next we have to define a key value pair where we have to define the value what we have defined here that is the section name and inside there we have the key value pairing we can call that anything we want I will name that default connection and then we have to Define connection string in the double quotes right here first thing that we have to Define is what is the server if I go back to SQL Server I am using a DOT here if it was something else make sure to copy that and I will paste it right here I have a DOT so that works we will add a semicolon and next property we have to Define what will be the database name I will call that as bulky let me add that and semicolon let me hide this here and after this I want to Define two properties first one is trusted underscore connection is equal to true and Trust server certificate to be true if you did not Define them sometimes when you have installed the SQL Server it requires a trust certificate if you do not set that then the connection will not work so perfect these two properties you have to Define as is and make sure there is no spelling mistake in The Trusted connection there is an underscore but when we write the trust server certificate there is no underscore or space so with that we have defined a connection string in our project in the app settings we have added a block with the name of connection strings and I told you to use that exact name reason I will explain that in the upcoming videos when we see everything come together but in that connection strings block here we have a key with the name of default connection and there we have defined the connection string for our local SQL Server so perfect we have defined our connection string in app settings.json file now how will we use the connection string to connect to the database and actually create a table let me continue for that in the next video we have added the new kit packages that are needed now we will be adding something to establish the connection between our database and Entity Framework we will create a new file but in the main project we will right click add a new folder with the name of data and inside there I will create a class which will be application dbcontext.cs now you can call that anything you want I am calling that application DB context because that is what I have been using but before we write any code in this particular class file make sure you remember one thing whatever we will do next is basic configuration that is needed for Entity Framework so think about it like that if you have to set up some other package in an application in any programming language there are some things that you have to do it is the basic syntax or basic classes that has to be configured in this way in order to use Entity framework core and it just has to be like that I will try to explain everything that I do here but remember whatever we will be programming in the next two videos is basic configuration for Entity Framework first thing that we have to do is any class that you have here that must implement the DB context class that DB context class is basically the root class of Entity framework code using which we will be accessing Entity Framework if you press Ctrl tart here you can see we have using Microsoft dot Entity framework core perfect so our application DP context now basically implements or inherits from the DB context class which is a built-in class inside the Entity framework core nucat package next thing that we have to do is in the DB context class in the Constructor we have to pass the connection string now how will we pass the connection string that we have inside app settings.json to RTP context well basically what we will do is when we will inject this application DB context or rather configure the application DP context we will get that connection string as a parameter in Constructor as DB context option and that we will be passing on to the base class so right here let me add a Constructor by typing cdor which is a snippet and if I press tab twice we have the Constructor here we will be configuring something called as DB context options and that will be on the class which is application DB context I will call that as options now again this is something that we will be configuring it has not been configured and do not panic on what it will be or how I will configure that just remember that when we register application DB context we will be adding some configuration whatever configuration that we add here we want to pass that to the DB context class so if we have to pass that in C sharp we will write base here and we will pass the options like that that way what will happen is whatever options we configure here will be passed on to the base class of DP context that is great but now where will we register this application DP context whenever we have to register something we will do that in program.cs always remember that so right here you can see we are adding services to the container in that block before we have this line of Builder dot build we will be adding all the services that we want and what we want to add is we want to tell our application that hey we want to use Entity framework core so for that we will be adding Builder dot services and there we have to add the DB context this is the DB context that is there in Entity framework core so when we say that we want to add DB context we are basically telling that hey we want to add Entity framework code to the project so where we have the RDP context here we have to tell that which class has the implementation of DB context we added that inside the application DB context right here so I can copy this name go back here and paste it there if we add a semicolon there perfect we have added DB context to our container but there is one thing that is missing here we also want to configure some option if we go back here in C sharp or in dotnet core when we have to configure options we can call it anything we want we can say o goes to and configure that o object or to be explicit I can say options goes to which is the arrow syntax and then we want to Define what are the options we want to configure so we will write options here and you can see there are quite a few things that we can configure on this options object what we want to configure is we want to tell that DB context will be using SQL Server for that if you write use SQL Server it is inside Microsoft dot Entity framework code new get package that way we are telling that the DB context that we have in our project will be using SQL Server and again these are the basic steps that are needed to configure DB context and Entity framework core now the one last thing that is missing here is when we are using SQL Server we have to define the connection string right here now where is that connection string if you set app settings.json file you are correct how will we retrieve this connection string from app settings and pass it in the parameter right here let me break this in different line and perfect now right now we are using a section with the name of connection strings which is a built-in section and there you can see it says get connection strings with the eye configuration dot get connection string extension method so if I go back here Builder dot configuration and there we have a built-in helper method which is get connection string you can see it is a shorthand for getting a section with the name of connection strings that is the exact name that we have inside the app settings.json file and because of that it will retrieve that connection string but inside that section we have the key value pair key name is default connection so we will copy that and I will paste that right here I will add the closing bracket here and perfect that way it will retrieve the connection string and pass it inside the use SQL Server before we take a look at this and see how everything comes together let me introduce an error here by saying default connection 1. in app settings right here we have default connection but I have intentionally added an incorrect key name right here with that configured let me continue from the next video now that we have application DP context that is being configured in our project how do we actually create a database and I have said before all the setup that is needed for Entity framework code is complete so basically it was not that much if you see we had to add couple of lines in program.cs and we basically had to create a class file that will implement the default DB context that comes in Entity framework core that is all that we have to do and Entity framework code is configured and ready to be consumed but how will we use that first thing that we will do is we will actually create a database based on the connection string I want to create a database of name bulky let me switch back to SQL Server here and connect to my server which is a DOT here and examine the database we do not have it right here let me go back to visual studio and we will go to tools nougat package manager we have package manager console right here we have to write few commands to work with Entity framework core and because of that if you remember we installed the new get package as well now when we change something like if we add a model and if we want to create a table of that model we have to do something called as ADD migration but right now we do not want to do anything we want to create the simple database that we have and for that all we have to do is write the command update database and press enter when we press enter you will notice we run into an error message and perfect it says the connection string property has not been initialized and that is correct because in program.cs we have default connection 1 it should be default connection that is what we have in app settings.json so with that configured if I open Package manager console and run that same command once again it will display another error message and perfect this time it says keyword not supported which is server I have introduced an error message in connection string as well that way if something does not work you know that either it is not able to read the connection or something in connection string is not valid rather than colon here this will be equal to if you save that and then if you run it once again now it will create the database successfully perfect you can see done here and it says something that no migrations were applied database is already up to date what does it mean by that do not worry let me go back to SQL server and refresh the database we have a new database with the name of bulky and inside tables we will have one table that table is dbo.ef migrations history now what is migrations H3 what is migration do not worry right now for this video I want you to remember what we did based on the connection string that we have we use the command update database to create a database that is all that we did right now now the next task that we want to do is if you examine solution Explorer we have the category model I want to create a table for a category and that table will have these three columns let me show you how to do that in the next video now is the time to see some magic well it is not magic it is basically the power of Entity framework core that we will see in this video we want to create a category table and we want to add these three columns before I do that rather than ID here let me call that category 21 ID and remove the key data annotation that we added because I want to show you an error message before we continue on with the video now I have said before if you use key data annotation that is how Entity framework core will know that this column will be the primary key of the table but right now it is not defined and the column name if it was category ID which is basically the model name followed by ID or if it was only ID then also it will automatically default that to be the primary key but intentionally I am calling that category 21 ID with that configured we want to create this table in our database now where is our database if we have to find that in our files where do you think it is anything that we have to do with our database is inside application DB context because that is where we have DP context which uses Entity framework core when we have to create a table here we have to create something called as DB set inside application DB context so I will write prop here press Tab and the type here will be DB set and there we have to Define The Entity which is a class so what is the entity of this DB set we want to create a category table so I will add category here and then my property will basically be the table name that you want for a table inside SQL Server if you want to call that categories then you can write categories here and that will be the table that will be created in database this simple one line will automatically create table and that is the power of Entity framework core in order to create table we have to do something called as a migration to add that we have to go to tools nougat packet manager and package manager console here we will have to write a new command which is ADD migration and then we have to give our migration a meaningful name in this migration we know what we are doing is we are adding category table we will give our migration the name of add category table to DB and we will press enter now when you press enter right now you will see an error message because we do not have a primary key and perfect you can see if we expand this here the entity type category requires a primary key to be defined we do not have that defined here because of that we saw that error message if I write key here and then run the migration it will create a command to create table with this particular primary key I do not want that I want to call it an ID so I will change that to be an ID and then we will run that same command once again which is ADD migration perfect this time something just happened we can see build started build succeeded and we have to undo this action use remove migration but what exactly just happened and in the back end here a new file has been created if we go to solution Explorer here let me pin this for a second here and show you what happened if you examine there is a new folder that has automatically been created with the name of migrations and there we have some random entity here which is basically date timestamp and then name of the migration which is ADD category table to DB that is the file that is opened right here now what exactly is this file well if you examine here Entity framework code has written some code in its own language to create our category table you can see there is something called as migration Builder and on there there is a command create table it is creating a table with the name of categories and then in columns it is creating three columns ID name and display order in the constraints here we have something like table primary key will be the ID column that you can see right here and another thing is we have something called as up and we have something called as down so if everything is successful we want to create this table but if something does not go right in the down method here it says drop the table that you were trying to create so down is basically rolling back whatever we were doing inside the up function right here now again you might be thinking that okay we have something with migration Builder but how will this table be created we do not have a SQL statement of create table and we do not have anything to define the identity column there is just something called a SQL Server dot identity that is where Entity framework core again comes to picture now that we have added the migration here in the package manager console if we run the command update database what Entity framework core will do is it will check hey are there any migrations that have not been applied to the database the answer will be yes the new migration that we added has not been applied to the database yet because if we go back to the database we do not have that table now even though this is related more on the Entity framework side I want to spend couple of minutes to explain how it will figure out which migrations have not been applied if you see in the table it created EF migrations history table if I do select top thousand here I did the edit by mistake but if I do select top thousand that is empty that means no migrations have been applied on the database because of that when we apply the command update database here it will check in that database that what was the last migration that was applied since nothing was applied it will go to the migrations folder and whatever migrations are there it will apply that on the database so it will take this code here convert that to the equivalent SQL code and it will create that table let me see that in action so we go back and we will press enter here and it does something perfect we have done here once it is done if I go back to the server and if I refresh here now you can see in the EF migrations history it is tracking that this particular migration at category table to DB has been applied if I refresh the table here you will see the new table of categories has been created and there are the three columns table name is categories and that is what we have as the dbset property name right now if you are confused and if you think that some magic just happened and it created the table do not worry you are just getting started with Entity framework core and it is the power of Entity framework code that you can accomplish using migrations as we proceed with the course you will see this in much more detail and you will fall in love with migrations that way you do not have to deal with writing the SQL commands or working directly with the database you will be doing one thing that you love which is writing code and that code will automatically do all the heavy lifting for your database but before I end the video let me summarize what we have to do when we have to create a table we first have to create a model inside there we will have few properties next in the application DP context we have to create a DB set for that then in the package manager console we have to add a migration once we add migration then we have to run the command update database and that will push the migrations to your database and with that we have created our categories table in our database let me continue from the next video we want to perform crowd operations on category that basically means we want to create a category get all categories delete a category and update a category and for that we will be requiring a controller because right now when we run the application we only have the home controller you can see we have the home and privacy here similarly we want a category controller where we can manage all the categories so let me stop the application here and where we have home controller in the controllers folder right click add we have a controller now you can use the other templates that are there but we want to start fresh so I will use MVC empty controller and we have to give it a name let me call that category controller now remember when you add a controller you must have the controller keyword at the end that is how the code will know that this particular class file is a controller let me hit the add button here and perfect it adds a controller inside there it has one action method which is index action method now how will this endpoint be triggered let me add a debugging Point here and let me run the application in the application if we want to go to category controller how will we access that for that we will write category here and next what is the action method and next what is the action method the default action method that got added it is index so we can say index here and press enter perfect it hits our debugging Point here and if we continue we will see an error message an unhandled exception occurred while processing the request the view index was not found because here you see when the action method is called it returns back a view typically when we were working with home controller we had views in the home folder but when we are working with category controller we added that controller but we have not added any View if you go back it also displays which were all the locations that were searched it will first look for a category folder and try to find index.html if it does not find that it will also look into shared folder which is a shared location for all the partial views what we have to do is we have to create a folder with the name of category and add the view inside that folder let me do that we will close it here in views we will create a folder it must match the name of category and inside there we will be adding a view now when you are working in the view if you right click and go to the add button it automatically displays that hey default thing that users typically add is a view so that is what it displays at the top there let me select that and we will be adding the empty View now you can select the Razer view here or the empty view we will go with the empty view name index.cshtml that looks good let me add that we do not care about anything here let me remove that and I will just add an H1 here and I will say category list right here with that let me run the application once again perfect let me navigate to category controller we have the index action we will press continue and perfect it takes us back to the view and it displays the category list that we added so great we have added our first controller in the application and we have also added the corresponding View and on this page we will be displaying all the categories that we have in our database we want to display all the categories on category list page that we added but every time when we run the application we do not want to go here and type this in the URL rather I want to add something like category here when we click there it will take us to this URL now where do we have this header that you see on the screen if you set underscore layout you are correct let me stop the application if we go to the shared folder we have underscore layout there and there we have ul and Ally elements where we have the Ally with the anchor tag now this anchor tag might seem a little different because in this anchor tag we have something called as ASP areas you can just delete that for now we don't care about them but we have something called as ASP controller and ASP action these are TAG helpers and they are useful when you are working with the dotnet application you can think of them as helper function or helper entities that are available to you when we have the anchor tag rather than having an href here and saying that okay take me to forward slash home and then index we have the helper tags here where we can say on the anchor tag take me to the controller which is home controller and in there take me to index action and if you look at that it is more explicit that which controller what action is being invoked when we click on this anchor tag let me copy this and paste it one more time next thing that we want to go is category controller and action is index action what we want to call here is category and perfect that looks good these are just the bootstrap classes so we will ignore them but basically we added another element right here with that configured let me run the application and see if that works perfect we have category and when we click there it will hit our debugging Point let me remove and continue and perfect in order to remove you just have to click that once again and it will remove that debugging point so perfect now we can go to category and navigate between Pages pretty easily on the category list page we want to display all the categories but if you go to database we do not have any categories right now if you want you can do edit top 200 and basically add some categories right here but rather than that Entity framework code provides you with some helper functionality on if you have to seed some entities in your database for that we will have to go to application DB context let me open that inside the application DP context after we have the DB set we will overwrite the default function which is on model creating and that expects a model builder now this is a default function that is already there in DB context and we want to overwrite the default Behavior so we have to use the override keyword for that it expects a model builder and if you examine any of the migration we were using something called as migration Builder there and here we are getting a parameter of type model builder using this model builder we can see data now again do not think about why exactly we have model builder or why on model creating it is the default thing that Entity framework has implemented and we are just using that two-seat data and in order to see data we will be using model builder there we have entity and What entity we want to create or work on that is the category right here so we will say category and then what we want to do we want to add some data so on that we have a method which it has data and inside there you can see in the programs here it expects a category array and if you examine the comments here it says ads see data to this entity type we want to create a new object here so in has data we will say new category and there we will have to populate ID we will give that one name let me call that action and display order is one using that it will create this particular entity but if you want to create more categories you can add a comma and paste it multiple times here let's say you want action then you have sci-fi and you have history we will change the display order as well and we will keep them the same as ID perfect now we are telling Entity framework code that hey on category we want to create these three records and again to do that we will have to add migration whenever anything has to be updated with database we have to add a migration always always always remember that so we will say add migration and I will call this seed category table perfect that works if you examine the migration it is calling something called as insert data and it is inserting three records all of them looks perfect so what do we do to apply these changes we run the command update database and that will seed our data perfect with that if I go back here and refresh great we have three records in our category table in the next video let me show you how we can easily retrieve the three records that we have in our categories table now that we have three records in the categories table how can we retrieve and display them in the index view for our category in order to pass that to the view we have to retrieve that in our controller because whatever we pass to the view here that is what it will use and display in the UI so first we have to work on the controller here for that let me close everything else here and when we have to work like retrieve data add data or update data we will be working with one thing that is application DB context now if this was not a.net code application what we used to do is we will have an application DB context here we will create a new object of that let me call that something like DB here and then on that DB we will have to open connection close connection and all of that but we are not working with legacy.net application we are working with dotnet core what happens with net core is when you add something to the services container right here that way you are adding that two dependency injection right here you have told the.net application that Hey whenever someone asks an implementation of application DB context this is the configuration that you have to do and based on that you have to create an object and provide that because of that we no longer have to work with creating those object what we can do here is we can directly tell the application that hey give me an implementation of application DB context I know you have that because I registered that inside the services we will get that inside Constructor so I will write ctor and press tab here and inside the parameter here we can tell that what object or what implementation we want we want an implementation of application DP context let me call that as DB then right here let me create a private read-only field which is application DP context call that underscore DB and whatever implementation we get inside the Constructor here we will assign that to our local variable that way we will be able to use this inside any other action method next what we want to do is in the index here we want to retrieve all the categories you do not have to write any SQL for that using Entity framework code you can retrieve all of that so here let me call this as war and I will call that obj category list is equal to we will use underscore DB intellisense here is displaying the complete Command that is needed but let me type that on this underscore DB we can access all of the DP sets that we added the DB set that we want to retrieve this time is categories so if we type categories we retrieve that and on there we have a method dot to list that will convert that to a list and assign it right here because of that we can also call this as a list of category I personally do not like using War so you can be explicit that a list of categories will be retrieved using this command you can see how simple it is with Entity framework core you have to write only three words here it will go to the database run the command select star from categories retrieve that and assign it to the object right here let me add a debugging Point here and see that in action we will click category here and perfect we hit our breakpoint if I press F10 it will go to the next line here and if we examine the category list here great it has three object we have action sci-fi and history so you can see how easy it was to retrieve everything from database using Entity framework core for the category table but when we go back to the view we do not display that what we have to do is we have to pass this object to the view and then in the view we have to fetch that and extract and display all the categories let me do that in the next video now we have the list of categories right here in the opj category list but how do we pass that to the view which is if we go to view category we have the index View if I switch back to the browser here you can see we are displaying category list rather than that we want to display a table so first let me create a table right here I will add a table give it some bootstrap classes off table bordered and table striped in an HTML table element we have TR and inside there we have th for heading so first we have a row in there we have columns but first we need to display the headings here so let me display category name and followed that by the display order with.net 7 we have something called as heart reload so if we save the change let me keep them side by side and if I save the changes it should automatically refresh the UI and that will only work if views are updated if you change something in the controller you will have to rebuild the project but if you update something in the views which is HTML CSS or JavaScript it should automatically reflect those changes that way you do not have to reload the application every time but right now you can see that is not working the reason behind that is you see the icon here for heart reload if you click on the Arrow next to that the hard reload on file save must be enabled once you do that then restart the application and if we go to category here we hit our breakpoint let me remove them but perfect we display the table let me change something here and save it and perfect you can see it automatically refreshed and we do not have to restart the application anymore so that is the power of hot reload and width.net 7 it comes built in that way we do not have to restart the application when we are modifying some things in the view side of the application with that we have the table header here but we want to display the details let me do that in the next video hot reload is now working in our project but what we actually have to do is from the controller here we need to retrieve the category list and we have to display that in our view by now you should be familiar with the terms when I'm using controller actions views and models to repeat again we have the controller here inside there we will have action methods that will be invoked and we will have corresponding views related to that inside the views folder with the same name as the controller so perfect we have all the categories right here how do we pass them to The View pretty simple we copy that and paste it in the round bracket that way it will automatically pass this object to the view and then we have to capture that or retrieve that in the view so here we do that using the model keyword when we write that we have to write at the rate model and make sure everything is lowercase this time because when we have to access model it will be different but when we are retrieving or defining the model at top here everything will be lowercase and then we have to Define what will be the type of this model if we go to controller it is a list of category that is being passed so we can copy that and we can paste that right here that way we are defining that our view will get a model which will be list of category once we Define that then we can use this model inside our HTML code when we are working with MVC application we have the view here and inside there we have something special we can write C sharp code if you are coming from.net background this was not possible but here we can have C sharp code like if condition for loops and much more to write any c shortcode inside the view we have to use the add sign and let me add that inside the T head and we will have a tea party this is basic HTML and nothing to do with dotnet core but now when we have the D body we will have a Dr here and I will add a TD tag where we want to display the category name we will add another TD where we want to display the display order name and display order will be inside list of category so we will have to iterate through them and display all of them basically we need a for Loop for this Dr element to add a for Loop we have the add sign we have the for each statement and you can see we can easily write C sharp code inside the UI component which is our view so for each we will say variable obj in model now here in order to access the model that we have defined on the top here we cannot write model in lower case but we have to rather write that in Pascal case so M will be capital and that way it will iterate through the model that we have defined on the page and that will be list of all the categories so perfect we are iterating through them we will have the curly bracket and I will close the curly bracket after TR like that foreign if I save all here and if I go back to the view because of hot reload you can see it is displaying the name and display order three times that is because we have three categories in the database but in order to display the value inside obj again we have to use the add sign we can access obj if we write dot similar to the C sharp code we can access all the properties so we have name and we have obj dot display order save that go back and perfect with that everything is working as expected we are displaying the name as well as display order one thing that you can do here is where we have the model we can do C sharp code because we are in the add statement so we can order that by and here we can Define the property which will be U goes to U dot display order if I save that perfect now we have the ascending display order you can see how powerful views are where we can incorporate c-sharp code within our views and we can do some complex calculation which was not possible in the older.net Frameworks so perfect we have made great progress let me continue from the next video everyone loves a pretty application but when you are working with backend programming designing is not something that typically developers are comfortable with thankfully we have bootstrap and on top of that we have something else to make bootstrap look even better and for that we will go to bootswatch.com boots watch basically provides free themes for bootstrap so it takes the bootstrap CSS and modifies them to give you different styling you can scroll down here and we have multiple themes that are available right here I will be using Lux theme for the project we can click the download here and we can download the bootstrap.css let me open that I will copy this let me switch back to the code here and stop the code for a second if we examine the underscore layout that is where we have the bootstrap CSS right here what we can do is we can directly modify that inside www root we have the lib folder bootstrap CSS and we have bootstrap.css as well as the minified file let me modify the bootstrap.css I will remove what we have here and paste the new code that we copied with our new style then in the underscore layout here we will not be using the minified file we will be using bootstrap.css with that configured let me run the project and see if we are able to notice some difference and perfect you can see right away this looks different than what we had that looks much better on top of that I want to make the header and footer here a little dark so we can go to underscode layout here and where we have navbar light we will write the class nav for dark and PG dark let me switch back here and we have a gray color I wanted the black one so let me go into the theme Here and we open that we have navbar dark and BG primary we will go back here BG will be primary and perfect that looks better we need to modify the color let me go back we no longer need the text Arc I will remove that and let's see perfect that looks much better we will make the footer dark as well so let me go back we have the footer here we will say BG primary and let's take a look at that and perfect that looks better the footer here we will keep that bulky web perfect now we also require icons we will go to icons.getbootstrap.com and we will go to the install tab which is at the very end we have the CDN for that copy that CDN and we will add that inside the underscore layout we will paste it in the CSS at the top here and that looks good with that configured let me go back to the website here and let me search for an icon we scroll up I will look for a hard icon and we have the heart fill copy that we will modify our footer once again and I will paste it made with heart by dot net mastery save that and perfect looks much better let me do text Center here and great our header and footer are now looking great but we have added bootstrap icons as well as we are using the boots watch theme let me continue from the next video now in our category page we are displaying all the categories but what if a user wants to create a category for that we need a button here that will take us to a new page which will be dedicated to creating a category so let me add that button and add some styling rather than plain simple H1 here let me remove that I will add a div give it a class of container and we will close that div at the very end right there then we will add div give it a class of row and padding top of four these are just bootstrap classes that we are using we are defining a container and inside there we have a row in bootstrap row is divided into 12 columns in a page so one row will basically have 12 columns what we want to do is inside that div class of row we will be using six columns that means we are left with other six column we will add those other six column right here so the six columns on the left side which is left hand side of the page we want to display the heading we will use H2 here and we will give it a bootstrap classes of text primary which is black color there we will display category list so let me save that and perfect looks good on the right side here we want to add the button to add a new category and that button will be on the right side so with column 6 we will add something like text and that will make sure it floats to the right side inside there we want an anchor tag and that will take us to some controller and inside there it will invoke some action what it is we have not defined that but we will do that in the upcoming videos we will give it the bootstrap classes of BTN BTN primary and let me say create new category along with that let me add a bootstrap icon as well so I will search for plus icon and we have the plus Circle let me use that paste it right here and let's go back perfect we have create new category along with padding top four let me do padding bottom and I think three will be good perfect that looks much better for our category list page now what should happen when we click the button of create new category let me do that in the next video now we want to work on creating a new category for attic will be a new page but when we work with creating a new page we do not go by directly creating a view we first have to create an action method that will be invoked and that will call the view that action method we will be adding inside the category controller creating a new action method is super simple we will say public return type will be I action result and let me call that as create all that we'll do right now is return back The View Next Step will be to create the view itself we can navigate to the Views folder and create a view in category or we have a shortcut on the action method we have ADD view if we right click there we can select that and we can add an empty Razer view right there change the name to be create that name must match the action method name that we have with that let's hit the add button and remove everything that we have in there I will just add an H1 and I will say create category save that and let me run the application when we modify something in the controller we have to restart the application so if we go to category here we will not be able to navigate to the create page because right now if we click here it takes us back to the home page and if I go back to the code here inside the index view we have not defined what controller or action method should be invoked if you think about that the controller is same in index it is the category controller because of that if you want you can skip the ASP controller and only Define that hey when this button is clicked I want you to go to the create action method it will look in the same controller and try to find that action method with that change if we go back to category create new perfect it takes us to the create category and that is exactly what we want but I like to be explicit even though we are in the same controller I like to define the ASP controller name which will be category controller now the reason behind that is when you have multiple files and folder it is much easier to know which controller and which action method is invoked rather than trying to find out the default controller and another point I will tell you is always try to write the controller name before the action name because when you have to find out or you identify some action method it is always inside a controller so that is why I try to write the controller name before the action name but even if you switch that that is fine it is something that I prefer and it is easier to read because of that I always write controller and then the action in that controller but with that if we save everything here and go back category create category that is working inside create category we need a form where user can input name of the category and display order and we need a submit button so let me create that we will switch back to the code here and we will be working with create view right here now typically when we are working with the view first thing that I always answer is what is model of that view so think about what will happen or what will be displayed on the page we will ask user for name of the category and display order and we will have a create button so basically we are working with category model so here our model will be the category itself we will be adding that category when user hits the submit button now you might be thinking if we have model here we will also have to pass that when we are creating well if you want you can pass new category here but that is not required if nothing is passed here and if we are defining the category it will create a new object for that and by default all the values will be empty and that is exactly what we want in this case so even if you do not pass anything in the view here and you have a model category here it will think of it as a new category object with the default values so with that we need a form and we will be creating the category so we will have the method of post next we will have some bootstrap classes for Dev with class of Border padding 3 March in top of four and inside there we will add a div give it a class of row and padding bottom of two simple bootstrap classes nothing fancy we will have the H2 with the class of text primary and we will say create category followed by a horizontal line that is what we will have in the first row after that we will create a new div give it a class of margin bottom 3 and inside there we want a label now label we know we want to display the name so we can do that here or rather we can also say category name and we have something for input field let's add that and give it a type of text we will also add a bootstrap class here for form control to give it the full width here copy this paste it one more time next thing that we want is display order let me save that and go back to the application perfect we have category name and we have display order after that div we will add a button which will be of type submit and we will add some bootstrap classes of BTN BTN primary and let me give it some width so style width of 150 pixels that looks good this will be the create button let's add that after that I want a button to go back to the previous page which was category list so that will be a link so we will have anchor tag we will Define what controller we want to go to it will be category and what action method in that category should be invoked that will be index action we will give it some classes BTN BTN secondary and we will give it the same width of 150 pixels the anchor tag here we will display back to list save that and perfect we have the button to go back to the list and that is working as expected now let me work on designing of this button a little bit so right here we can create a div give it a class of row and inside that row we will add a div give it a class of column six and the other one will be the same column six bootstrap divides it into 12 column last one will have the pattern to create next one will have the link to go back we will remove the style element here for the width and the class let me add form control to give it full width here perfect let's go back and we have both the buttons now rather than secondary here let me change that to be BTN outline secondary and that looks much better and with BTN secondary let me also give it a little bit of border and perfect that looks much better now when we are working it is always good to make it responsive as well because of that right here also let me make this row that way it will be responsive now if I press F12 here and perfect if I make it responsive you can see everything is changing but when we are on the large screen we do not want the big buttons what we can do for that is we can Define if the screen is medium or large you can take three columns change that and paste it here that basically means if it is smaller than medium it will take six columns else it will take three columns perfect you can see it is working good here and if we minimize this then it takes the sixth column and last thing that we will do is you can see there is some space before the category name to fix that we can add a class of padding zero copy that for display order as well and here we can give padding one that should be good let's see great that looks much better with that our UI is looking great and it is responsive let me continue from the next video now we have the form to create a category but with net core we have tag helpers that we can use to make this input Fields more dynamic because basically we have to bind somewhere that this input field is for category name and the next one here is for display order in older versions of dotnet we used to bind them with name property when we post the form we used to retrieve and assign them but net core has made everything super simple we have the model that we have defined here so with input we have tag helpers which is ASP hyphen 4. inside there we have to Define what this input field will be responsible for and that is for name now if you think our name is working here that is because we have category model and that has a property with the value of name if you write name 1 here it will not work you can see category does not contain a definition for name so it will only have those properties which are defined in your model and the best part is if you have asp4 then you do not have to Define type as well it will automatically find out the type based on the property name so the next one here we will say asb4 that will be for display order we type that an intellisense already displays that same thing we have for the label name as well so if we use esp4 we do not have to Define display order here it will automatically add that and let me show that we will remove the category name here save them and let's go back great you can see name and display order but then we have another issue the property names that we have does not have a space what if we want to add a space in display order for that we have data annotations that we have to add on our model where is that we have the category model let me stop the application here we have seen the data annotations that were required for Entity framework core but we can also add data annotations that are useful for client-side UI or client-side validation we have something called as display name and there we have to write the name that we want so when it is being displayed we won't display order with a space and where we have the name let's say we want a display name of category name with that configured let me run the application again so let me go to category again and create new category perfect now we have the category name and display order the text Marks here looks off let me go back here whoops sometimes you will have to stop and restart for the UI changes as well but that should be okay let's go back here and perfect now best thing when we are using esp4 and the property name are the same for label and input if you click on the label it will automatically highlight the input field so that is also done with the help of tag helper you can see display order it automatically knows it's an integer value and it defines that right here so that is the beauty of working with tag helpers with that configured let me continue from the next video now we have the form and we have the create button if we examine the code we have the form and we have method of post so basically when the button is triggered it will hit the same end point with the post request for that we have to create another action method inside category controller which will be of the same name so copy and paste it here but that will be of the type HTTP post so whenever something is being posted this endpoint will be invoked and there we have to add the category also when we are posting something here we will be getting the category object because if we examine the create here we have that model and in form we have those properties so when it is posted it will provide that form in the category controller let me call that obj once we have that object that will have the value of category that needs to be added let me add a debugging point and show that we go to category create new category let me type something here and hit the create button if you examine the obj here perfect it has the display order and Name ID will be 0 and that is okay because right now we want to create so ID must be zero then how can we use Entity framework code to create a category we have seen how to retrieve that right here but creating is also super simple we have underscore DB that is already available as DB context on there we have the DB set of categories and there we have a method provided by Entity framework core which is ADD and there we have to pass the object which will be of type category so we can pass the obj that we retrieve in the parameter here and that is the only line that you have to add category you do not need any insert statements or anything else but on line 27 we are telling Entity framework code that hey you have to add this category object to the category table but on line 27 we are only telling what you have to do we are not telling it that okay you are good you can go ahead and do that if you are ready to execute that statements then you have to say underscore DB dot save changes so on line 27 it keeps a track of what are all the changes that I have to do in the database because in future there will be more changes and you do not want to go to database every time it is possible you want to combine five changes together and do all of them in one single database call so on line 27 it is keeping track of what it has to add and on line 28 it will actually go to the database and create that category before we see that in action once the category is added we want to redirect to the category index view where they can see all the categories now we cannot go back to the view but we can go to the index action there it will reload the categories because when a category is added we have to reload and pass that to The View so rather than returning view we also have something called as redirect to action if you are in the same controller you can only write the action name here which is index and that will work but if you have to go to a different controller you can write the controller name here as well so if you want you can be explicit and say go to category controller but since we are in the same controller we can skip that right here with that configured let me actually add the debugging point back here and run the application we will go to category and try to create a test category give it a display order of 5 Maybe we hit our breakpoint perfect add statement is executed and we can go to SQL Server execute it has not been added yet once we execute the save changes here then if we go back perfect it added that category let me continue and great we see the new category has been added so you can see how simple it was to add a category using Entity framework core we do not have to open connection close connection write any SQL statements to insert data everything is handled by Entity Framework with that configured let me continue from the next video now when we are creating a new category we want validation one validation could be display order cannot be less than one and category name is required we can also add some validation that category name must be less than let's say 20 characters typically in.net when we had to use validation we had to use JavaScript and we had to write all the code but with.net core we have those validations built in and the support for jQuery is already added in the project let's see how we can use that and add validation we will go back to the project here and first we will be working with server side validation which is in the controller when we are adding a category we want some validation inside the category model we added some data annotation like name is required but next for display order we want a range validation and we have that data annotation as well so with range we can provide the minimum value it has to be 1 and for maximum we will add 100 that means we will have 1 200 for the display order after that for the name here we will add the max length data annotation and we can say max length will be let's say 30 characters with that configured we have added the validations that are needed in category but how will this validations be implemented on the create page .net core has built-in tag helpers for that where we have the input here let's say if there are some error message with the name then we want to display that right here but even before we display let me go to the category controller here we will add an F condition and there is something called as model state DOT is valid this basically will check if the model state that we have which is the category object here if that object is valid that means it will go to category and examine all the validation if it is required then whatever is being populated here in the name must be populated if it is not then the model state is not valid and it will not go to the database and save the category let me run this and see what happens we go to category create and if we hit create now it takes us back to the page but does not add a category if I have display order here does not work similarly if I have name here but if display order is 0 it will not work because we have the range validation if we add a debugging Point here you will also notice the model State value let's set the create here the is valid is false if you examine model State here you will notice in the result view it will display what exactly is it checking name is valid but display order is invalid if you expand that further it will display the exact error message as well so perfect our validations are working in the project but right now if something is not valid it is redirecting to the index page and we are not able to see those error message for that what we will do is stop the application if everything is valid create and return back to the index else we want to return back to the view itself with that let me run the application and this time it will stay on the page here but we will not see any validation or any error message we already saw in model State we have the exact error message displaying that is super simple and we should be thankful to tag helper for that to display error message inside tag helpers we have something called as ASP validation 4 and it will evaluate everything against the current model so ASB validation for this is the validation for name model we can give it a bootstrap classes of text danger for the red color copy that we will have to add one more span for display order so now if there are any errors with name it will be displayed here if there are any errors with display order it will automatically be displayed here and that is the power of tag helpers once you save that we will have to restart the application let's go to category here and create a category perfect if we try empty here it displays the validation and if we have the range one perfect that looks great now we have server side validation but what if we want to change the message that is being displayed here super simple as well with data annotation we go here and with range we have a custom error message field and we can provide the custom error message here here we had the end we are replacing that with hyphen let me restart and see if that works we go to category here create and perfect we have the custom error message so perfect with that we have same tag helpers and server side validation now these are the built-in validations that we have with data annotation but what if you want some custom validation like let's say for some reason you want a validation that name and display order cannot be same in order to implement that let me go back to the controller and where we have the create we have to do some check we can check if obj.name dot to lower is equally equal to obj dot display order Dot tostring well we do not need to lower because it will be number that's okay if that is the case then on the model state that we have we want to add a custom error message and for that on model State we have a method add model error there we can add a model error we have key and error message now what is this key this key is basically if we go to category create here we have the name if we want to assign it to the name field here then that is the exact key that we should use here so let me use that key and I will add a custom error message the display order cannot exactly match the name once we do that if I run the application let's see what happens we go to category here create and if we create perfect we see that error message and that is being displayed under the field where we have category name that is exactly what we did when we added this key name but we have something else here as well not here in the create page where we have the span right here well let me do that after the heading here we can add a div and we have ASP validation summary for individual ones we have the ASP validation or but we have the ASP validation summary for that field if I make it as all and I close that let me save this and go back refresh here well I think for validations we will have to restart and go to category create perfect now you can see with validation summary it displays the summary at the top along with the individual ones right here and if we have the custom error message you can see that is also being displayed so if you want to list all of the error messages at one place rather than individual ones you can use the ASP validation summary tag helper last video we added validation summary all because of that along with the individual validation that we have it also displays all the validation in the summary right here but on top of that for our custom validation if we make both the values same and press create we see that in the validation summary as well that is great but now if we go to category controller I added that custom error under the name or under the key value of name let me add one more validation here and not restart I want to stop the website and in the controller copy and paste it one more time this time if the value of name is equally equal to test in that case I want to display another validation or an error message but that will not be under any key name it will be empty and I will display test is an invalid value and I can convert this to be lower here perfect so with that configured let me run this and try that we go to category here and we have the category name we put that as test display order as 0 and perfect it displays both of the validation but you can see because we did not validate or because we did not have the name here inside the key it did not bind that to the category name but it displays that validation in the global summary that we have and that is because in ASP validation summary we have that as all now let's see what is different if I change that to be model only so rather than all if this is model only and if I restart the application when we say model only it will only display the values that have error in model but not any properties so let me try test here and 0 and it will only display the error that test is invalid value you can see it does not display property related validations in the validation summary so when it says model only it will not display any error messages related to a property like name or display order the other error that we have is not related to any properties because of that we are able to see test is an invalid value and the final option that we have is none here and that is self-explanatory it will not display any error message in the validation summary let me show that we have an exception here because that is not set I can just add obj dot name is not now and perfect let's try that we go to category here create and try that and perfect with none it does not display any error message so perfect with that you can see the difference between all model only and none now one real-time use case is on the login page what you can do is username and password both will be required Fields so in that case if they do not input that you can display them right here but if they input that and something is not valid then you can add a custom error message and display that using model only in the ASP validation summary but for now we will go back to the application and let me remove this custom I only added because I wanted to show the model only difference and in the create year we can make this as model only perfect save that or rather I do not need the validation summary for now I can just comment that out we have the individual validation and that should be sufficient I can comment out the custom validation as well with that if I restart the application we still have the basic property validations that are being displayed so with that in place let me continue from the next video now the validations that we have right now are server signed and what I mean by that is you will notice when we hit the create button it hits our debugging point in the controller and then it returns back the error message you will notice the page also reloads there we go you can see the spinner at the top that means it is going to the server but what if we want to implement client-side validation using JavaScript we can easily do validations in the browser itself to make sure this field is populated or not net core has already provided some of those things built in if we take a look at validation scripts partial it has the validation jQuery using that we can do client-side validation and for that we do not have to write much code inside the create view where we have the validation for we have to include reference to this partial View so basically we have to add this partial view which is a shared view inside the main create View and that way whatever code is inside the shared will also be added to the create view that we have now how can we add or consume a partial View that is pretty simple since this partial view is only having the scripts we will have to add that in a new section here for Scripts and I have some space let me remove that inside there we will have the Razer syntax and when we have to consume any partial view we can do that with the partial tag and there we have to provide name make sure to copy the name it must exactly match the name that we have and validation scripts partial it should be the exact file name if that is not same it will not work and with that it has added that partial view in the script section for the view page now because this partial view was script related we added that in the script but if this was not a script related you can directly add that right here when we have to consume some partial view in a master page but that is not the case for now so we will add that inside the script section that we have but here you have noticed how we can consume a partial view with the partial tag helper that we have in the.net framework and where we have the name here by default it will go and look into the shared folder because that is the default location for any partial View because of that it will automatically find that and it will add the JavaScript that are needed for client-side validation simple as that with that let me restart the application and now the validation will be first done on client side and for custom validation it will go to the server side so in order to test that actually let me go back and uncomment these lines here because they are custom validation and let me run the project so if we go to category here and if we create a new category this time when we hit create let me also add a debugging point you will notice it will not go to the server there will not be any spinner we see the error message and you can see it is not hitting our breakpoint as well if I enter the category name test here create we have the other validation once we fulfill that if it is more than 100 you can see when I am typing it automatically displays the validation but the custom validation that we have is category name and display order cannot be same is on server side and client-side validation is not aware of that so when we hit create button this time it will hit our breakpoint and it goes to the server and displays the server side validation with that we have seen how easy it is to add client-side validation in our views in the.net Project we just have to add the scripts that are provided by default on the page where we want client-side validation next item that we want to work on is in category we have list and create new category but we want to work on editing an existing category for that on the index page we need buttons to edit or delete any category let me open the bootstrap icons for that and look for an icon for edit which will be a pencil icon perfect this looks good copy that and we will add that in the index page so index view of category right here we will also add one more th and I will add a TD element where we will have the edit and delete button in the DD here let me create a div give it bootstrap classes of w75 for the width and ptn group and give that a rule of group as well now within this tab we want two links so we will have to Anchor tag and what controller it will go to we will be working with the same category controller so we will write category and what action should we invoke when we edit a category we will invoke the edit action and along with that let me give it some bootstrap classes of BTN BTN primary and margin X of 2. and the anchor tag here we will paste the icon and I will write edit save that let me see how the UI looks like perfect looks good let me copy this paste it one more time next action will be delete now right now we do not have any of these actions we will be adding them in the upcoming videos that will be PT and delete here and I need a new icon for delete let me search for a trash icon and trash fill that looks good copy that paste it right here and we forgot the text will be delete and perfect we need danger not BTN delete great so our buttons for edit and delete are looking great let me continue from the next video now I want you to think on what will be there on the edit page basically edit page will be exactly same as the create page but the category name and display order will be populated based on whatever category the user wants to edit on top of that when we create a category we do not care about what category ID is but when we edit a category we need to know which category the user wants to edit based on that we will retrieve that category in the get action method and pass that to our view to display that but first let me design an empty view where on the edit it will basically display the same view that we have for create we will go back to our code here stop the project first we need to add that action method inside the category controller let me close everything else and we will have both get and post action method when we do not Define anything here by default it is a get action method so we can copy both get and post action method for create and paste it one more time rename that to be added here and we have the edit post as well now when we are working with edit like I said before we need the ID that user wants to edit so that we will retrieve in the parameter ID right here we can make that nullable here and then we can add a validation that if ID is null or if ID is equal to 0 that means it is not a valid ID so we can directly return back not found what you can also do is you can have an error page and you can return back to that view which will be an error view displaying that something is not valid but I will keep things super simple right now then if the ID is valid we need to retrieve that category from database now when we were retrieving all the categories we were doing that by using underscore DB dot categories similar to that if we have to retrieve one category Entity framework core as helper methods for that now we have multiple ways of doing that so let me spend some time and show you the multiple ways it will be a category object and I will call that category from DB is equal to underscore DB dot categories dot we have a method which is find find will basically work on primary key of that model we know ID is the primary key of categories so if I pass the ID here it will automatically find that and assign that to category from DB we have a warning here that it can be null and that's okay because after we find that we will check here if category from DB is no in that case we will again return not found but if it finds the category then we will pass that to our view and display that so perfect that is one way of retrieving the category let me see if that works we will worry about the post action later on but before that in order for this to work we need to pass the ID when we are calling the edit action method if I go to the index action of category where we are invoking edit we are not passing an IDE how can we pass an ID when we are calling a link here because if we were using something like an href here we can say we want to go to category forward slash edit and then we can pass the ID that user selects here but when we have tag helpers we have something called as ASP route ID with ASP route we can pass any property right here we can pass something called as category ID is equal to and that will be the ID in obj so we have to use the add sign obj dot ID you can call this anything you want I will call that ID because if we examine the category controller I have ID right here that way it will automatically map that perfect with that configured let me see that in action we go to category here and we will edit the Sci-Fi we have the ID that is 2 when we press F10 here perfect it retrieves that category so find is working as expected now as I said before there are multiple ways to retrieve a record let me also show you the other ways I will copy this paste it about two more times here and I'll call this one and two for different variable name the next method we have something called as first or default what that will do is it will use a link operation and we have to say U dot i t is equal equal to the ID that is being passed right here you can make this a nullable field and the warnings will go away there we go but first our default will basically try to find out on whether there is any record if not it will written a null object and that will be assigned right here first our default will work even if the ID is not primary so if you want to search on name you can say where name is equal equal to or you can also do dot contains so you can be fancy with first or default but when you are working with find it only works on the primary key so you cannot do any modifications in there so that is the other route and finally on categories we have a where condition where similar to first or default we can use the link operation and say U dot ID is equal equal to ID and once we retrieve that on that we can add first our default now typically I like the first or default approach unless some situation is there where you have to do quite a few calculations or filtering and then get first or default only then I will use the last approach here but if we add a debugging point and if we run the application we will see all three of them works exactly the same I will do edit for the test here it hits our breakpoint and populated DB1 populated db2 populated perfect so with that we have seen multiple ways to retrieve one of the category from database I will comment out the later two here and that looks good now that we are passing categories to the view we can work on The View and display all the category properties let me do that in the next video we are passing the category that we retrieve to our review we need to create this view so we can right click here add view empty View we will have to rename this to be added here and we will remove everything right here now let me also show you one thing different let me delete this View and let me add that once again we also have something called as razor view let's add that and see what is different now when we add this there are quite a few properties that needs to be scaffolded first we have the view name which is edit now I have changed the default font of Visual Studio because of that it is enlarged and difficult to read but here we have the view name of edit and with the Razer view we can have different template for create details edit and much more we will go with the empty one here and if you go with create or something else you have more configuration which we will see in the upcoming videos now this is not a partial view so we will skip that and you can also skip the underscore layout page because it already gets added by default when you add that it will scaffold few things and sometimes I have seen this scaffolding is corrupted and it does not works and gives you random error message now because we selected the underscore layout as null you can see it rendered like a new HTML page that is not what we want so let me delete that again and let's try that once again add view Razer View brazer View and we will say use layout page when we use the default layout page you can see that is more close to what we have and it got added in the right place now of course we will remove everything we will leave the edit here but actually what we can do is copy everything that we have in create and paste it for edit because it will look exactly the same rather than create category it will be edit category with that configured let me change this from create to update and let me run the project we will come back and modify this edit page but let me see how the application looks right now perfect to your surprise when you hit edit category it automatically populates the name and display order the reason behind that is the category model that is being passed from the edit already has those populated and in the edit we are using tag helpers so if name has some value it will automatically be displayed and same applies for display order so that is great news we have validations that were already added so if you try to remove display order we have the client-side validation so with that configured our edit category view is looking good right now we will have to change one thing but I will show you that in the next video but what we have to focus on is the post action method in category where we will retrieve an object and we have to update the category we have seen how to create a new category using Entity framework core but now how do we update that category we will remove this validation that is not needed when we are updating we will do the client-side validation that looks good on top of that rather than add EF core as a method for update and there we have to pass the obj and it will update that category now how will that update based on the ID that is populated in the object here it will automatically update all the other properties that are there for that category in the database it is super simple but you can see how Entity framework goal has reduced all the heavy lifting that we have to do when we were updating a record with that let me continue from the next video now that we have added the code for update category let me run the application and see that in action when we go to category here we will try to edit action here and let me update that to action triple one and display order to be 5. right now it will work perfect you can see it got updated if we update that back to what it was that should also work and perfect so with that the edit functionality is working as expected but there is one thing that I will tell you right now when you add a debugging Point here and if you try to update this to let's say seven you will notice in obj ID is populated now the reason ID is populated is if we go to our edit here you can see we do not have that in the field typically we require that in an input field like this where we will say ASB 4 is ID and it will be a hidden field but only because the variable name is ID this line or input variable is not required if for some reason your ID was category ID or anything else then you will have to add the hidden property else what will happen is rather than editing an existing record it will keep that record and it will add a new record on top of that with the new name that you edited I will show that in the upcoming videos when we work with different model as well but that is something that I want you to remember when you try to edit if you see a new record is being added add a debugging Point here and I can guarantee you that the ID here is zero because of that if you pass an ID with 0 to update statement in Entity framework code it will think that okay since the ID is zero you want me to create a new record because there will be no record with the ID of 0. that is the default Behavior so once again if you ever try to update a record and it is creating a new record make sure the ID is populated here if that does not work then you have to add the hidden property like I have shown on line 4. we will see that in action in the later videos but I wanted to give you some idea on that right now but perfect with that we are able to edit our categories and the last functionality that we have is deleting a category finally we will work on deleting a category when we delete a category we want to display everything that we do in edit but everything will be disabled so let me copy what we have for edit get and post action method and paste it one more time here we will rename that to be delete now in the delete post you can get the complete category object or you can just get the IDE that user wants to delete in that case we cannot use the same name for the action method because then the parameters are also same for get and post so we will have to rename this to be delete post and we have to explicitly tell here that name is delete for this endpoint because in the form when we are posting it will look for the same delete action method in order to do that with HTTP post we can explicitly say that this endpoints action name is delete even though we have a different name right here the get action method looks good we want to retrieve that category but how do we delete that category now when we have to delete we first have to find that category from database so we will say category opj is equal to underscore DB dot categories dot find based on the ID and then if opj is null we will return not found if obj is not null on underscore DB we have categories and there we have remove method which expects the category object so we can pass the obj that we retrieved from the database and pass that finally we will have to save the changes and return back to the index action and perfect that looks good with that we have the get and post action methods for delete let me continue from the next video we have the delete cat and delete post action method let me remove the comments here and now we want to work on adding The View so right click on delete add view empty View make sure to change the name to be delete.cshtml and perfect now the view will look exactly same as we have for edit here so let me copy that and paste it for our delete few things we have to update is when we delete we will not have any validation so let me remove them and the fields here will be disabled user cannot edit anything here and this will be delete category also the button color will be danger and it will be delete record that looks good inside the index when we are calling delete here we will have to pass the route ID that way we will know which category user wants to delete we will call that ID because in the controller that is what we have right here now when we post we already saw we do not need the ID in the hidden property but I always like to add that that way there is nothing magic going on we know that we have ID in the hidden property and when we submit that will be populated we can also do the same thing in edit even though for ID it is not required but for other properties it will be so it does not harm to at this particular line in edit and in delete with that I believe everything here looks good let me run the application and see if that works we go to category here we have action which is 7 display order let me try to delete test here perfect everything is disabled hit the delete button and great that has been deleted if I switch back to SQL server and examine the categories table we do not have that test anymore so great all the grud operations are working for our category let me continue from the next video we have the cloud functionality that is working but whenever we create edit or delete a category what if we want to display a notification here that record was created updated or deleted successfully for that we have something special in.net core which is temp data if you assign a value in temp data it is only available for the next render so basically let's say on the create button we say if everything was successful we can add a message to Temp data then it will only be available to the next page that is rendered when we create we redirect them to the category list so it will only be available on this render if you refresh that page then temp data goes away temp data has been created in the dotnet framework with that sole purpose that if you have to display a notification on the next page then you add some value in temp data let me show you on how that will work let me switch back to the code here stop the application and we have the index page before we do that in the controller we will assign something on post once it is successful before we redirect here we can add something to Temp data and there we have to give that a key name let me call that as success message in there we will add a message category created successfully that is the key name that we have given to Something in temp data and based on that key name we can access its value let me copy that and do that in edit post before we redirect we will say category updated successfully and when we delete before we redirect we will say category deleted successfully now we have added the message in our temp data with the key name of success but where do we display that we will display that on the index page at the very top here what I can do is add an if condition and check if temp data with the key name of success if that is not null then we want to display that let's say in an H2 for now to display that we will again use the Razer syntax at sign and we can access the success simple as that I have an extra s here remove that and let's run that we go to category here let me try to create a category test category for and perfect we have category created successfully now if you refresh here that goes away so temp data only stays there for one request and then it goes away if you try to edit this to let's say 44 we have category updated and if you refresh here that goes away so with that we have seen temp data in action and that is a great feature when you have to display notification we have used amp data to display the success notification but what if we had more than one page let's say in our website we have category we have something called as cover type products and we want to perform crud operations on all of them then rather than adding the same logic or same code that we have in one page we will be reusing that on multiple pages and right now it is Success you might also have temp data for error and display a corresponding error message rather than adding the same code in all the places it is best to use partial views we have already seen one of the partial view which was validation scripts partial but this time we want to move our temp data logic in its own partial view how can we do that well doing that is super simple again in the solution here where we have the shared folder we will right click add a new view we will go with the empty View and the name for partial view I typically like to write underscore that way looking at that I can tell that this will be a partial View I will call this underscore notification Dot cshtml we go to our index let me cut the if condition paste it right here then let me copy this paste it once again and we will display error here so if temp data of error is not now then we display that error as well we do not have this error right now but I just added that code now how do we consume this partial view inside our index that is simple we have the partial tag here and we need to give that a name and for the name make sure there is no spelling mistake else it will not work perfect so that way we have added or consumed the partial view that we just created with that in place let me run the project it should work the same let me try to edit here and perfect we have category updated successfully so with that very small example we have seen how to create a partial View and then on any page where we have to consume it we can do that by adding just one line of code on top of that if we have to change the implementation of notification we do that directly in the partial View and all the views that are consuming this partial view will get that update if it was not the case then we will have to update it individually in all the places so for all the reusable components in your page you should be using partial views with that basic idea let me continue from the next video when the update create or delete is successful rather than displaying this plain h2 tag here it is best if we use something fancy and for that we will be using toaster if you search for that we have the first link here and let me go to the demo page we will click show toaster and perfect these notifications are much better than what we have we have success we have warning toaster and we have added toaster as well so let's see how we can add them in our project it is a JavaScript library here and we have the cdns let me copy the CDN for CSS here and where will we add our styling we always do all the global stylings in underscore layout so let me add that here link RDL is equal to style sheet and href let me paste the CDN here perfect next we need the JS as well now for JavaScript we will have to add that inside the individual notification here so when we are displaying that we have to add that notification so here I can add the script tag here and SRC is equal to paste that and let me see we need the closing tag as well perfect the error should go away that looks good when we are using toaster here we also need jQuery we already have that inside the lib here so lib jQuery DISD and we have the minified version we can use that and let me add the closing tag as well perfect that looks good we will copy this paste it for the error as well and rather than using the dot JS here let me use the minified version that way when we move to production we do not have to update anything and we are using the minified ones we will do the same for CSS as well and perfect now finally inside the underscore notification we do not want a boarding Edge too rather we have to see how to use that if we scroll down we have three easy step we added the CSS and JS and then we have toaster dot info and the text right here pretty simple let me copy this go back to our code and where we have the temp Data before that we will add toaster dot success and we need the success message right there we will add a semicolon here and we need to enclose this in a double quotes also the toast here will be inside script type is equal to text forward slash JavaScript and perfect that looks good let me copy this and paste it right here this time it will be error here save that and run the application we go to category here try to edit the display order to 88 or rather 99 and perfect we have the fancy notification now while we are here I want to make one change right now the partial view is inside index.cshtml but let's say this is a functionality that will be there across hundreds of pages so rather than adding on all of them we can also add that in underscore layout so cut it from here and where we have underscore layout before the render party here I can add the partial View that way on all of the pages this functionality will be available we will have to rebuild and apply the changes here and everything will still work the same but now wherever we need toaster notification it will be available and we will not have to add the partial view for notification let's try delete here and perfect everything is working as expected with that we have Incorporated toaster notification in our project now think about this if you did not have partial view on all the pages where you needed toaster notification you would have to add this particular code on top of all the pages and if in future when you wanted to change from toaster to something else you will have to update that on all the pages where this code was present which is not a good idea and that is why you should be using partial views so with that in place let me continue from the next video now we have the bulky project and there we are able to perform all the crud operations on categories and right now what we are working on is an MVC project but when it comes to dotnet programming language there is also another way you can write the same code and that is using Razer Pages rather than using models views and controllers and the approach to Razer pages is somewhat similar to what we have been working in older.net days where we have a backend and a front-end page so let me spend some time and try to replicate the same project that we have built using MVC using freezer pages that way within a short time you will have a brief idea of how Razer Pages actually work so in our existing solution here we can have multiple project one project that we have is bulky web let me add a new project here and that will be of the type Razer pages if you type Razer here you can see we have the asp.net core web app and this is not the one with model view or controller it is using the Razer Pages content so we will select that hit the next button project name let me call that bulky web Razer underscore temp and select the next button again authentication will be none here and everything stays the same we will hit the create button and that will add one more project in our solution which will be bulky web Razer now if I set this as a startup project it will run this particular website rather than the other one and let me try to run that when you run the project you will see the default page looks exactly the same like we had for an MVC project but this time you will notice some things are different if you notice the URL here is directly privacy previously it was home which was the controller and then privacy which was the action method but when we use Razer Pages we do not have any controllers in the next video let me first show you what is the differences between both the project type before anything else we want to see what are some things that are similar between both the project so let me expand the project here and perfect you will notice in the Razer project we have app settings.json this is exactly same like we have in the MVC project and all the connection or settings we will place them in the app settings.json file after that the program.ces is also exactly same well the functionality is same but the files will be different you can see in the MVC one it added controllers with view but in the Razer Pages it added builder.services.raiserpages to the container that way the application will know that it will be using Razer Pages as compared to MPC which is controllers and views if you scroll down the default route also we had controller and action in an MVC application but when it comes to Razer Pages the routing is straightforward and we have map Razer pages now the way routing Works in a Razer page application is whatever is inside the pages folder that will be the route so if in Pages folder there is a index page you directly type index and that will be the default page if you type privacy we have the Privacy page right here so basically whatever the folder structure is there in the pages folder that will be the exact routing that we will follow in the URL and we will of course see that pretty shortly in the upcoming video but we will come back to the pages folder in a second other than app settings and program.cs we have www.root which is also exactly same as the MVC application and then the property stays the same dependencies stays the same the only thing that is majorly different is we do not have controllers models or views we only have one thing which are pages and these pages are different than what we had for controllers or views here we have the index page which is index.cshtml if you double click that it still has that Razer syntax where you can use the add sign and use C sharp code but on top of that there is something called as at the rate page directive this add page detective is used for the Razer pages and if you expand the arrow here we have the dot CES file this dot CS file is not the code behind file that we had in traditional.net application it is a complete rewrite and it is basically a page model for the Razer page that we have you can see it extends from the page model which is inside the dotnet core package page model will have all the get and post endpoints that we typically had in the controller that we saw in the first project so you can see oncat is the default Handler for cat action method the naming here must match so basically on is required and then if it is a get it will be get if it is post we will have the on post Handler now I will not go crazy deep into Razer Pages because it has its own course and it can be lengthy but I will give you a brief idea on how to perform crud operation in Razer pages that way you are comfortable with Razer pages now inside Pages you will see something common in shared we have the underscore layout and validation scripts partial exactly the same as MVC we have view Imports and view start exactly the same and we have an error page to display error message but before we do anything else here like working on the Razer Pages or anything I want to configure Entity framework code in this project configuring that will be exactly the same so for that what I will do is right click here add a new folder which will be for models and I will actually copy the model that we have for category let me copy this close that in the models add a new class do not copy the class and paste it here because then the namespace will be copied over rather we will paste that here and perfect so with that we have added the category model in the Razer project what your assignment is to configure Entity framework core in this project it will require the exact packages that we did in MBC project and you will have to create an application DB context class that you will do inside the data folder so configure all the steps configure program.cs make sure to seat the category as well the last thing that I will do before I end this video is in app settings let me copy this connection string from MVC paste it right here and I will change the database name from bulky to Bulky underscore Razer perfect so you have the connection string in the Razer project you need to configure Entity framework core create the database seed the category table with three categories just like we did with the MVC project that will give you a Hands-On practice on setting up Entity framework code in a project so complete all the steps but do not update the database or add the migration do everything for the configuration and when you are at the step of adding a migration follow along with me in the next video that way I want to show you one thing that you have to be careful about so good luck with that assignment and I will show you how to do that in the next video I hope you were able to complete the assignment now when we have to use equal server first thing that we need here are the nuget packages and we can do that in multiple ways we already have those nuget packages in the bulky web project which is MVC so if I right click on the solution here and select manage nougat packages for solution well you can notice here that.net 8 preview 2 has been released but we will continue with the first preview that we have that's okay but what I want to tell you here is on the right side you can see on per keyword the version is installed if you select the other project as well then it will install the same version inside the Razer project as well so if I install that accept this perfect that package is installed inside the Razer project as well now you can see that right here the other packages here are not installed in the Razer project so we can install them using the same method but we can do something better we know that we want the same packages that are in the web project so we can right click edit the project file and I can copy all of the nougat packages we have the version here as well close that and I will open the project file for Razer page inside there we only have one we will remove that and paste everything that we copied from the MVC project what that will do is it will automatically install on of the nuget packages let me show that right here so you can see everything is done automatically and we do not have to do much things this is another way of working with nougat packages because if you directly add in the project file that is the ultimate location where a new get package is added and from there it will be installed and available in your project our packages are installed now we need to work on adding the application DB context here so let me add that and then we can go to the data application DB context copy everything and paste it right here now I hope you did not copy and paste everything and you manually type that because you have to learn on how to see the data how to override the on model creating how to add DB set and so on when we add the using statement do not add reference to Bulky web we need from the current project which is bulky web Razer perfect DB context looks good next we need program.cs there we have to add the connection string copy this line close that go to program.cs here and we will add that we will add the using statement as well and perfect that looks good finally the last thing that we have to do is add migration and create the tables for that we will go to tools package manager console and here you have to be careful about one thing previously we only had one project so the default project was bulky web but now we want to add migrations and everything on the Razer project so you have to select that and you will say add migration add category to DB for fact if you take a look at the migration it is adding category and it is inserting data looks good let me update the database perfect that is done as well if we go back to SQL Server we should have a new database which is bulk eraser and we should have the categories table with three categories so Entity framework code has been set up in our project and you can see how fast it is to get started with ef core in.net application now we want to work on the same functionalities that we have in the MVC project with category in the web project or the MVC project we had controller but that is not something that we have when we work with Razer pages there we have the pages and in there we have to organize things so what we will do is create a new folder for category and inside there for list of all the categories I will create a new Razer page we don't have view here we have Razer pages when we say Razer page we have the empty Razer page we will get started with that the index page we can call that for categories where we are listing all the categories but I have one small suggestion so let me close this and where we have the category if you know in model we have the same name if you want to use the same name you can go ahead and do that but then you will have to add the complete using statements many times in order to avoid that I will rename this to be categories that way we do not have to be explicit then in categories we will add the Razer page empty one we want to start fresh and let me call that index.cshtml now in this page you notice something different than when we added a view in MVC so again in MVC I use the term View and razor Pages we have the Razer page and the Cs file will be page model that will be the terminology that I will be using so in racer page we have ADD model that is already being defined and if you examine the path that is the exact file that we have in the Cs file if you think about that in the MVC we had to Define that in razor Pages it already creates that CES file and adds that in the add statement and before that we have the add page that defines that this will be a Razer page we do not need this here we can just have an H1 and we can say category list like that with that one line let me run the Razer project we will have the startup project As a Razor throughout this section so do that and we will run the project and perfect now how will we route to the new page that we added that is inside categories so routing is pretty straightforward whatever is the location inside the pages folder that will be the route so categories and then index and we have the category list now index is always optional so if you remove that it will load the same page but with Razer Pages we do not have the complex routing of adding controller action method and then the rock parameters Razer Pages has very straightforward routing with that configured let me continue from the next video now we have the category list here but we need to load all the categories from database and display them how will we do that when we are working with controller let me move back to the old application here we used to get application DB context using dependency injection and then we were easily able to retrieve all the categories it will be same when we are working with the Razer project as well in the Razer project in the Cs file which is Page model here we will have the Constructor first we will have a private read-only application DB context let me call that underscore DB and ctor tab tab for the Constructor here and we will get application DB context assign that to the local variable after that let me create a property which will be list of category and that will hold all the categories I will call that category list here and we need to populate this using Entity framework core so category list is equal to underscore DB dot categories dot to list that is exactly what we were doing in the controller but now we have to do that in the on get Handler now when we have the on get and post Handler we do not have to write return view you can see the return type is void here because whatever we are setting here in the model it is easily accessible because that is the model that we have so when we return back we do not have to write anything else it will automatically bind everything so now all we have to do is on the index Razer page here directly access that model and display all the categories view we can copy that from views we have the category index copy that and make sure to close this file because the names are same so you might get confused and end up working on a different file so if you have to copy copy that minimize it and close the file I will paste all the code that we copied right here and we do not need the model anymore let's remove that then we have to worry about the tag helpers previously we had the tag helpers for controller and action but with Razer Pages we have ASP page using ASP page we can Define the route where we have to go when we create a category that will be inside categories forward slash we will create Razer page with the name of create we do not have action there we have to give the complete route like this now if you are not case sensitive that's okay here so let me add that we scroll down we have the table here but where we have the model we do not have the category list we have that inside model there will be a property with the name of category list so if I go back rather than model directly in there we will have category list because model is the complete index model inside there we have category list and that can be easily accessed like here we need to change the route here this will be ASP page and it will be category forward slash edit remove the action and where we have to pass the ID ASP route is still valid if you are working with Razer pages so when we edit if we have to pass the ID we can pass ASP route ID and that will work so copy this ASP page and paste that for delete this will be delete we will still pass the ID that needs to be edited and deleted everything else stays the same with that configured let me run the project and see if that works we forgot one thing here let me go back while it is running inside the underscore layout we have to add categories so copy this Ally here you can see we have the ASP page here that will go to categories forward slash index and we display category here let me see how that looks here we have category click that and perfect right now we are not using any boots watch theme so these are the default classes but you can see everything is working with Razer pages and we have our index page that is functional if you want to add the bootstrap icons here you can do that but I think this looks good or the category list right now before I end the video if I go back and in the cshtml rather than on get here if this was only get you will notice things will not work because that on is required if I click on category you can see things are not working so when we have a get action method inside Razer Pages it must match the exact name on get or else it will not work we are able to display all the categories if I run the application again and if I go to categories there if I click the create new category you can see it is not able to route to that page if it was an MVC application you will see an error message page not found but increase your pages if it does not found I have noticed it does not even redirect so next we have to create this categories and the create page we will open the solution Explorer inside categories I will add a new Razer page which will be empty and we will call that as create perfect we have the corresponding page model now the UI will be exactly same so we can go to views category create copy close that and also minimize this paste it right here go to the top we do not have a model for category but we will have to create that in page model so when we go to create cshtml.cs in the Razer project here we will have to create that on top of that we need application DB context so let me copy these lines paste it here we will have to change the Constructor name to create model let me add the using statement here and we do not have list of category when we are creating we will be working with one category at the using statement and perfect if we go to the Razer page here we do not have name but we have category dot name we will have to replace that in all the places so let me do that and perfect we do not have controller we have ASP page that will be categories forward slash index and that looks good let me run the application and see if that works we go to category here create and it is not working in index we need a forward slash here and perfect that works it loads the empty category when we hit create we have the validation as well because in create here we have validation scripts partial and that is also present by default in bracer pages so you can see everything is the same when we hit back to list that doesn't work we need a forward slash error and let me modify in index right here this will be categories yep that looks good perfect so we can go back now edit and delete we have not added those pages so that will not work but create new category is working if you type something and hit create nothing happens because what we have right now in the page model is only the get Handler and that is not even doing anything because when we create a category we want to load the empty page and display the text box so that is okay but how do we add a post endpoint here so when we hit the submit button we want to create that category let me show you that in the next video now we need to add a post endpoint here and how will we do that while adding that is super simple we will say public return type will not be white here because when we create a category we want to redirect to some Razer page like let's say the index page for category so return type will be the same I action result that we saw in MVC application then what will be the name on will be required but if we have to post something then we have to write post keyword and that is how we create post handlers in Razer pages now when we post we will get the category object here so we will get that and let me call that obj here next what we want to do is on DB dot categories we want to add the object and underscore DB dot save changes after that we want to redirect so return previously we have redirect to action but in raiser Pages we have redirect to page and we have to give it a name we will call that the index page because we are in the same folder that will work with that configured if we restart the application things will not exactly work like we intend let me add a debugging point on the post here and let me wait for the application to come up again and let me go to category create a new category populate something there hit the create button you will notice the obj here is null why is that in category we have the post here it should populate at least category.name that category is right here but if you examine that is also not populated when we are working with Razer Pages if we want this property to be available when we are posting that we have to add an attribute here which is bind property that will make sure that it binds this property and when we post that it will automatically be binded and available in the post Handler once we do that we no longer require anything in the parameter here we can directly access the category because that will be populated now let me run this and show that as well we go to category here create type something here and we examine the category perfect we have display order as well as name and we continue here great that category has been added successfully so when we work with Razer Pages we have to explicitly bind properties that we want to access on the post of the form if you have more than one property you can find them individually or what you can do is add the page model level here we have something called as Point properties and it will bind all the properties that you define in the page model with that if you run the application it will work the same way let me try that as well we will have test two and we examine category perfect that is populated so those are the two ways to bind properties when we are working with razor pages now with that brief overview you know how to create the get handlers and post handlers with that knowledge that you have I want you to work on edit and delete functionalities as an assignment so good luck with that assignment and I will see you guys in the next video we want to work on edit and delete functionality so let me create those razor pages and categories at a Razer page empty and I will call that edit here next one that I want to create whoops right here add a Razer page and that will be delete dot CS HTML first let me pin this here and where we have the create let me copy everything and we will paste it in edit right here we will also have to bind the properties because we will be posting some data I will change the Constructor name to be edit model and add the using statement for category as well perfect now when we are editing we have to retrieve the category that a user wants to edit and right here we will get the ID based on the ID that we receive here we can check if ID is not null and if ID is not 0 in that case we can populate the categories here and let me make this nullable that's okay so we will load the category else we do not want to do anything so we will load category on the cat Handler and on the post here we have to update if I go to the web project here category controller on the post we were checking model State we can do everything exactly the same well we are in create let me copy the one that we have for edit here and paste it right here so if model state is valid we want to update we have bind property so we will have that category here and perfect that looks good let me comment out the temp data for now we will redirect to the page and perfect that looks good in the else part here we can just return back to the page if the model state is not valid so our edit logic is looking good let me work on the edit UI so let me copy what we have for View close this and the controller minimize the web project go to edit here and paste that remove the model here and everything will be inside category dot ID let me modify all of them now we have all the warnings here I can fix that real quick but we need the page here ASP page will be categories and then index perfect that looks good if we go to edit page model I can remove this and then we will have only one warning if that is not found but that's okay we can fix that but it is a warning and we know ID will be correct if not we can show a not found but with that configured let me run this and see if edit is functional we will try to edit test with test 33 and great that is working we should also have validation here that looks good I think in the UI I have a mistake here I will have to stop and restart category edit perfect let me see if I have that same mistake in the MVC project huh we do not have that here so that's okay but everything is working we have too many files open close all of them and let me work on delete copy the view from the MVC project here where we have the Razer project open delete paste it right there before we work on anything else here let me stop this and I will work on page model I can copy what I have for the edit model if you do copy and paste make sure to change the class name to be delete Model it must exactly match or else things will not work because the binding will not work here it is looking for that delete Model so we have that at the using statement and the Constructor name delete Model when we are deleting we will have to find that but on the post here we first have to retrieve that category and then delete so let me copy that from the controller rather than typing it all over right here copy that and I will paste it right here perfect that looks good let me validate the ID we will get that from category dot ID here if that is null we return not found else we remove and save the changes perfect we have redirect to page that also looks good let me save that and now we will fix the delete UI let me minimize the web project perfect everything will be inside category dot ID so category dot I will append that and we need the ASP page here which will be categories forward slash index great with that let me see if everything is functional category let me try edit again 333 let me try delete here that works so our credit functionalities are working now for the next assignment I want you guys to complete the toaster notification and implement the partial View so good luck with that and we will complete that in the next video finally we have to add toaster in our project that will be straightforward to what we did with MBC as well so we go here we have the partial view copy that and we will create the same partial view inside Razer project shared add Razer page and we will call that underscore notification right here you see it added the page and model but that is not needed with partial View we can delete the dot CES file and remove all the code paste what we copied from the MVC project we need to add this to our underscore layout so let me do that before render party here that looks good in underscore layout we also need to add toaster URL so let me copy that from here we will close the MVC project and add that here perfect so toaster is added now we need to configure or rather set temp data on the post handlers for that let me make sure we are in the Razer project in the create before we redirect we will set temp data of success category created successfully delete category deleted successfully edit will be category updated successfully and that looks good let me run and see if that works go to category here try to edit history and perfect we see the notification let me update that back here and if we delete Test 2 perfect all the toaster notification and everything is working as expected now with this we have quickly learned crud operations on both MVC and Razer pages the reason I introduced you Razer pages is moving forward when we add identity using the dotnet identity class library that is built on top of Razer pages so when you have to edit the page you know that Razer page will have a page model where you will have get and post Handler with the practice that you have in this section with Razer Pages you should be able to update everything with the identity pages that we will cover in the later sections of the course now the Razer project that we implemented was only for learning purpose we do not want that in our main project for bulky so let me remove that project here and perfect it is no longer there and in the bulky let me create more project typically when we are working with a real world project we do not like to Cluster everything together like right now you can see we have the data here we have all the models here if we have any constants we will add them here but in a real world application it is best to keep everything separate in its own project so we will be creating class projects in solution select a new project and we will search for class Library first one that we want to create will be bulky dot data access this project will have everything related to database like we have the DB context we will move that in the data access along with the migrations so let me select that with the.net framework perfect next one let me create the same class Library here and that one will be bulky let me make sure the name yep it will be bulky dark and then we will move all the models in its own project select that and create finally I want to add one more project which will be bulky dot utility for all the utilities that we will add in our project like email functionality or maybe constants for our application we will have all of them in the utility project let me create that project as well and I will remove all the class files we will be creating new class files when needed but perfect now back to the MVC project we have the bulky web bulky utility bulky models and bulky data access in the next video let me remove all the logic that is bundled in the bulky web to the individual class libraries before we work on anything else I want to modify the basic designs that we have or the bootstrap theme that is being used in the course we are using boot swatch for our project and if we take a look at the themes that are multiple themes that are available what I want to do is switch from the Luxe theme to The Sandstone here and doing that is super simple we can download the bootstrap file here and let me open that we will copy everything here let's go back to our project here and www.root CSS well we updated that directly in the CSS here we have the Lux theme let me remove that and paste the new theme right here which is sandstone with that if I run the application you will see the new theme in action but on top of that I want to change the pattern colors that we have by default now rather than typing all of that HTML and CSS what I have done is I have provided all the Snippets and you can download them from.netmatchedv.com there if you go to course detail you can get all the Snippets so make sure to download all of them and in the attachments we are in section 4 we have site.css inside there if you open that there is quite a few CSS right here but mainly what I'm doing is changing the BTN outline the BG success and Main bootstrap classes that we are using like PT and primary and ptn success so copy all of that here we will go to our solution we have a site.css inside rcss folder delete everything that is there and paste all the classes now I am not introducing custom classes I am basically overwriting the classes that are there in bootstrap so that way we will not be using new classes we will be using the old classes and it is like a boots watch theme and perfect with that you can see new design is an effect and we have a nice color palette right here I like this color palette more than what we had before and I also want to change some designing with the create category and all the other pages let me do that real quick so we will go to create category we will go to views category create right here let me start fresh we will add a div give it a class of card and Shadow along with that we will say border zero and margin top of four inside the main card here we will add another div which will be for card header and let me add the closing div perfect that looks good then we will add the header here inside the class of row we will set class column 12. text Center and in the H2 we have create category let me cut that paste it here and give it the class of text white and padding y of 2. after that when the card header ends here we will add another div for the card body so bootstrap classes card body here and padding four perfect let me cut the form and paste it right here inside the form let me give it a bootstrap class of row and see how the UI looks right now I do not see the site dot CSS coming into picture so let me see underscore layout we have site.css after the bootstrap so that should work but let me move it at the very end here and let me restart the project let's go to category and create new category perfect this looks much better exactly what I want let me go back again and I do not want the HR here remove the first row as well and I do not need the margin top 4 as well where we have the class March and bottom three and row we already are inside a row in form so what I can do is add a class of form floating padding Y2 and column 12. where do we have the input element I will modify the class from padding 0 to form control portal 0 and Shadow and where we have the input element I will say MS2 that looks good let me copy the classes and apply them for display order as well again all of them are bootstrap classes nothing fancy rather than BTN secondary let me do BTN outline primary let me save that and let's see the difference now the heart reload for some reason is not working you can see it is not checked again for some reason so let me restart perfect it is checked now category and let me go to create category and great the category name looks good here but something is off let me go back when we use the form floating here the input will come first and that will have all of these classes so let me switch that around I added them to label by mistake and perfect we can copy and paste it here modify the asp4 to be display order we will have to rebuild let me do that category create and perfect category name looks good let me see something is off with the display order we do not have the form floating add that here and it will refresh and perfect that looks good so with the row here let me add padding top two and that looks much better for the create category let me apply all of these changes to the other pages in the next video now that we have the create page that is looking great let me apply the same style on the other pages it is pretty simple where we have the form here let me delete that for a second and this will be kind of a template that we want so copy that and then bring back the form by pressing Ctrl Z or undo the changes here create is back to what it was let's work on delete we will paste what we copied here and we will cut the form paste it right here do the same for edit as well but I think I copied the wrong div so I'll have to copy this again go to edit copy this paste it again and let me zoom in cut this and we will paste it within the card body perfect let me run the application and see we also have to make them floating so I can copy this div here go to delete paste it right here whoops what happened it pasted the wrong thing let me copy and delete paste it here we do not need validation and this will be disabled let me copy this and paste it again for display order perfect that looks good go to create copy that once again and modify the edit here paste that two times name and display order let me switch back to the project it's already running and we have hot reload so let's go to create well create is done let me try edit that looks much better I need some margin here margin top three in delete as well and let's see perfect looks good we do not need the edit category let's remove that well let me change it first and remove that row edit as well and perfect let's wait for the heart reload great delete that also looks perfect finally let me modify the category list here let me switch back here where we have the index here go to my notepad copy the template paste it right here and I do not think I need the container here but let me cut everything else here and paste it in the card body let's go back and see looks much better we do not need the category list anymore remove that no padding here and let's see uh well I'll take the padding bottom here and let me see perfect that looks much better the heading here will be category list and that looks good we have multiple projects in our solution but right now everything is bundled inside bulky web project we want to move that from bulky web to the individual projects so let me do that we will move the data folder to data access that project will be responsible for all the data related operation once we move that make sure to delete the data folder here then we have models that we will move inside the models project and we will delete the models folder from bulky web finally in the utility here let me add a new class and I will call that SD or static details this will be a public static class and there we will have all the constants for our website perfect and when we are working with data here we have migrations that also we will move inside the data access and we will delete migrations from bulky web because we moved quite a few things in the data Access Project we need the new get packages related to Entity framework core inside data access if you open application DB context you can see we have all the errors here if you press Ctrl dot here typically it does show you the package that needs to be installed but it is not displaying that so I can right click manage nuget package here and right now when you click on the project it will display that project but you can click on the solution here and if you click manage new get package it will display all the packages for the solution so Entity framework core we can install that in data access next we need the tools package as well and I believe that should be sufficient let's go back and perfect the errors went away if we examine the dependencies packages we have those two that looks good let me examine if migrations have any error nope that looks good we need the SQL Server here as well so let me add that manage packages for solution and SQL Server perfect that looks good now we have more errors with the models because the namespace have been updated well technically they have not been updated but I will update them if I open application DP context you can see it is inside bulky web that is not true now it should be bulky dot data access and then we have the data so let me copy that here and I will modify the migrations as well let's do that and perfect that looks good this bulky web will be data access as well and great I believe that looks good here let me save everything and the models here will be different as well that will be bulky dot models but bulky dot models is not accessible here so we will have to right click here add project reference and we want to add models and utility project with that if you press Ctrl dot here perfect we now have the bulky web dot models and let me try to build only the data access right now and let's see if that works and we have few errors right here migration could not be found let me press Ctrl dot here and we have to install the nougat package let's do that we do not have the data here we need the updated statement and that looks good let me try to build that once again perfect we have the same issue here add the using statement and let me try that once again there are few errors with the seed category table but let me worry about that later on let me close everything right now and we have to change the namespace in the models project as well this will be bulky dot models dot models but rather than that let me move it directly in the models here and that way it will be directly bulky dot models and perfect both of them looks good here save that if I build this it should work perfect utility project is also fine now let's try the data access rebuild that one and we have the models header here fix that with the using statement and then finally we'll get back to the elephant and the room which are these two error message now I want you to pause the video and try to find out on what is going on here if you Google you will not find that but you need to focus something with the files that are open right here I hope you were able to figure that out basically when you see migration they have the designer file and the dot CS file namespace we updated that in the dot CS file but not in the designer file that is why we have these issue so here we have to change that to be bulky dot data access dot migration and then the error goes away we will have to do that in both the places here that way it will link the Cs file and the designer file and now if we build the data access that works so perfect our data access models and utility are working let me close all here so now for the bulky web let me run the project here and it will automatically display all the error message there we go let me handle them one by one we need to remove the old namespace press Ctrl Dot and we will have to add reference to the other project data access and models for fact that worked so let's see the other one next we have the category the other errors are inside the views so we will fix that later we have one in program.cs I can handle that one and we need to go to views to fix the other errors perfect so view we have the error and here we have the error view model now rather than writing everywhere here like bulky dot models dot error viewmodel what we can do is we can add this bulky dot models in the global using statement for the bulky web project that we will do inside the view Imports file so here we can say using we have the bulky dot models and once we save that this using statement will be available for all the views right here so then we no longer have to add this particular line and you can see error view model is being readable let me build it once again we should see fewer errors because we added the global model statement and great all the errors have been resolved so even though it was a lengthy video I did not want to implement the anterior architecture from the beginning it would have been simpler for sure but many times what happens is you start simple and then as the complexity grows you separate things out everything that we did in this video will give you some practice on how to separate things out if it is needed in your project with that configured let me run the project and see if everything is working as expected perfect we have the create edit and all the pages are loading as expected but now our application is much cleaner we have multiple projects in our solution when you are working with Entity framework core and you are just getting started it is very common that you might run into some issues with the migration and some things might not work based on what you expect and migrations are something that are very easy to be corrupted if you do not pay attention you can always roll back migration you can make more changes create a model add new migration but for some reason if everything is corrupt and you want to start fresh while learning how do you do that doing that is pretty simple so let me show you how to do that in this video first thing we will go to SQL Server here and everything is corrupt so we will delete the database which is bulky right here let's delete that next we will go back here inside the data access we have migrations now our migrations are corrupt and we want to start fresh you can delete the migrations all together perfect now there are no migrations there is no database to start fresh you can go to tools package manager console and add a new migration we know right now we are only adding the category model so we can say add category to DP and we are also seeding the category table so we will say add category to DB and Seed table now when you execute this you will see an error message and there you go the target project is bulky web now we have moved our data to a data Access Project so the default project must be updated to data access it's a default project will be data access and the default startup project is bulky web with that configured if I run this it will add migration now right now there were no previous migration so what it will do is it will identify all the changes that it has to push to a new database it has to create categories table it has to insert data and that is all we have right now with that configured we can hit the command update database and our database will be populated perfect if we go back and refresh the database here we have bulky tables and we should have categories populated great so the only disadvantage this time is if you have added some new categories those will not be available because we are starting fresh but basically anytime in the video if your migrations are corrupt and you don't know how to reset your database this is the video that you should look for in this short video we will see the different service lifetimes when it comes to dependency injection in.net core now you do not have to program this along with me I just want you guys to watch the next 10 minutes and understand what are the different service lifetimes Independence injection before we take a look at any example let me quickly give you a rough idea on what each lifetime is responsible for currency and lifetime is the simplest one among all of them and it is also one of the safest one transient basically means that whenever we want any implementation create a new object and give that new object you never have to reuse an existing object every time a service is requested a new implementation is created after that we have the scoped where it depends on the HTTP request so whenever an HTTP request is sent to the server that time for that scope one lifetime will be created and then the same object or same service is used wherever in that request the service is requested so let's say for one single page load we are calling a service 10 times it will only create that object one time and it will use that same object 10 times in that one request but then if a next request comes in then a new implementation is created and finally we have Singleton where one implementation is created for the lifetime of the application so once the application starts we create an object of that service or an implementation and that is used for all the upcoming requests unless you restart the application so to give you a rough idea again transient new service is created every single time for scope the new service will be created once per request and for Singleton new service will be created once per application lifetime now scoped is one of the most recommended approach for web application because of that a service will be created on each request but even with all of these overview things might be a little complicated so let me explain that little more with a real world example let me switch to visual studio and we will be creating an MVC application I will give it a name of TI service lifetime and let me create that in the project here let me create a new folder for services in there let me create three interface or the three surveys that we have so the first one will be I scoped let me add a new one here that will be Singleton and finally we will be adding the transient these are just the interface name we have not added any functionality in there let me add a method get grid which will return a random quid so the return type will be a string perfect I will add that in all the three interface that we added now we need to add implementation of these three interface implementation will be pretty simple let me add a class here for the Singleton quit service that will implement the I Singleton quit service implement the interface here let me create a private read only grid with the name of ID and in the Constructor ID we will say quid dot new grid and the function here we just want to return ID dot to string that looks good let me create the same implementation for the other two interface that we have let me add a class which will be scoped grid service and that will implement the I scoped quid service I can copy everything here paste it and we will change the Constructor name looks good let me add the last one which is transient grid service but let me copy and paste it in here and this will implement the I transient grid service so now we have three interface and they're corresponding three implementation that looks good but when we register this services to program.ces we have to write the life cycle to which we want to register so in the ad service here we will say Builder dot Services dot add and then we have to write what life cycle we want to use we have scoped transient and Singleton in Singleton we will have the interface which is I Singleton quit service and implementation is inside the Singleton quid service that is how we register a service to the dependency injection container we will also register the transient and scoped service perfect so it is exactly same like a favor registering DP context to the container and then when we have to use that we will do that inside the home controller before we start using that right here let me create six private Fields two will be for the scope service two for Singleton and two for transient we have scoped one two Singleton one two and transient one two next what we want is implementation of this interface we registered that in program.cs right here so basically we are saying that when someone asked for an implementation of I Singleton grid service we are telling the dotnet framework that provide them the implementation that is there in the Singleton quid service but there we are telling that use the add Singleton that is the lifetime so when we want to use the implementation inside the Constructor here we can directly ask.net core that we need the implementation of I scoped grid service and we will call that as scoped quid then we want another implementation of that so scoped grid 1 comma we will have scoped Grid 2 and similarly we want the implementation for Singleton and transient service so these are the implementation that.net framework will provide based on what we registered in program.cs then we have to assign these implementation to the local variable that we have right here for that we will say underscore Singleton 1 is equal to Singleton 1 and same for everything else I can change this to be scoped one rather than scope quid here perfect looks good so we have this implementation on there we can call the method which is category rather than making anything fancy let me use a string builder for messages here and I will append to that message using string interpolation so first I will say transient 1 and then we will display the value using underscore onesie and one dot category we have that method and after that let me add a new line so perfect that looks good for the first transient copy and paste that once again we want to display the transient2.catquid and let me add one more new line there copy these paste it two more times next we want this scoped one scoped one scoped two underscore scope 1 underscore scope to 2 and finally we need Singleton perfect when we return back we do not want to return back to a view we just want to return OK and display the message dot to string on the screen so now we need to think about what will happen all of them have basically the same category method which returns a random quid but the only thing that is different is on how the life cycle have been registered so let me run this and see that in action and perfect we have something right here you can see when we are working with the transient request here the grids are different but when we have scoped or Singleton they are the same as we know Singleton stays same for the life cycle of the application so even when we refresh the application scope and transient will be different but Singleton will always stay the same you can see when I am refreshing here transient is getting updated along with scoped but Singleton always stays the same and then for scoped here you can see every time for a single request it gets a new value but for one request the value stays the same in both of them but in transient for any time a quid is requested it calls a new grid so that means every time when a transient is called it basically gives a new implementation of that service when it comes to scope the implementation stays same for one request if in that one request we are calling this 10 times we will get the same service but for the next time it will get you a different service when you are working with scope so with that you can see how transient scoped and Singleton are different when it comes to dependency Injection Service lifetime now we want to work on repository pattern but when we are working with this if things are confusing do not worry by the end of this section everything will make much more sense but stick with me and I will explain you everything that we are doing here let me close everything inside the data project we have the data access there we will be creating a new folder that will hold all the Repository we will have a repository folder and in that folder we will have the interface for that which is I Repository repository interface that we will be creating will be a generic interface so we will create an interface here and I will call that I repository dot CS perfect now typically when we are working with generic we do not know what the Class Type will be so I will call that it will be a generic class D and we will say where T will be a class so when the I repository will be implemented at that time we will know on what class the implementation will be because right now we have category on which we want to implement repository down the road we will have product and many other tables like order header order detail and because of that we are making this generic here then we need to think about what will be all of the methods that we want right now of course I do not expect you to think about all of them but basically what will be the basic ones and then if we have to update our repository we will of course do that as we proceed with the course so here first thing that I will comment T will be category or any other generic model on which we want to perform the crud operation or rather we want to interact with the DB context for an example I have written that t will be category and then think about what will be all the operations that we need right now when we are performing the crud operations on category the first one that I can think of is we need to retrieve all the category where we are displaying all of them so we can say the return type will be I innumerable of T and we can call that method as get all the one after that will be if we have to retrieve only one category because many times like on the edit page we have to retrieve the details of one category and then we have to pass that or display that on the screen so in that case the return type will be a single category and let me call that function get first or default now you can call this as get as well if you want I like to call it get first or default that way I'm a little bit more explicit but if you only want to call that get that is also fine and then name of the function we can call that get because we are fetching only one of them and that's fine here what will be the parameter now if you examine what we are doing in the controller category controller where we have to retrieve one category in edit you can see there are multiple ways to do that we can use find we can use first.default we will be using the first or default approach but there we need something special we need a link operation the reason we will not be using find is that only works on the ID but if you want some other condition to get one record you can pass that using link operator so basically in parameter we will be getting a link operation like this how do you write that here for that we have something called as an expression and there we will say function type will be T comma Boolean so what we will be getting will be a function and the out result will be a Boolean we can call that as filter when we are fetching an individual record now do not try to spend too much time on why I have to write it exactly like this you can think of that when you want to write a link expression that we have in first our default this is the general Syntax for that so perfect we have get all and we have get individual then we have to create a category remove a category and sometimes it is possible you want to remove multiple categories in one single column so we will say white here we will have a add method where we have to pass the object that needs to be added we have an update as well and we have a delete then I also want something called as delete range which will delete multiple entities in a single column the parameter here we will receive an i enumerable or a collection of entities rather than delete I like to use remove so let me make them remove and remove range now if you remember when we were working with AF core and we were updating or adding anything we always had to call the save changes when we work with the repository pattern we do not like the update or add method directly inside the generic Repository the reason is simple when you are updating a category logic might be different than what you are doing when you are updating a product with ef core you only use the update statement so it could be same as well but typically I have seen that update is more complicated because sometimes you only want to update few Properties or you have some other logic because of that I like to keep the update and save changes out of the repository and when we will Implement like category repository will implement the generic repository on there we will have the update and save method so in the generic repository we will only have ADD and not update we will have ADD remove and remove range perfect with that we have the generic repository and interface is looking good we still need to implement this interface let me do that in the next video now we are getting into the fun part of implementing our Repository so in the repository folder I will add a class call that repository and that will implement the I Repository I will make that a public class we need to implement the interface here and it's not finding that maybe it's internal change that to be public here if I press Ctrl dot I am facing some issue here and the reason is because I have repository and I Repository if you want you can rename that but I will add the using statement for bulky dot data access dot repository dot I Repository with that we will get the I repository but one thing that we have to Define in irepository is what is the class right now also we are working with generic here so we will say t where T is class and with that the repository class is implementing a repository if you press Ctrl start we have the Implement interface when we are adding the generic here we need to make the class generic as well and perfect that works with that we have all the methods right here let's Implement that when we were adding an entity we used to add that on underscore DB dot add and then we used to add The Entity so we will need that using dependency injection I will have the private read-only application DP context and in the Constructor we will get application DP context and assign that right here but now one thing will be different previously when we were working on something we had underscore DB dot categories and then we had add but right now we don't know that and here we cannot use the generic like this so we cannot say DB dot T because it does not know what that stands for we want to make sure we use generic that way we can access the DB set directly so right here I can create an internal DP set on the generic type T and call that sdb set then we can say this dot DB set is equal to underscore DB dot we can set the current one that is the generic one that we get here that will be set to the DB set so when we create this generic class on category the DB set will be set to categories so in simple words where we have underscore DB dot categories this will be equivalent to the DB set that we have so when we were saying underscore DB dot categories dot add and we were passing some entity here now all we have to say is dpset dot add I hope that makes sense here so where we have the ad we will say underscore DP set dot add and we have the entity that way we are able to use the DB set and it will be generic based on the type repository here is implemented so perfect add looks good here next what we have here let me remove this and add a using statement it is much cleaner we have the individual cat and for that we will be working on an i queryable of T we will call that query and we will assign the complete DB set here so basically right now we have the complete DB set that we have assigned here then on the query we can apply aware condition and I can pass the filter whatever we get here we will assign that back to the query so that way whatever condition we have it will apply that on a wear condition and it will have the query ready for that now cat must always return one entity so when we return back we can say from query we want the first or default what we did here is exactly same that I had in the comment right here first on the DB set we have the WHERE condition and then we are getting the first or default from that record that is the logic that we have implemented right here then we have the get all we can copy the I queryable there and we can return back query dot do list because TP set will basically have all the records like categories in our example we have to convert that and return back finally we have removed that is on DP set we have remove and we can pass the entity similar to remove we also have a built-in method which is remove range let me add that and that is also inside AF core that remove range expects an i innumerable and it will remove all of those categories that are passed to the I enumerable so perfect with that our repository interface has been implemented and this looks much cleaner let me continue from the next video now we have a repository and we have an interface I Repository we need our category to implement that Repository so how do we do that in the I repository first I will create a new interface that will be I category Repository we will make this a public interface and that interface will implement the I repository interface and this time when it implements the I repository we know what is the class on which we want the implementation for this Repository that will be the category model where we want to implement the interface that way we are actually defining now that when we need the implementation for I category repository I want you to get the base functionality from Repository what that will do is that will make sure we have all of these base methods where entity will be category on top of that if you remember we needed two more functionality and those who are update and save methods so here we will have void update there we will get the category and let me call that obj and we will also have a method to save the changes so this is the final category repository interface that will implement the base functionality that we have for all the repository plus we will have an update and save for the category Repository now this is the interface we need to have its implementation in the category Repository let me do that in the next video we created the interface for category repository let me add the implementation for that in repository create a class which will be category Repository it will be a public class and that will implement the I category Repository if we press Ctrl start here it will implement the interface but when you see it implements it is actually implementing the ad get get all remove remove range those implementation we already have in our generic Repository so we do not want to add that again we want to use the base functionality because of that along with the I category repository we also want to implement the repository with the class of category and that will come before the interface like this with that you can see it does not give the error message or the I category repository or other methods but now we have one error here which says there is no argument that corresponds to the required parameter DB of repository category well if we go to the repository implementation here we are saying that application DP context will be provided to you when the object will be created typically when we use dependency injection they are automatically injected but in this case we are creating online 12 so what we can say is hey for category repository we want to get that application DB context using dependency injection and then we can add a Constructor get that here and when we get this implementation we want to pass this implementation to all the base class so here we can say base DB that way whatever DB context we get here we will pass to the repository and the error goes away the two methods that we have here are pretty simple when we have to save we save that on underscore DP dot save changes and when we have to update the category we will say underscore DB Dot categorys.update and we pass the object perfect so now we have a category repository that has been implemented how can we replace the application DP context that we are using here with our actual Repository let me show you that in the next video we have the category controller where we were using application DP context but now we do not have to use this directly we can access the category Repository how will we do that rather than application DB context we will say that we want an implementation of category repository and we are asking dependency injection to provide that implementation then on the underscore DP we have all the helper methods that we have created well rather than underscore DB it makes sense to call this category Repository that way it makes more sense when we are consuming that perfect so when we have to retrieve everything we have underscore category repo dot get all we created that scroll down where we had to create we had the underscore cat repo dot add method and when we have to save the changes we will say underscore cat repo dot save great that looks good let me scroll down further when we had to retrieve the category for edit we will go to underscore category repo dot we have the get and we will pass the link operator you goes to U dot ID is equal equal to the ID that way we are using category repository here next we have update let me copy what we have for add here paste it right here and we have update that looks good we have defined again let's copy the edit one paste it here and we have defined again paste it right there and we have the underscore category repo dot remove and save changes perfect so you can see with this we have our repository in place if we save everything we no longer have application DB context right here when we run the application we will run into an error message I want to show you because this is a common error message many times you can see I click on category and it says unable to resolve for type I category repository while attempting to activate the category controller whenever you see unable to resolve service for type the first thing you should think about is there is some issue when registering that service to the container because here you are asking dependency injection to provide an implementation of the I category Repository but have you even registered that service in the dependency injection container we have not so that is one thing that you should always remember if there is any service you have to register that to dependency injection now what will be the lifetime typically scope is the most common one and that should be used so that for one request it will use the same service so here we have the interface as I category repository and implementation is in category Repository at the using statement there and perfect now we have added the category repository in the dependency injection so in controller when we want the implementation the program knows that I have to give the implementation of category Repository let me run this and everything will work exactly the same like it used to with application DP context we can see all the categories here if I try to create one that word I can delete that and perfect all the credit operations are working but now we are doing that with our Repository in the last video user we were able to perform all the credit operations on category using our Repository but before the last video and current video something has changed on my machine and what I mean by that is if I go back and examine the app settings.json file if you remember the server name was a DOT now if I go here and if I connect using dot it does not work well I had to reset my laptop for some reason and because of that I encountered this issue so now what is the solution the local DB forward slash Ms SQL local DB I am able to connect to that particular server for that I can press the connect icon here and copy this and we will update that inside the server right here if we examine that you can see rather than one backward slash it automatically added to backward slash and that looks good but now you might be wondering that hey we had our migration we had our data inside the database what happens to all of that well because we are using Entity framework core things are super simple we do not have a bulky database here to create that inside the package manager console all we have to write is the command update database we do not have to add any migration we only have to update database because all the migration are already present in our code with that one line if I run the application now everything should work the same you can see category and we have the three categories that we were seeding our database with with that I want you to analyze the importance of migrations and how easy it is to get started with a project for an example if a new developer had to set up this code on their laptop they just have to clone the repository and press the command update database right now it is a local SQL server but if it was Azure SQL then they just have to run the command update database and the code should work automatically on their machine and that reminds me of my good old days when I had to spend almost a day to set up a code on my machine because back then we had many dependencies and we had to handle all of them but with Entity framework core you can see if a database is different it does not take much time we only have to update connection string run the command update database migrations get pushed automatically and we are up and running so I wanted to quickly show you on how you can easily update connection string and again bring your project with all the categories the next item that I want to show you guys you do not have to do that but I want to show you how that could be done and what I am talking about is sometimes you might face a situation where you have to rename your project like let's say where we have bulky in the project names here we want to modify all of them to be bulky book so how do we do that well it is pretty simple but there are some things that we will have to modify first whenever we have bulky here we will change the project name to people keep book here and when I do that we will see an error message now typically you will not see this error message but the reason I am seeing that is previously I tried to rename that and because of that a DOT user already exists at this location so for that what we will do is right click and let me open that folder inside there we have the bulky book web user we will delete that and then if I try to rename here it will work now again we don't want the bulky user we want bulky book web and perfect so again Point number one you will not see that error message but I want it to explicitly show that because of that I introduced that user then we have to rename all the project here let me do that bulky book.utility bulky book dot models and we have bulky book dot data access right now we have renamed only the project but all the files like the controller here you can see namespace is using bulky web in order to change all of that we will do Ctrl shift F find and replace wherever we see bulky we want to replace that with bulky book and let me replace all perfect that works but now if you notice the controller the namespace is modified here but the repository and everything you can see it is not detecting those projects well sometimes it might happen that it detects that project it all depends on the dependencies here I am not able to open the dependencies so let me restart Visual Studio once I do that it will reload everything and perfect now independencies when you examine project it has bulky book dot data access and it is working as expected but you can see the models here is not working so if we examine the dependencies in the data project you can see the name here is messed up because we renamed a few things changing that is super simple edit project file we will remove both the dependencies here and we will add the project reference once again to models and utility perfect with that everything should be fixed here let me build the solution and great that worked finally let me run the application and show you something odd and great right now you can see everything is working as expected but for some of you the footer here will not be properly designed and let me show you how it will look like if we go to views shared underscore layout let me break the CSS and perfect so this is exactly how it will look like you might be wondering that hey what exactly is this CSS and why is it present well what happens is there is automatically localization and bundling that is being done with the CSS this has been introduced with dotnet 6. if you examine the underscore layout.cshtml there is a DOT CSS file and it is automatically scoped to underscore layout in order for this to be automatically added to CSS inside the link here we need the href with the project name dot style dot CSS that is the CSS isolation that has been introduced and I wanted to show that as well so once that matches it automatically binds that and you can see the footer is functional as expected but if you go to category here things again will not work you can see the exception here and that is because knowingly or unknowingly we have also updated the database name to be bulky book this has to be Punky we did not intend to update the database name with the Ctrl shift F when we updated it updated the database name as well because of that the connection was broken and when we modified back everything is working as expected so even though we have spent about 10 minutes on this video we have learned somethings important first we saw the CSS isolation that comes with The Styling here and next we saw how can we modify the project name and if we modify some dependencies gets broken how can we fix that and make sure our project is working as expected now traditionally in a programming course you will not see this common issues but when you are working with a real world project I myself have encountered these issues and that is why I wanted to spend some time to give you exposure to these issues and how to resolve them I hope this video was helpful and let me continue with the course from the next video now in our project we have category repository and that is handling the crud operations for category category repository looks good but it is not perfect and what I mean by that is let me go to controller here and let's think that in a controller you have many action method and you are using about 10 different repositories you will have to inject all of them that is completely okay that actually gives you the freedom that hey you only inject the repository that is needed but one drawback here is if you go to Repository and if we go to category repository we have the save method now this save method will be there in all the individual repositories that we will have down the road like product order shopping cart and everyone else but the safe functionality is not relevant to the repository or the model it is a global method that is being used so the correct way of doing things is to have this save in something called as unit of work but before I Implement that I do want to tell you that if you only want to use the category repository in a project that is completely okay adding a unit of work is not always required I like that personally because it gives a clean approach but with that there are some drawbacks as well which I will cover as we proceed with the course but before that we have the big question on how will we have the unit of work inside the I repository here let me add a new item let me stop the project first right click add a new item and with the new version of Visual Studio they have implemented a compact View I do like that when I have to add the CES file but for interface we can click show all templates here interface and rename that to be i unit of work let's add that and we will make this a public interface and here we will have all the repositories of I category repository and we will only have the get inside there next we can implement the global method here like save now the implementation of how we will get the category repository that will be done in repository folder we will create I can use the compact view I need only the class file I will call that unit of work this will be a public class and it will implement the i unit of work interface we will press Ctrl Dot and implement the interface perfect we need an implementation for the category repository here let me add a getter and a private Setter right there now like in the category repository we had application DB context using dependency injection we will do the same thing and that will be done in unit of work right here we will have the class name as unit of work here and we do not have any Base Class we can remove that right here where we have the category repository we can add that in the Constructor let me cut and paste it here I will call that category and we will say category is equal to new category Repository and we will pass the DB context right there and we have an error here because in interface we call that category repository we change that to category here and perfect the error goes away so now in unit of work we have something for category repository where we are passing the DP context as well lastly let me modify the save here cut that and paste the implementation here and we do not need the save method inside the individual Repository I'll have to remove that from the interface as well and perfect looks good so with that our unit of work looks good and it has the implementation for category Repository let me close both the files here and in the next video let me work on category controller not the repository I closed that accidentally we have category controller here we do not want to use the category repository we want to use the unit of work that we configured because it internally has category repository as well now we have to replace the category repository with unit of work in the web project first we will go to program.cs and we will have to register that to dependency injection we no longer require the category repository we need unit of work this time so perfect we have unit of work and then unit of work internally creates an object or implementation of category Repository so here we will have unit of work and let me call that underscore unit of work we will get that using dependency injection and we will call that unit of work and right here underscore unit of work is equal to unit of work now in unit of work we have category and there we have get all so previously when we were using the category repository we did not have to access that but now in unit of work we have to write Which object we are working on or which repository we are working on and then we can do everything like before I will copy this paste it in all the places here and when we have the save we do not have that in repository that is directly inside unit of work so we do not need the repository name then in the edit here we will paste unit of work dot category same goes for update or save we only have unit of work perfect let me modify in all the places and great that looks good with that let me run the project again and see if everything works as expected perfect we are able to get all the category here let me try to create one that works and delete is also functional so everything is working as expected but now we are using the unit of work rather than directly the Repository this gives us one advantage in unit of work we will have access to all the repositories that we want but with that we have a disadvantage as well like in the category controller we only want category repository but in unit of work it will create implementation of all the repositories that are registered like if we have product if we have order or shopping cart so there are pros and cons in both of them but personally speaking I like the unit of work implementation because it is much cleaner so with that configured let me continue from the next video now I hope you are comfortable with controllers actions and we are going to add one more hierarchy on top of that and the only reason I am showing that is it is actually a great feature if you have to divide few things in your project and that is called as area typically when we work with routing we have controller and then action method but.net team has also provided something special to divide few things in different areas like if you have a customer facing website and admin panel you can divide your project in those two areas now how do you add that in a project we will right click on bulky book web here add hand we will click new scaffolded item inside there you can see we have an MVC area let's add that and we need to give area a name let's say we have two section in our website one is for the admin section so let me add an area for admin it will add the nougat package and scaffold that area another area that we will add will be the customer area that will have the code related to customer like home page details and much more perfect right here when we scaffold that you can see it adds a folder with the name of areas then it has admin which is the area that we added and inside there we have controllers models and view so basically all the code that was previously just in one location we can now break that down in different areas but when we add area you can see the routing here also changes in the scaffold.txt it displays that hey now you have to add areas in the routing as well so let me do that let me copy this and we will go to our program.cs we have the controller route here let me paste that here and we will add a forward slash so now we need to say what area should be invoked by default I will call that as customer we do not have that so let me add that area as well and we will call that customer area and let me add that perfect that looks good now with that we will have to move our controllers inside the area folders now in the area you can see we have folder for data and models but we have moved that to the individual project so we do not need these two here let me delete that from both the areas we will only have controllers and Views inside the area folder category controller belongs to the admin functionality so I will move that to the admin controller controller is a customer facing so I will change that and move that inside the customer area with that our default route now is customer area home controller and index action now when I move this the namespace were also updated but if in your case you selected no and you did not update the namespace make sure to update that namespace on top of that how do you tell a controller that this controller belongs to a specific area for that we have the area attribute here and we need to give the name that category controller is inside the admin area and home controller is inside customer area with that configured let me run the project and things are not working the constrained customer inside the route option let me see what the route option is and of course this will be equal to and not a colon now we have more user friendly exception which says the view was not found and that is indeed correct because we have moved the controller but we did not move the corresponding views so let me go to the Views here category we will move that inside the admin here and home move that to the customer views right here once you move that and if you run the project things will still not work where is the namespace let me see it is inside the category views and yep we have the model of category but how will we know where exactly is this category if you examine we had that previously in the view Imports we had that models so along with that we also have to move the view start and view import both the files we will paste it inside the view folder in both the areas perfect with that let me run the project once again and perfect the website comes up and everything looks good but when you click on home and privacy that is working because both of them are inside the customer area but category is inside admin area when you click there it tries to look for category controller in customer which does not exist so we have to modify that so what will happen is where we have the ASP controller now we will also have to Define ASP area so category is inside admin and home controller is inside customer if you do not write the area it will look for that controller in the existing area where the page is already residing that looks good let me run the project and see if that works perfect admin category that works if you click create new category it will work because even if you have not defined the area we are looking inside the same admin area that we are in so you can see create back to list edit everything is working because we are working in the same area now typically moving forward I will explicitly write all the areas but for category I think we are good to skip that because we will always perform credit operations from the category index page but perfect with that you can see how areas will add one more layer in navigation and now when we are working with routing we will Define area first then controller and then the action name now we have our category but we will be adding product in the upcoming video where we will be performing crud operations now before I add that let me add a drop down in the navigation so I will go to get bootstrap.com and let me go to the documentation search for nav bar we have a drop down here that looks good let me copy the Ally here for drop down copy that go back to our code we have underscore layout open here if not you can open that and after the LI elements let me paste that right here we go back to the UI we have heart reload and that kicks in but I see a blue color and I think that is because of the CSS yep I do not need that I can comment that out save that and perfect looks good the first one here I want that to be category cut the Ally and paste it right here we will have to rebuild Let Me Wait For That and perfect we have category but I did not see the color here we will have to make that text dark save that here and perfect we have that but rather than that I can just give it a class of drop down item and let's see if that works perfect much better after that I will leave the divider here and let's see that looks good rather than drop down here let me make it content management and perfect that looks good now we have worked on performing current operations on category but in our website we will be selling books and basically we need product that will contain all of the books of our website and that will have a category so we need to create a model for our product which is book and perform crud operations on that first thing that we have to do for that is actually create a model let me close all the tabs here we will do that in the bulky book dot models here right click add a new class and I can call that as product we will make this a public class and what will be all the properties of product if you recall inside category we used data annotations and we had the ID as the primary key we can copy those two paste that in product here because we will have ID and rather the name when we work with a book we have title we do not want max length there this looks good after that let me add description ISBN and author for our product and our store is a bulky store where we will be selling books in bulk so if they buy more books they will get more discount for that let me add First Property which will be list price and I will add a display property here because if you notice here it has a list price I want to display that with a space so for that we have the display data annotation and I will call that as list price and of course I forgot the name here that looks good on top of that I want a range validation that price must be between let's say one and thousand dollars looks good for the list price but our store is a bulky store So based on the different quantity we will have different price let me paste that three times the first one let me call that price next one I will call this price 50 and last one will be price hundred price hundred will be price of the book if they buy more than 100 quantity price 50 will be the price for more than 50 quantity and it will be price for 1 to 50. so list price will be a different price and price here will be the cost of product for the quantity 1 to 50. if they buy more than 50 then we will give them the price 50 for more than 100 we will give them price hundred now this looks good for all the properties that we want right now of course we need category inside our product and we also want to add an image to our product but we will do that later on first I want to keep things super simple right now our model has few strings and few double kind of similar to what we had for category and with that in place I want you guys to practice crud operations on product similar to what we did with category and that will be your next assignment let me walk you through that in the next video we have added the product model to our project now we have not added all the properties but I have added the basic properties for now before we add this product table to our database we will have to add that to application DP context inside the data access so let me copy this DB set for category and we will rename that to be product and the table name I will call that as products now that looks good on top of that I want to see the product as well so let me copy the hash data here paste it one more time and then we will have to create new products here when we seed something you can write whatever you want but for consistency I have provided that inside Snippets if you open the resources and snap it section 6. we have seed products let me open that copy everything and I will paste that inside the hash data there I am populating six products and these are all the properties that we have added in the product model so it should match perfectly with that configured now we have the data and we can seed our table so with that you can work on your first assignment inside there I want you to push product to the database and when you create the products table along with that all the six records will also be created because we added inside the hash data once you create the products table then you have to implement the product repository for data access you will create the product repository interface and Implement that and after that you will also add that to unit of work that is the basic configuration that you have to do for your first assignment so good luck with that and we have already done that with the category repository and the category table all the steps are exactly the same so I hope you have good practice before we move forward in the next video I hope you were able to complete the assignment but if you face any issue let me do that together in this video first thing we have to create our products table in the database so we have the package manager here let me open that and we will add migration now when you add migration if you face edit here like if I just add the migration add products to DB this will not work because the default project here is the bulky book web project it should display an error message right now we see a different error message and that is because where we have the hash data this should be product I hope you corrected that when you tried the assignment but with that let me try adding migration of course we get error message because the default project is web project when we add a migration that has to be updated to data access with that let me add the migration and perfect that looks good let me update the database and create it completed successfully if we scroll down here in the migration it is also seeding the data so that looks good let me switch back to the SQL Server here and examine bulky tables products table it should have six record and great that looks good if we go back to the assignment our first step is complete here next we need the product Repository for that we will go and basically we can copy and paste the category repository rename that to be product Repository we will have to do the same with the interface here so this will be i product Repository copy that name and we will make sure to rename our interface that will be on the product and in the update we will get a product object looks good let me go to the product repository here and we will modify that I product repository class name will be product Repository and this will be product Constructor name will be product repository and in the update we will get the product underscore DB dot products dot update perfect our repository also looks good final step we have to add that to our unit of work let me open the interface as well as the implementation this one will be i product Repository we will call that as product close the interface here in the implementation we will have to add the i product Repository name that as product and we will say product is equal to new product repository pass the application DP context with that I believe our unit of work as well as a repository for product is complete we have unit of work in place for our product repository it is time for the second assignment where you have to create product controller and action methods for the credit functionality after you create the controller and action methods then you will have to create view for all the credit operations and add client-side and server side validation all of the steps here we have already done that for category controller so you have to replicate them and the only reason I am making you replicate them once again is that you will gain some experience on how to work with all the crud functionalities with models views and controller the only difference this time is that you have more properties and product than category model so make sure to practice all the crud operations and I will show you how to do that in the next video I hope you were able to complete all the crud operations with product I do not want you to see me typing everything here because of that what I will do is copy what we have for category and paste that for product and modify that real quick so let's go back to our code here where inside the areas here admin controller copy and paste the controller and I will rename that to be product controller let me copy that name and I will modify the class name and the Constructor name everything else looks good here wherever we have category I will have to replace that with product so I can do Ctrl shift F replace in file and in the current file I will replace category with product I will match the case here and replace all now here make sure you are only doing that in the current document once you complete that let's take a look here perfect on unit of work we are going into product and retrieving all product where we have the create we do not need the custom validation so I can remove that and this looks good inside the edit get action method we are retrieving the product here and rather than category let me also rename this so lowercase category we will rename that to lowercase product in the current document and that looks good perfect in the edit post here we are updating inside the delete we are fetching that looks good in the delete post here we retrieve the product and remove that so with that the controller looks great now we need to add views for our application if we go back we need to create views for the crud operation we already have the views for category copy and paste that again the complete folder I will rename that to be product and let me see what we have in index in all of them we have to replace category with product so an easier approach is let me open all of them here close the product controller we only have the four view open here Ctrl shift F replacing file and we will replace that in all the open documents which are all the views for our product replace all did not find any with the lowercase let me do that with uppercase here and perfect that worked now we have a different properties inside product so rather than name we have title let me rename that and paste it two times after title we have description let me modify that and paste it here I will copy and paste this about five more times here then we have the ISBN let me modify that next we have the author after that we have the price first we have the list price next we have the price 50 well we first have the price then we will have price 50 and price hundred so copy and paste that two more times here we have price 50. and finally we have price hundred rate that looks good for create let me copy this and go to edit here paste it right here perfect inside delete as well we will have to paste that and we will remove the validation on top of that let me disable all the input Fields when we are deleting perfect that looks good finally we have the index here scroll down and in index I want to display five properties title ISBN the list price here author and category where we have the for each here we do not need any order by and first we have the title next we have ISBN whoops not that just ISBN copy and paste that three more times we have the list price next we have the author and finally right here I want the category but in our current model we do not know what is the category of a book or product we will cover that in the upcoming videos but this looks good with that in place let me add a navigation to that in underscore layout views shared underscore layout we have the drop down copy the Ally paste it one more time this will be for product and that looks good I believe that is all that was needed but let me run the project and make sure that works we will go to content management product here and great we have the product list here let me try to edit perfect that looks good whoops description is two times and edit let me remove one and rather than input here let me change that to be a text area when we have text area we need the explicit closing tag else it will not work when we save that let's go back the hot reload kicks in and perfect we have a text area now of course this is not perfect right now but we will modify that in the upcoming videos right now if I try to update something here it should work and perfect that is working let me revert it back here let me create a dummy product here create that works let me try to delete that and perfect all the operations are working as expected anything that I will change right now is add a little bit of space so let me go back and in all of the views here where we have margin top up for let me make that margin y save that it was in the edit perfect that looks good so I will add this margin y4 in all the places delete as well I need the margin y create margin y index margin y perfect let me save all go back here and perfect now everything is looking much cleaner but basically we have the product grid operation those are working as expected next thing that I want to work on here is when we are working with product we need an association between product and category if we go to category it is action sci-fi and history basically any product that we have will belong to one of the category so that will be a foreign key relation between product and category table how can we accomplish that with ef core now if we did not have EF core we will basically have a column of category ID in the product table and then we will have a constraint on foreign key which we will add in SQL Server but thankfully because of EF core we do not have to touch our database all we have to do is Define some constraint in our model and Entity framework will take care of everything else so how can we accomplish that foreign key relation between category and product let me close all the tab here and let me open the model here which is product model there we basically need a column for category ID so prop integer I will call that category ID now if I add just this column table will not know that this is a foreign key to the category table in order to explicitly Define that we need a navigation property to the category table so right here we will have a navigation property to category table and I will call that category and on top of that we have to explicitly Define that this category property is used for foreign key navigation for the category ID and for that we have a data annotation of foreign key and we can say that this category table has a foreign key which will be category ID right here that is all that we have to write and then Entity framework core will take care of everything else so you can see how powerful Entity framework core really is with that configured let me save that and I will add a migration so we will add a migration and I will call that add foreign key for category product relation now when you change anything with the core model if it requires a database change Entity framework code is smart enough and it does all of that you can see it is adding a column here and it is updating some data but when it is updating the data you can see it is setting all the value to be 0 for category ID that is not what we want because we are seeding our data we need to actually pass category in that seat data so this migration that got added I am not happy with it because I am going to change something in the C data and create a new migration now only because this migration has not been pushed to the database I can directly come here and we can go to migrations and delete that migration you do not want to do that directly here you can go to package manager and you can write the command remove migration and it will remove the last migration that was added you can see in the migrations folder that migration does not exist anymore and it got removed so now we can add a new migration but before we do that we have to fix RC data that is inside application DB context here we have to pass a category ID you can pass anything you want I am going to be random about it some of them I will say one the other one I will say 2 here and last one I will say three so perfect we have assigned some value to the category ID and when we are seeding make sure that you use the category ID that exists and not something random like 11 that will not work with that configured let me go to package manager and I will add the migration once again perfect let me see the values yep we have the correct value this time and that looks good so our migration is looking good let me update the database and perfect that is done let me go to SQL Server we will do select top thousand and great we have category ID on top of that if you expand that and examine the keys you will notice a foreign key relation between product and categories so with that if you try to edit here and if you try to enter let's say 11 it will not work because of the foreign key relation so with that you can see how easy it was to add a foreign key relation between table all we had to do is use the foreign key data annotation with that configured let me continue from the next video now before we move any forward let me open the product model in the models project here and I will add one more property which is kind of critical and that is image URL when we work with any product here they will typically have an image so let me call that as image URL it will be a string property right now and it will be empty right now with that let me save this and we will have to add a migration I will call that add image URL to product the seed entity did not work well you can go there in the data and you can add an empty image URL that should work right now we will fix that as we proceed with the course for a fact let me add the migration once again and it should work perfect let's update the database and great now our model for product is complete and we have added all the properties that are needed how this image URL will work that we will cover in the upcoming videos what we want to work on is when we go to product and we edit a product or create a product we cannot toggle the category so let me fix that first we need to add a drop down right here before we even add that drop down we need a list of all the categories that we can display in the drop down so first we need to retrieve that in the controller if I open the product controller when we are passing it back to the view we are passing list of product on top of that we need to pass list of all the categories or we can pass a select list that we can use to populate a drop down now there are multiple ways to pass that thing but if we want to pass that along with this object that is not possible because when we return back we can only pass one object we will see how to overcome that in the upcoming videos but let's say you only want to return a list of product and not any other model in that case if we have to pass some additional functionalities there are many other ways but before we see how to pass that we actually have to retrieve that so to retrieve that I will store that in an innumerable of Select list item if I press Ctrl dot here it is inside system.collections.generic that is the innumerable and select list item is inside microsoft.asp.core.mvc dot rendering now if I press F12 on the select list item it will navigate me to the class here and you can see with the select list item we have text and value and that is what we will be populating and using in our drop down so let me call this category list is equal to we need to retrieve all the categories so unit of work dot category dot get all and then if we just do that it will not work because here it is retrieving an i enumerable of category and we have to convert that to an i enumerable of Select list item how can we do that Dynamic conversion while we are retrieving some things from the database in order to do that we have something powerful known as projections in EF core in order to use projections we will say dot select and there we will give it a random object let me call that U and what object do we want to return from here we want to return a new select list item so we will write that and inside there what properties should be populated let me break it out in different line here we want to populate the text which is inside U dot name and value we want ID of the category so U dot ID convert that to a string that way what will happen is each category object here will be converted into a select list item and it will have a text and a value and that is how we can convert a category to an i enumerable of Select list item using projection again this is very powerful feature because you can see how in a single line when you are retrieving something you can easily pick only some columns and not all the columns you can convert that to a new object and directly assign that with that we have the category list right here but now the question is how do we pass that onto our view let me do that in the next video now we have to pass some data from our controller to our review and for that we have multiple items or multiple routes that are available first one here is a viewpag view back transfers data from controller to view and not vice versa and that is exactly what we want we want to pass the data that we have in our controller to our review and it is ideal for a situation in which the temporary data is not in a model like in our example we need the drop down list and that is not within our model we do not have a property to store that so in that case we can store this in a view back and pass that to our review viewpack is a dynamic property that takes advantage of the new Dynamic features in c-sharp 4.0 any number of properties and values can be assigned to a view back and the view backs life only exist during the current HTTP request viewpag values will be known if there is any redirection like in our case we will be passing the value from controller to view and we will not be redirecting that is why the viewback value will persist last point is that viewback is actually a wrapper around view data now you might think what is view data but we will cover one thing at a time first let me switch back and show you how we can use a View Bank right here in the code we are getting all the category list but I am inside the index action let me cut this we actually need that inside the create action so right here let me paste that here and now you might be thinking that we are not passing anything here why don't we pass the category list but if I go to the view you can see we have defined a model at the top which is the product model so now we need to pass this category list to our view and we want to use viewpag so for that we can say viewpack dot category list is equal to category list we can give any name that we want and this name that we give here will basically act as a key value where key will be category list and value will be whatever we assign here once we add this here then inside the create we can fetch that and display that in a drop down let me scroll down and where we have the price hundred after that let me copy and paste it one more time the label will be for category ID ASP validation we can change that to be category ID but here we want the select field now when we are using select rather than input we cannot use the self-closing tag we have to explicitly close that and after that I will add one more default option here which will be disabled selected by default and there we will display select category now asp4 we have that as category ID but we need to display all the items in the drop down for that we have a special tag helper ASP items and this expects an i innumerable of Select list item we have that in our view back so in order to extract that we will write view back Dot and we need the key name now key name if you write here it will not help with intellisense because it is not Dynamic you can give any key name here and intellisense cannot detect what you gave so you have to type that and make sure that it matches if there is any spelling mistake things will not work for the class here we will give it a bootstrap class of form select and with that let me run the application we go to product here and we will have to go to create new product scroll down perfect we have select category and there we have action sci-fi and history so our drop down is looking great with create product now that is one way of doing things with View Bank let me continue and show you the alternative in the next video we have seen view back in the last video next we want to see how we can accomplish the same things with view data view data also transfers the data from controller to view and not vice versa and again it is ideal for the situation where the temporary data is not in a model view data is derived from view data dictionary which is a dictionary type view data value must be typecasted before use like if we go back when we were using view back right here we did not have to Cache that data it was all dynamic but when we use view data we will have to Cache that before we use the value and lastly The View backs life only last during the current HTTP request and view data value will be now every direction occurs similar to view Bank so there are quite a few things that are similar here but let us see that with an example first we have to go back to the controller let me comment this out copy that and paste it here rather than view back we want to use view data if you use dot there it will not work you have to Define that in a square bracket and what is the key value like in a dictionary that is how you assign a value to view data now the question is how do you access that inside view when we were using viewpag we did not have to do conversion but with view data we will have to do some conversion here so we will use the add sign and we will say view data here write the key name let me go back and copy that to avoid any spelling mistake and then we have to explicitly convert that so we will say as and this will be an i enumerable of Select list item with that the errors go away and you can see how view data might be a little inconvenient as compared to view back but with that everything should work the same let me restart the application and see that in action if we go to create new product and perfect that is functional but there is one more thing that you should be aware of viewpack internally inserts data into the viewpat dictionary so the key of view data and property of viewpag must not match because both of them will go to the same entity now before I wrap up this video previously we have seen temp data which are used to generate alerts and temp data can be used to store data between two consecutive requests temp data internally use session to store the data so think of it as a short-lived session which will only exist for one request now temp data value must also be Typecast before use so check for null values to avoid any runtime errors finally as you already know temp data can be used to store only one-time message like error messages or validation message and if you refresh the page after that it will go away so that gives you a brief idea on all the differences between view pack view data and temp data now we know viewpag view data and we are using that in our application but think about that when you have an application and if it grows you have many more data what if you have 10 view data and 5 view bags that you are using things will start getting ugly because when you will look at the view you will not be able to easily identify where this is coming from and the reason I am saying is our view is tightly bounded to this product model but product model does not have all the data that is needed so typically I avoid using view bags and view data as much as possible the alternative to that is to tightly bind your view to the object that you want if object is not a simple object you can create a combination of object and that is called as view model view model as the name suggests it is a model which is specific for a view so let me show you how to do that and then everything will make much more sense in our models folder let me right click add a new folder with the name of view model I will have to stop the application here and I will call that view models inside there I will add a new class file and I will call that product view model where VM stands for view model it will be a public class and we will think about what will be all the entity that we want for our product we want a product object so first let me create that property which will be product next what we want is an i enumerable to hold the drop down so we'll say prop and that will be an innumerable of Select list item when we need the select list item here we will have to install the new get package microsoft.asp.net code.mbc Dot View features the property name we will call that category list here exactly what we have in the product controller now inside create we were not passing anything to the view but if we go to our review we were using product now what we will be using is product view model we cannot access that directly so we will go bulky book dot models.viewmodels dot we have the product view model now viewmodel is something that we will be using in many of the views so it makes sense to add this to our import statement inside the admin area view import let me add that using statement and I will also add this copy that to our customer view view Imports and we have a global view Imports as well perfect let me save and close all of that and now we can remove this product view model will be detected when we add this here our title is inside product so we will have to add that in all the places let me modify that for all of the properties here whoops you can see the errors went away and then where we have the ASP items we do not want any view data we want to access that directly from our product view model if we go back we have the category list here now if you try to access category list directly here it will not work so basically when you have to access something from the model directly and if it does not work you can always access the model by using the add sign so we can say add model and there we have the category list now the product here is working but if for some reason this was not working you can access product by writing at model dot product both of them are exactly the same things perfect we are using our view model let me scroll down I believe everything else is working let me build the project here and see if that works we still have to modify our controller but let me do that now product controller where we have the create we need to pass a product view model so right here we will say product view model let me call that product VM is equal to new and then we have to assign the properties here category list will be inside category list comma we have the product product will be new product so perfect that looks good and then we will be passing the product view model if you want you can just cut this from here and assign that to the category list like that it should also work we do not want the view data or view back let me remove that perfect much cleaner with that we have a view model that we are passing to our create view let me run and see if that works we go to product here and create new product perfect that is working but now if you post here it will not work because if you examine in the HTTP post we said that there will be a product obj this we have to modify to product VM and when we are adding something we'll say obj dot product with that configured let me save and run the application and try to create a new product I will populate dummy information category let me make it action and create and we see an exception now you might be wondering on why we are getting this exception because the exception here is inside the select field and it says object reference is not set to an instance of an object that is a common exception when you are working with C sharp basically anything that is being accessed here does not have a value but why when we are posting it is trying to access these fields the reason is simple something in model state is not valid and it is returning back to the view when it returns back we are not passing the view model so drop down is not populated let me show that I will add a debugging Point here and let me hit create once again and see model state is valid is false now what property is false here we can examine that in the result View and the category list is invalid the image URL is invalid and the product dot category is invalid now why is it validating all of those properties we do not want the validations on them so basically we need to tell that hey when you are validating our model I do not want validations on these three entities one way to fix the image URL right now is let me go back to the create View and let me just copy and paste this for image URL that way we will not be bothered with that exception and let me show that now of course we will fix image URL as we proceed but right now let me show you the issue with other two entities we hit create here let me hit create here model state is not valid and now there will be two entities one will be categorized and another will be category so we basically do not want to validate those two properties doing that is super simple all we have to do is add an annotation on top of the category list which is validate never and that will make sure that it does not validate this property that we have I will also have to add that where we have the category right here and if you want you can also add that to the image URL that way you are not bothered with that as well with that configured let me run the application again and see if creating a product works we go to product here let me try that once again well I have description two times let me remove that first that is annoying save that and the page should reload perfect let's try create we go back now model state is valid that is good and it will create the product great that works but if the model state was not valid we do not want that ugly exception so how do we fix that to do that let me just bring back this validate never comment it out for just few minutes and basically when we are going to the else block it expects the drop down to be populated so whatever we have here if I copy that to the else part and paste it here and I pass this view model back then it will work let me have this return statement in here now if we did this then it will create a new product view model we do not want that we only want the drop down to be populated so right here where we have the obj we can say obj dot category list and just populate that list not anything else when we return back we will return the obj or I think the better name here will be product view model so let me rename that perfect with that if I remove debugging point and run the application it will redirect us back to the product page let me show that we select some category hit create and it redirects us back but we do not see the error message the good thing is we do not see that ugly exception but the error message we have already handled that with validate never so let me bring that back I only wanted to show you that when you return back you have to populate the drop down once again because when it is being posted that drop down will not be populated if you encounter any errors on the page so this looks perfect that way we are handling if the model state is not valid we make sure to populate the drop down again so we did not see that ugly exception that we saw before but with that our create functionality for product is working as expected now we have a view model for our product based on that we already are binding our category as well if I directly press create here we have all the validations in place as well and with that we have seen how to add view models now to summarize again view models are models that are specifically designed for a view and the advantage that we get because of that is that a view will be strongly typed to one model and because of that view models are also known as strongly typed views so if someone will ask you what is a strongly typed view that basically means that there is a model that is specific for that view because of that because of that the view is strongly typed to a model so it is always good to remember that term as well now before we work on anything else where we have the image URL we want this to be a file upload let me switch back here let me close the git Comet here and I will go to create right now we are only working on Create and not edit and I have a very good reason for that which I will cover in the upcoming video but right now let me scroll down where we have the image here we do not want the esp4 we will say input type is equal to file and from control looks good we do not want validation let me remove that and let me go back and see how that looks perfect looks good here then where we have the form right here we will have to add one thing we have to add the ENC type which will be multi-part form data if you do not add that then file upload will not work so make sure that in your form you have multi-part form data with that we basically have an input element or rather an input file upload in the product create right now we have been working on create new product and I said before we are only working there and not on edit because I want to show you one thing in this scenario when you look at the create page it looks exactly same to what we have for edit but the details are populated when you select edit many times in the application what user have is they have a single page for create and edit and based on if there is an ID here they retrieve and display that and the display update rather than create that way there is a single page for create and update and that is exactly what we want to do as well we have seen the different pages for create an update when we were working with category but for product I want to combine both of them in a single page before we work on The View here we need to modify the controller where we have the create controller rather than create a more meaningful name is absurd and what I mean by absurd is up stands for update insert is basically combination of insert so if you have update and insert you remove this thing and you come up with absurd and that name is commonly used when you combine update and insert in one functionality in absurd you might have or you might not have an ID if you are creating then you will not have an ID but if you are updating then you will get an ID the functionality that you have here looks good for create but if ID is present then basically we have to retrieve that product and assign it to this product inside the product view model so what we can do is right here have an F condition and if ID is null or if ID is equal equal to 0 that means it is a create and we can directly return back to the view in the else part that means it is an update functionality because ID is present this will be equal equal to and if we have update then we will have to populate product viewmodel dot product is equal to underscore unit of work dot product dot we have the get functionality and we need to pass the link operator U goes to U dot ID is equal equal to the ID we are using get here and not get all because we know this will only return or ideally it should only return one record and that is the product once we retrieve that we can return back to the view and return back product view model so the first functionality here is for create and later one is for update with that the Absurd controller here looks good we need to modify the post action method for upsert as well and when we are updating if you remember let me go to create we added multi-part form data when a file is uploaded here we will get that here in the I form file we will make that a nullable field and let me call that as file now right now I do not want to focus on what we will do here or rather any functionality in here we will do that later on we do not need edit I can remove them all together perfect so absurd post we will come back to that but let me modify the view so if I go back to the views of admin product create we will modify that to be observed and we will remove edit we do not need that right let me open up cert and work on that when we are in the form we should have the ID in the hidden property that way when we post we always have that populated after that where we have the title create product here if ID is present this should be update product so we have to make that dynamic we will use the add sign here and we can check model Dot product.id if that is not 0 then we will display update else we will display create we can remove this create product and that should be dynamic let me run the application we will not be able to navigate that directly because when we go to product this is going to the create action we will have to modify that that is inside underscore layout here product controller we have the index action that looks good whoops it is inside index there it will be absurd let me scroll down where we have edit it will be the same action observed save that and we need to stop and restart let me navigate to product here and we hit create new perfect goes to upsert here if I go back and try to edit it goes to the same view but you can see data is populated and we see update product let me also modify the button text here so let me go back to absurd we have the button here we can also add an if condition and B like if model dot product dot ID if that is not zero then we want update else we will keep create copy this paste it here and call that as update now right now I am keeping things super simple but we have if else condition moving down the road we will be adding some more validation on update that is why I have added an if else condition rather than an inline functionality of just renaming the text here so perfect with that configured if I go back we have update and that looks good before I work on anything else if I go to product here and try to create a product you can see the description here is a text box I want to convert that to a rich text area for that I will be using something called as Tiny MCE here and we have the editor right here you can see it is a fancy editor and you can do quite a few things with description make it as fancy as you want for pricing if we go here you will see that it is free forever if you use the core version and that is good enough for our requirements so let me log in here and if you do not have an account you can always continue with Google once we log in here we have the cloud dashboard now I already have registered for the account so you can see some other usage that I have but if you sign up here you will see the cloud integration and that is what we need to get started first thing is the script here so let me copy the script that is displayed and we will go back to our application we will open underscore layout and where we have the JavaScript at the end here let me paste that once you do that if you scroll down there will be the tiny API key but that key is already included in the script here so you can directly use the script right here now that we have the script in place we have the actual usage right here and let me copy the script tag here only thing that we need is a text area on the page because you can see the selector here is text area so let me go back here and in the product I will open absurd where I have the description I will convert that to be a text area and with text area we need the explicit closing tag now with description we do not want any validation so I can remove that and we have to add the JavaScript if you notice here we have a section for script inside there we can paste the JavaScript code and that should work with that configured let me save everything go back and perfect you can see we have a nice editor right here now with that we do not see the description at the top so let me go back here and where I have the description cut that and paste it and I will remove the form floating and where we have the class I will give it a class of text muted or the grayish color perfect that looks much better you can see we have fancy fonts here that could be applied and our description can now be super fancy if we go back here and when we scroll down you can see in the toolbars and plugins we have quite a few plugins right here we might not need all of them we can remove the image here the link here media search replace let me remove that and let me remove the links here I guess that should be good enough let me see how that looks like save that go back and yep that looks better you can always play around with what plugins you want but I will leave that selection to you with that we have implemented tiny MCE right here on the product page now finally what we want to work on is when we select an image here and hit the create button we need to save that image somewhere in our code here and we need to also update the image URL let me do that in the next video now when we select an image here and hit the create button we need to save that image all the static files of our code must always go into one folder and can you tell me which folder that is if you set www root folder you are 100 correct so inside the www root folder let me stop the application we will add one more folder for images in that folder I will create a subfolder with the name of product with that in place let me open the controller again and let me remove this controllers folder because it is empty all the controllers are inside the areas folder so let me delete this we do not need that anymore and we have the product controller where we have the Absurd post action method right now we are not handling create and edit because we have handled that in the get here but we still have to handle both the scenarios when we are upserting but inside the iform file we will receive the file that was uploaded so we have to capture that file and we have to save that inside the images product path so now our question is how do we access this root path of our application which is www.root folder to do that we have to inject something called as I web host environment and that is provided by default with the.net project so basically we have to inject that like we are injecting the i unit of work but the good thing is we do not have to register that that is a built-in functionality that is provided with the.net project so I will say private read only I web host environment and let me call that underscore web host environment we have to inject that using dependency injection and then using this web host environment we will be able to access the www root folder so if the model state is valid we can say string www root path is equal to underscore web host environment dot we have the web root path that path will basically give us the root folder which is www root folder after we get the root path here we can first check if file is not now so basically a file is not null then we want to upload the file and save that in the product folder now when the file is uploaded file might have some weird name so rather than keeping the same name we can rename that to be a random quid so right here we can say string file name is equal to quid dot new quid dot to string that will give us a random name for our file then right now we have the www root path we need to navigate to the product path so I will say string product path is equal to path dot combine and I want to combine the WWE root path with another path which is images forward slash product that will give me the path inside this product folder where we have to actually upload this file the file name here is only a random grid but we need to preserve the extension that is there in this file so where we have the file name here I can say plus and we have to get the extension sub path inside there we have a helper method which is get extension and we will pass file in there we have the file name so the image that we will be saving will have a grid and it will have the same extension that got uploaded we have the final image name here and we have the location where we have to save that with both of that configured let me save that image we will add a using here we will say variable file stream is equal to new file stream and there we have to give the final path as well as the file name so basically the complete URL so I can do path dot combine there and we can combine the product path with the file name that will give us the ultimate location where we have to save that file when we are using file stream here we have to pass one more property here which is file mode and we'll say file mode dot create because we are creating a new file there in order to copy the file we will say file dot copy to and we want to copy the file to the file stream that we have right here that will copy the file in the new location that we added or configured right here on line 60 and 61. now that is great but in the product view model if we examine we have product where we need to save the image URL so wherever in the folder here we are saving that image we should save that in the product image URL so right here we will say product view model dot product dot image URL is equal to and we know that will be inside the images folder I will add the forward slash there we have the product folder and then I want file name and extension both of them are inside the file name variable so we will save that with that configured our create functionality looks good after that we are adding the product here saving that and we have the temp data product created successfully now right now even though this is absurd we are only handling creation of a product with a particular image so let me run the application and make sure that works before we work on updating any product and updating their image we will go to product here and let me try to create a product let me select an image here and we will hit the create button and we have an exception cannot insert null into image URL let me see why that happened because we are updating that right here let me add a debugging point and see what is going on let me continue go back here re-add the image and hit the create button model state is valid let me see if the file came through that did not for some reason that is null let me go to absurd and see we have the multi-part form data that looks right where is the input form right here well we have type is equal to file but if we go to controller it expects a file name we do not have that here we have to give it a name of file as well that is how it will bind that to this variable and we will have to rebuild and apply changes let me try that let me select image again hit the create button and perfect while came through this time let me debug and also show you the product being populated in the folder file is not null we get the new file name with the extension product path here that looks good file stream now once we execute this copy to the folder here with product you can see it already has that image but if you open that in file explorer it is empty right now I can show that properties you can see it is zero bytes because right now the file stream is open but it has not copied now it has copied that through so if we go and see properties again we have the size of the product once we do that we populate image URL and we add that product we press F5 product created successfully support fact with that our create functionality for product is working but when we edit that product we need to somewhere see that image let me add that in the next video now what I want to do is where we have the update or rather create rather than taking up the full width here we will take column 10 and the two rows on the right hand side we will Reserve that for the product image so we have to make some designing changes let me go to absurd we have our form here inside there let me add a div give it a class of row in that row we will say div class of column 10 and I will add one more div with a class of column 2. whatever we have in the div here let me cut that and paste it in class of column 10 save that and perfect it got shifted on the right side here we will display the image so let me scroll down here and we need the image tag IMG SRC is inside model dot product dot image URL and we will give it a width of 100 percent I will also give it some custom styling here and let me close that tag let's go back and perfect we have the image that is being displayed here when we go to create it will be empty and that is okay now our create is functional and we can see the image but in the update functionality we have not added anything inside the post method if I go back here controller everything that we have here is for create well not there in the post here we only have product dot add we have not handled how to update the product right now so in the next video let me manage updating product in the upsert action method we want to manage updating a product in the product controller but for that first let's think about what should happen to the image if we go back here and let me go back let's assume that when a product is created they must upload an image so next time when they are updating something let's say they are only updating the description and if they hit the update button then we do not want to update the image so basically when they are updating if the image URL is now then we do not want to update that but if they are updating a new image then we want to replace the existing image with the new image so if a file is present when they are updating then we want to delete the old file and we want to add this new file let me handle that scenario first when we have to upload a new file all the logic stays the same but the only thing that we have to add here is we have to delete the old file if image URL is present and a new file is being uploaded so if the file is not null and if image URL is present so we will check here F product viewmodel dot product dot image URL and I can say string dot hnl or empty so if that is not null or empty that means that there is an image URL and we are uploading a new image because file is not now in that case we have to delete the old image in order to remove the old image we need the path of that particular image so we will say variable old image path is equal to path dot combine we need the root folder which is inside www.root path and then if we examine our database here bulky table products you will notice that we have a forward slash in the image URL we need to remove that because we are using path dot combine so I will say product view model dot product dot image URL dot we have the trim start and we want to remove the forward slash for that we will have to escape that with another forward slash that will basically combine and give us the path of the old image then deleting that is simple we have that in system.io dot file we first need to check if anything exists in that old image path if it does then we will delete system.io dot file dot delete the old image so perfect we will delete that image we will upload a new image and we will update the image URL that is great but finally where we are adding here we will rather have to update now how will we identify whether it is a ad or an update that depends on if the ID is present so we'll say if product viewmodel dot product dot ID is equal equal to 0 that means it is an add paste that else it is an update so underscore unit of work dot product dot update product viewmodel dot product now before we test this I want to modify something in the update and let me walk you through that in the next video we have added the code to update the product and remove old image if that exists let me see that in action here we have an old image let me pin this so we can see the old image being deleted and let me upload a new image we will hit update here and you notice here the new image was added but the old one was not deleted let's debug and see what happened we will add a breakpoint here let's go back and try to update a new image here update and let's see it did not go into the if condition here and for some reason the image URL is null the reason behind that is if I go back to the Absurd view we have the image URL but it is not there in any input field because of that when the form is posted it does not stay there we will have to add the image URL in a hidden field as well and that should resolve our issue with that configured let me run the application once again let me go to product and one with the image here let me delete the other image here because I know that is fake one and I just have the last image that is there let me try to update this one update and it should go inside the if condition perfect that work if I continue here you can see the old image was deleted and we have the new grid if we click edit here we have the new image perfect update image is working as expected but one issue is let's say we are only updating the title here if I save that image stay as is but if I go to edit here image is still there one thing that I will show here is AF core is smart if I update this to be the title here and let me add a debugging Point once again we are not modifying the image here if I press update you will notice it goes to the update here and it has the new product that has everything right here and the product here title is updated EF core will basically update all the properties right here along with title so if in case somehow the image URL was empty here then that image would be removed from the table entry so what we can do is in this case even though the update is working when we are updating we can be explicit about what needs to be updated so right now everything is working but if you want you can be explicit if we go to repository product repository we have the update method right here rather than directly updating the object here we can retrieve the product object from database based on the obj ID that we received right here and once we have that product from the database we can manually update that so we can say if obj from DB is not null then we want to update which properties we will have to do a manual mapping for all of those properties and after that we can be explicit that if opj dot image URL is not null only then you update the image URL if you have any other custom logic you can add that here as well but this is how you can do a manual mapping if you want and that is one of the reason I have update inside the individual repository and not in the generic Repository with that configured if you run the application everything will still work the same let me see that in action and let me also examine the product image here so have that side by side I will update the title here and maybe the description we update that hit the debugging Point let me remove that and perfect both of them are updated final thing we have the category ID that is being displayed here but we need to display that inside the product index let me do that in the next video but before that let me add image to all of the other books that I have so Fortune of time I will select that update Dark Skies I have an image for that next vanish in the sunset we have cotton candy and a rock in the ocean leaves and wonders perfect we will not delete these two right now we will handle that in the upcoming videos but if we add it perfect the images are now coming up for all the books perfect let me continue from the next video now we want to display the category name here if we only had to display the ID that was super simple if I go to controller here and let me add a debugging point on the product controller index action refresh that if I examine the obj product list you will notice we have category ID that is populated for our products but we need to populate this category navigation property because inside there we have category name that we can access so basically based on the foreign key relation we need this category to be populated how can we do that smartly using EF core that we have something called as include that will automatically include the navigation properties based on the foreign key relation and it is provided by the efco team so how can we use that we will have to add that to our core repository because that is the method that we are using in the controller to get all the product that is where is that right here now before I add that in the get all logic let me show you how that will work with directly application DB context right here we have underscore DB dot products on there we have something called as include and you can see right here it says specifies related entities to include in the query string so let me add that and what we want to include we can write that by saying U goes to U Dot and we want to include category that is how what will happen is that category will automatically be populated when it retrieves all the product based on the foreign key relation so this is great but how can we add this same logic inside the cat all that we have right here for that we will have to add a logic but I want to show you one more thing right now we only have category that we want to include but if you had to include more properties you can add multiple include statements and rather than category if this was something else you can include that as well so include can have multiple variables like category category ID maybe you have cover type or something else that could also be included we want to make sure that our repository can handle that scenario for that what I will do is we can have a nullable include properties and that will be string now right here it is a link operator when we are saying it will be a string what do we expect basically we are saying that if someone gives us category or category ID based on that we can build the include properties now category ID is just an ID so things will not work so for an example I am saying let's say there are two things category and cover type that a user has to include so if in include properties they provide that with a comma separated string then we can add that in the include statement when we are building the query here one thing that is a very very important here is this category must match exactly that you see right here if you use a lowercase C here things will not work because let's say if we try a lowercase category you can see it is not working so it must match what you see in the include statement that is working here and that is exactly what you should pass in the string parameter right here let me add this inside the interface as well we have the interface repository interface get all and when we are getting something at that point also we want to include properties so we will add that logic input the places then we need the actual logic of adding that basically we will first check here if include properties is not now in that case well rather than now here I would rather check string dot is null or empty so if it is not now and empty we will add a not sign then we want to include properties like what we see on the top right here but we will be receiving them as a comma separated values so we will have to split them we will have a for each and I will say include prop in include properties dot split and we will split them by a new character which will be comma and here I will say string split options dot remove empty entries so if any entry is empty it will remove those and let me split this in a separate line so it is easier to read and understand then where we have the query we will say query is equal to query dot include and we want to include the include prop that we are splitting if there is only one then also it will work but we have made sure that if there are more than one include properties we can add them as a comma separated list and our repository is dynamic to handle that same logic that we have in get all we will add that to get as well so let me add that here and we will add the include properties perfect we have added the include properties in both get and get all Repository with that configured let me close everything open the product controller we do not need anything else here and when we are getting all we can Define the include properties we want to include category now right now I am intentionally adding a lowercase because I want to show you this will not work so let me run the application with a lowercase category and see what happens we go to product here and we get an exception with the include properties you can see unable to find navigation category in the string paste include path category that is because it does not find that navigation property if you correct that case here and run it it should work perfect no exception this time and if you examine the result here category is populated and we have the category name so finally we can display that in the Absurd in the index here let me go to the view where we have the category we can navigate them by obj dot category dot name save that and continue and perfect our category is being populated and everything is working as expected but with that we have learned an important Concept in Entity framework which is how to populate the navigation property using dot include we are using a table layout with the product list here but what if we want something Fancy with the product like what if we want search functionality in the table we want pagination we want sorting and all of those basic feature rather than implementing all of that we have third-party plugins that we can use like we have data tables.net where you can see it comes with all of those basic functionalities and getting started is super simple first thing that we have to do is include the CSS and JavaScript file so let's do that we go back stop the application here open underscore layout in views and we will be adding the CSS file first link or yell is equal to style sheet href let me paste what we copied here and that looks good scroll down we need a script tag copy and paste it one more time here and we need the SRC let me go back here copy the CDN paste it right here perfect both of those steps are done and last step here is initialize the data table in order to see that let me click on get started here and we will be using Ajax call to load all the data inside here you can see we have a basic JavaScript where it is looking for an API endpoint to load that data now you might be thinking that will I have to add an API for this of course not when you are working with dotnet and if you create an MVC project API support is already added in the controller so whatever we were doing in index we will have to do that in the API call so we can just copy this line here and let me scroll down at the end right here I will add a section or rather a region call that API calls I have an end region within here let me create an HTTP get request in there we will say public I action result get all and that is already supported because we are using MVC architecture there let me paste the code that we copied here and the product list here we basically have to return back so we can say return Json here and we will return a new object so we will say new data is equal to obj product list simple as that now how do you test that let me run the application here and we do not need the ID in the parameter let me remove that with get all run that one more time now we need to navigate to the controller and endpoint it is inside admin product and name is get all if I type that you can see it retrieves the data here and we have all the product so our API is up and running in less than one minute because we are using MVC project and it has the support for API so perfect our API endpoint is functional now we need to call that API in an Ajax request and load our data table let me do that in the next video we have to create JavaScript to post an Ajax request and load data so that will be a little bit tricky so let me walk you through all of that here in the WWE root folder we have CSS Js right there let me add a new file I will stop the application new item and I will call that product dot Js but let's add that now if we go back let me copy what we have for data table paste it right here we are loading the data table here but we need to do that on document.ready because of jQuery we can use dollar document.ready and we will call a method load data table let me create that function here and inside there I will basically cut and paste this code in a variable data table is equal to and let me paste that you can see it is looking for something called as my table and that we will add later on do not worry rather than my table let me call that TBL data first thing we need the API URL that is inside admin we have product and get all that should retrieve all the records now once we retrieve those records we have to format that if I go back to the documentation and go to the data tab here and scroll down you can see we can render columns and that can have data the first property here is data but because we are using Ajax here that will automatically be loaded so we can copy The Columns here go back to the code and I can paste it after the curly bracket add a comma and we will add columns The Columns here will be inside the colon here and the Ajax as well we will add that in double quotes I will add that in curly bracket for the values add a comma and let me format that a little bit so that everything makes sense we need the closing curly bracket here let me add that and perfect things are looking good but in the Ajax here we can directly use that or we can Define the URL because when we have Ajax call it is possible you want more options or more properties that is why it is an object next we have the columns now we have the data here and we have few names and along with that we can also give some option like what will be width of all the columns before we work on adding the column names here let me actually go back to our index here and where we are displaying the for each Loop that is no longer needed because we will be using data table for that in here all we have to do is we need to add the ID of TBL data so where we have the table we will give that ID we do not need the tea party we can remove that data table will take care of configuring all of that only thing that we have to do is add the JavaScript code so we will add a section for Scripts and inside there we will add the reference to SRC Js product.js we have already added data table in the underscore layout so with that configured let me run this and I want to show you an error message which is very common when you are working with data tables we go to product here and we have a warning it says requested unknown parameter name for row 0 column 0. you can see we are asking for name here and it does not find that the reason is the Json object that controller returns it does not have anything with name but if I change that to be title and if I refresh here this time you can see the error is position not found that is because the column names are not valid but title gets populated if you click ok so you can see the issue right here we need to have the exact column names so if we go to index here copy all of them like ISBN price and we have the author let me save that go back here and refresh you can see it is still not working why is that the case well it has to match what the API is returned and it is case sensitive so we need to know what the API is returning we can copy and paste this let me call the API product forward slash get all we can copy this API go to Json formatter open that in a new tab and let me paste our API code let me go back and copy that once again and paste it here and perfect you can see it is title ISBN author list price has a capital P so if you want to display that it must exactly match so let's do that we will keep this open here and where is that right here we have ISBN or lowercase copy paste that list price copy and paste that author or lowercase and finally we want the category name category name if we go here it is inside category and then we have name so you have to write category Dot and then the property inside there is name that is exactly what you have to use and once you do that the error goes away so if you notice that error message that means in your data table your property names are not valid now if I go to index here let me add a width of hundred percent for the table and that looks much better with that we have title ISBN price author and category we can modify some of the words in the product.js like title can take 25 percent ispn that's okay this can take 10 percent author can take up 20 and category name that looks good if I sum them up it is total of 85 I believe so we have 15 more in that 15 more I want to display two buttons so how can we add custom buttons where we have the columns let me show that in the next video in data table we want buttons to edit or delete any of the product if I go back to the code here we have basic columns but with that basic column we can make things super fancy let me show you how to do that we will copy that paste it one more time the next column whenever we are editing or deleting any of the product we need the product ID so for data we basically need the ID here if I save this and go back it will display the ID I do not want that to display the ID rather than that I want to display some buttons right here so for that what I can do is there is something called as render and there we can define a custom render function that we want so here we will say function and the parameter we will take data which is basically the ID now here inside the string we will have to write the HTML that we want to render like if I add a div here with a closing div and if I said hello if I save that and go back you can see it displays hello right there but rather than that in the dev let me add a bootstrap class of BTN group give that a roll of group now right now I have to write everything in single line but if we want multi-line we can use the symbol which is on top of the ash track where we can write multiline HTML so you can see we can break it out in different line and it still treats that as a string first I will add an anchor tag here with href that is empty right now we will add some bootstrap classes and I am adding a pencil bootstrap icon if I save that here go back perfect we have the edit button similar to edit here let me make some space and add a delete button with an icon for trash fill and great that looks much better I can reduce the width here to make sure that we have enough space so let me do that we will make this 10 percent author can be 15 and we can change this to be 25 percent perfect looks good now when a user clicks edit we need to write the href here so we have to redirect to admin area product controller upset action and there we have to pass the ID so ID we have that in the data here so we can use the dollar sign and use data because we are saying data is basically the ID with that if I go back you can see and it is functional and that link is working as expected in the next video let me add an API endpoint for delete and then invoke that now we need to add the delete logic so where we have to get all in product controller let me copy that paste it one more time here and let me call that HTTP delete here we will name this as delete when we are deleting we need the ID based on the ID here we will retrieve our product and let me store that to be product to be deleted rather than obj if product to be deleted is null in that case I will return Json where in the object I will say success is false and message error while deleting but if that is valid then before we delete the product we need to remove its image as well so we will say variable old image path is equal to and if I go to absurd where I was combining the path that logic I can copy this and we will paste that right here perfect so we will delete the old path here we need the www root path which we can get from web host environment dot web root path image URL is inside product to be deleted dot image URL let me break this out here perfect so we delete the image here next we will say unit offer dot product dot remove we want to remove the product to be deleted and underscore unit of work dot save finally where we have to return the Json here we will say success is true and message delete successful let me stop the changes we have an error let me see what that is it says delete already exist let me see where that is and yes of course we need to remove the existing delete functionality that we have and I will also remove the delete view in area we have the delete let's remove that with that let me add a debunking point here and go to product.js now there if I copy this paste it here rather than upsert if I say delete here and I can just pass forward slash ID let me run and show you what happens we go to product here we have the fake product here if I hit delete here the API will not be invoked because that API has HTTP delete there but if I remove that HTTP delete let's see what happens we go to product and the delete should work now perfect it hits our breakpoint it will remove the image and it will also delete the product if I continue here perfect it says success is true and message delete successful if I go back here that product no longer exists so our API is actually being invoked and it returns Json but typically what happens is when we are deleting we like a confirmation for that we will be using sweet alert and let me show you how to add that to our project in the next video when we are deleting our product I want an alert and for that I will be using sweet alert 2. if we see notification here you can see it is a fancy notification let me go to the installation tab here and we have the CDN let me copy that and I will add that in our project I have underscore layout here let me add that now how to actually invoke that now let me go to the examples here and if we scroll down we should have an example with confirm button this is exactly what we want we want a confirmation box and if they select yes delete it then we want to delete the product so I can copy the sweet alert dot fire go back to our project here and we will add that in product.js file let me create a function here delete where we will get the URL that needs to be invoked I will paste the sweet alert dot fire now in here when user selects OK let's delete that we want to make an Ajax request to our controller to delete this particular product and I will make this HTTP delete that is what it should have I will do continue editing here and let's go back so if it is confirmed I will say dollar dot Ajax and we will have the Ajax request we will first have the URL that we will receive in the parameter of the method right here next we need the type and that is HTTP delete so we will write delete here and what should happen if it is successful well on success let me have a function where we will get the data back if it is successful what are we returning back here we are returning a success and a message so that will be available in data right here what I can do is I can just call our toaster notification dot success and pass the data Dot message with that configured we have to pass this URL and we will have to replace this href with an on click so we have the URL that looks good what I can do is I can replace href with an on click call the delete function here and I will pass that right here that looks good with that configured let me rebuild and see if that works we go to product here let me try delete perfect if I hit cancel nothing happens but when I select yes delete it it hits the end point and if I continue you can see on the UI that product is still visible but that is not the case if I load the product page again that is gone so what is happening is even though that product is getting deleted the data table is not getting refreshed refreshing that is super simple as well if I go back to product.js here when we have the result success here we can say data table dot Ajax Dot reload this data table we have that right here but in order to access that we need to create a variable with the name of data table with that it will be available right here and it will be able to reload that so perfect with that configured let me restart and test everything once again we will have to create a new product I do not want to delete the existing products for fact we have that here we hit delete just delete it delete successful and the data table also Reloaded with that we have all the grid functionalities for product working as expected we have made great progress with our project we have products where we have categories and now what we should do is on the home page of the application we should display all the products and for that you need to think about what we will do in controller and action method let me close the project here the controller that we will be working on for that is inside customer we have the home controller index action now we will be working in the customer area because the home page will be accessible to all the users and not just admin user in the home page you need to think about what we need to display we will be displaying all the products so basically we need to get all the products from database and for that we need unit of work using dependency injection so let me add private read-only unit of work and inject that like we did in product and category controller then in the index here we will get an i enumerable of product and let me call that product list is equal to underscore unit of work dot product dot get all and when we are getting we want to include category so do not forget that when we retrieve the product list here we can return back to the view and we will pass the product list here next we have to go to the view and design that view first thing that you should think of is what will be model that will be a lowercase and that will be I innumerable of product we already have the using statement in the import that's why we can directly write product right there in there let me add a div give it a class of row and padding bottom of three and then we need to iterate through the I innumerable so I will add a for each Loop variable product and model for each one of them I will add a div give it a class of column large 3 and column small 6 bootstrap classes in there I will add a class of row and padding of two I need the closing div here perfect there I will add a div give it a class of column 12 padding 1 let me close that div as well I don't know why the closing divs are not working as expected whoops let me align them Ctrl a Ctrl KD perfect then I will add the final div which will be a bootstrap card layout and there I will give class of card border 3 padding 3 Shadow and Border rounded within that I want to display the image so IMG SRC is equal to that is inside product which is the local variable that we have here dot we have image URL and I will give it bootstrap classes of card IMG top and rounded let me save that and run the application we should see 6 image here it might take a second but perfect I can see all of the images loaded right here that looks great after that I can add a div give it a class of card body padding bottom of zero at the closing div as well it is annoying when the closing div does not add itself and I will add a div with padding left of one inside the padding left one I will add two paragraph tag and basically it has bootstrap classes for designing first one I will display product.tidal and next one will be product dot author save that let's see how that looks here and perfect looks great let me go back to the code copy the padding left one paste it one more time here and we don't want the card title we will have text dark opacity looks good text opacity and text Center back there I will display the lowest price so I will say as low as and in a span we will display product dot price hundred that is the lowest price that we will have dot two string and we will format that in a currency so we will add C and let me go back to the UI here perfect looks great so our currency looks good let me copy this paste it one more time and let me also display the list price I think before we should display the list price and then the lowest price that makes more sense perfect list price and then the lowest price let me see perfect let me go back here and before the span well inside the span I will add a class text decoration line through that will make sure that it adds a line there and before this I will display list price let me break it out in separate lines here perfect that looks good let me organize this as well and great we go back to the UI and that looks much better I want to remove the margin here so where we have this I will say margin bottom of zero let's see how that looks and great I like how the home page is coming along final thing that I want is a link to go to the product details here so let me go back after we have the div of card body I will add one more div here in there I will have an anchor tag and we will display details href let me keep it as hash for now and see how that looks whoops we have an error there I forgot the double quotes and that should fix it perfect so home page of our application looks great now in the next video let's work on the details page when a user clicks on the detail page we want to display all the product details on that page so what will be the model for that page it will basically be a single product so what we should do is go back to the code here in home controller where we have index copy and paste action method we will call that as details and we will require an ID based on that ID we will get all the details and not get all because it will be a single product we will call that product and we will return that to The View let me do that perfect that looks good now when we are getting a product we need to add the link operator you goes to U dot ID is equal equal to ID based on that it will retrieve the product details once that is done let me add that view I can directly click add view here and add that change the name to be details and let me make sure it got added in the right area yes it did perfect so with that we have added what should happen on the details but on the home page or the index we need to add that redirect now because we are in the same area and same controller I can only write the action method that count the action details it will by default use the same area and same controller but on top of that when it is being calling that if we examine the controller we need to pass the ID so if I go back here we will say ASP route and name is ID we will use the exact same name if you want to call that as product ID then we will have to use the same name right here and that should work so how do we get the product ID that is inside product.id perfect that should work let me run the application and see that in action let me click here perfect product id1 go back product ID3 and that works so perfect now we are able to navigate and that is working as expected now we need to design The Details page if we go to the home page we have all the products and that design looks good but when we go on the details page we need to display image category price and much more rather than spending time in writing bootstrap and CSS I have provided that in Snippets make sure you have downloaded them and then in the Snippets here in section 6 in section 7 we have the details UI copy everything there and I will paste it inside our details view right here now whatever I have here it is purely HTML and CSS you can see there is no tag helpers or anything related to.net programming it is all HTML CSS and bootstrap save that and if we go back and navigate to The Details page we have a fancy design template that is ready with only HTML and CSS we need to populate this with all the dynamic data so let me do that one thing at a time starting with the title if we go to the top in order to get anything here we need to add model what will be the model in details here we are passing a product so that will be our model where we have the title here we will say model Dot we have title let me copy the model here next we have model dot author when we have to go back to the home page we can add ASP action it will be index action then we need the image here that will be at the rate models dot image URL scroll down we have category that is inside model Dot category.name ISBN list price is model dot list price and we will convert that to currency then we have quantity here we have price twice here let me see what is going on in the template first we need the first price here and then we need to toggle all the price so here we will have model dot price dot to string and currency format paste that here let me copy Dot tostring and let me see how the UI looks like perfect looks good after that we need the description now before I work on description let me go to product and make the description a little fancy I will just go to laram Epsom and let me generate something there I will copy that paste it here and let me make some things bold some things italica and underline one word let me copy that update and I will save that for all the description now the reason I want to do that for all of them is that the UI looks a little consistent so let me do that real quick because of all the scrolling I think it was best if the back button was at the top here so that could be updated later on but perfect description looks good now if I go to the home page details here and let me modify the description here to be model dot description you will see something ugly here which is HTML text that is because we have the rich text editor and if we have to convert that we have something called as html.raw and we need to pass model.description inside there and perfect you can see it translate that exactly back to what we wanted so back to home should work now let's go there go to another details and we have a count button which you can ignore we have an add to cart as well but that is coming soon we do not have that in our functionality right now I can go to the top here and I will add margin bottom of 4 as well and perfect that looks better for the details page now we will ignore the count here and add to cart but basically on our website we have the home page and Details page that is working as expected we have the home page and The Details page that are working as expected with that covered I want to work on authentication and authorization and Scaffolding identity with the.net project when we talk about identity we think directly about registration login what if the password is invalid how to create all of those tables in the database and making sure that security is top notch but when it comes to.net project we do not have to worry about all of that the.net team provides a default identity implementation that we can use with confidence because it is built and provided by the.net team and that basically lifts off all the heavy lifting and we can trust the code that is being written but how do we add that identity which is login registration and everything related to that to our project to get started on the web project we will right click add and we will select new scaffolded item there we have identity and we can select that now in the later versions of dotnet 8 the identity might get updated if that happens I will update the course as well but this is what it is right now on the top here if we want a different Master page we can select that if not we can leave that but then you can see all of the files that are provided by the identity team we have many pages here for login logout set password register reset password and much more you will not need all the pages right here so what we can do is we can select the pages that we want but before I do that we have something called as DB context now we already have a DB context in the data access but you can see that is not being detected here the reason it is not being detected is not because it is in its own project it is because when we have a DB context for identity we need to do some configuration and we will do that before we continue if I open the DB context that we have which is application DB context that basically implements the DB context but if you have to implement the identity then we have to implement something called as identity DB context and if you press Ctrl dot here we have to install the nougat package microsoft.asp.core dot identity dot Entity framework core we can install that package directly from here or we can say install with package manager opens the package manager here and we can install the dotnet 8. let me do that perfect that is done once that is done we have to add that using statement and the error goes away now that is the only change that we have to do but when we use identity DB context if we run our project something will fail and let me show that we see an exception here the entity type identity user login requires a primary key to be defined I will not go into much details about what is going on here but basically where we have the application DB context if you have on model creating that basically you will have to write this one piece of line and that is because keys of identity tables are mapped in the on model creating and if this particular method is not called then you will run into the error message so ignore all the details here it is one of the configuration that is needed so when we have identity DB context we have to add base dot on model creating model builder and with that if we run the project here it should work again and perfect you can see the application is coming up here we can navigate to the details and everything is working the same but basically the DB context now is implementing the identity DB context rather than simple DB context with the change of identity DB context if we right click on the web project and if we try to scaffold the identity here let me do that and by default let me override all the files but the DB context you can see it automatically now detects application DB context because that has identity DB context with that configured let me hit the add button this might take a while so let me wait for all the scaffolding to be done and perfect you can see that completed successfully and in the kit changes here you can see there are 79 changes so quite a few things have been changed here and many things have been added let me walk you through all of that in the next video scaffolding identity is one of those things that has always some issues from what I have encountered and this time also it is now different when we scaffold identity if I directly run the application you will notice we have an exception here where we are seeing a weird exception with unit of work now because I have worked with identity and I know what exactly they are doing basically they have added a new application DP context rather than using the existing application DB context now why they are doing that I have no idea but identity has always had these issues so to fix that you can just search for application DB context and you can see in areas identity they have added a new application DB context as well which is not needed this application DP context is basically implementing the identity DB context that is what we had in our application DB context as well and you can see the base start on model creating that is what we added as well the only thing that we do not have in our application DB context is the identity DB context we have not defined the default user that is not required it is optional but you can always Define that and perfect with that it is exactly the same so what we can do is close everything here and let me delete the application DB context that is inside the bulky book web project we do not need that with that deleted let me try to build the solution perfect everything is successful let me try to run the project and see if that works and perfect everything is functional so now our application is working as expected with identity being scaffolded and with that configured now let me walk you through all the changes in the next video before we proceed further let me walk you through some of the changes that we have I know there are quite a few changes but thankfully I have committed the changes so we can exactly see what is going on and what got updated perfect so first thing in the application DB context here we added the on model creating and these are the changes that we did so that looks good then the next thing here let me take a look at program.cs in the bulky web project there you can see in the green what got added basically when we scaffolded identity it added a service which is at default identity for identity user and there it has option where it is saying that hey if you want to sign in your email account should be confirmed this is one of the option which is not required so if you remove that then if your email is not confirmed even then the user can log in and we will go with that option but on top of that we have something special here which says add Entity framework stores and then it has the application DP context so what happens this time when we add identity to the project it basically also adds all the database tables that are needed for the identity like we have users table we have roles table we have user roles table claims table and many more on this line 14 we are telling Entity framework that hey all of those tables will be managed with the help of DB context which is application DB context that is where we are binding Entity framework with the identity tables and with that identity is added in program.cs one thing that we should also add here is in the middleware we should be adding use authentication and that we must add before authorization and the reason behind that is authentication is basically checking if user name or password is valid if the username and password is valid then authorization comes into picture authorization basically tells that hey now you have access to the website but based on your role you might have access to some pages and not all the pages like where we are updating the product and everything maybe role of admin has access to that page but if role of a logged in user is customer they can only access home page and Details page they cannot access the product page but in order to check role of a user they must be first authenticated so always remember that authentication will come before authorization that looks good for program.cs let me see what is updated in app settings.json it added a new DB connection we do not need that it added that line because it was trying to add a new DB connection we do not need that so let me remove that and perfect the comma as well and perfect that looks good we do not have any change in app settings I can revert that pack as well next we have a change in login partial dot CS HTML now this is not a change you can see an a here that means a new file underscore login partial has been added and in that partial view we basically have the login and register button if a user is already signed in then we have the logout link and we have a details link to manage that user we are injecting few things here do not worry about any of them right now basically a new partial view has been added here and let me see what we have in the areas account quite a few files have been added right here but with all of that configured if we go to solution Explorer inside areas we have a new folder with the name of identity we can remove the data because there we had the application DB context but in identity Pages it added all the pages that we selected and we selected all of the pages that were available with the identity package so you can see there are quite a few pages right here and all of these pages are not MVC Pages they are Razer pages that we saw in the beginning of the course I gave you a brief idea on how Razer Pages work for example we have the login then we have the dot cshtml.cs for the page model so right here in the page we have the page model we have login we have email password and a submit button on the page model here we have few details but then we have the on get Handler and we have the on post Handler so that must feel familiar to what we have already seen in Razer pages now when the identity was implemented by Microsoft in initial version of.net core 2. there were both MVC and Razer page implementation but later on Microsoft moved identity only to Tracer pages that way they do not have to maintain that in both the places so unfortunately the identity that we have is only in razor pages but good thing is Razer pages are not that different and we have seen how to perform crud operation in Razer pages so you should also have a basic understanding on how Razer Pages work but Affair and the application how can we see the login and register page because if I run right now you will notice on the home page we do not see anything in the navigation adding that is super simple if you remember it already added one of the partial view let me show that in the web project which was login partial right here so basically if I go to Pages well not here in the default views shared we have login partial and that has the login and register button what we can do is in underscore layout we can add call to that partial View so right here after the UL and this UL is the navbar nav and rather than flexgro1 let me make it me Auto and after that you are here we will be adding partial name is equal to and name of that view is login partial make sure there is no spelling mistake there save that and let me go back perfect you can see when we save it we have register and login right here we have to toggle the text there so if I go back here I will remove the text dark we do not need that in any place here perfect save that and let me see perfect now we have the register and login buttons here and when we click on them it is taking us to Identity and then it has page account register now why is this not working let me explain that in the next video now in our application if we click on register or if we click on login you will notice that it does not work can you pause the video and try to think or maybe even Google on why that is not working it is a little bit tricky but I want you to see if you can identify on what is missing and to give you an hint something is missing in program.cs file I hope you were able to figure that out now if I go back to the project here we added login partial let me examine that when we go to login partial we have the ASP area but we do not see ASP controller or ASP action for routing we rather see ASP page and if you remember that is used for Razer pages so what we have here is indeed correct because register and all the identity pages are indeed Razer pages but in the program.cs file we only have support for MVC if we go back here that is the route that is being supported and we do not have any services that tells that hey our application will also have Tracer pages so we need to add that basic configuration and tell our application and services we will register add Razer pages and then where we have the pipeline here we will say app dot map Razer pages that will make sure that it adds a routing that is needed to map the Razer pages with that configured now the register and login should work as expected if I click on register here perfect we have a default registration page provided by the.net team and there is email password and confirm password if we click on login here we have email and password so you can see many of the pages have already been implemented and provided to us by the.net identity but before we move forward with login and registration let's say when we register a user where will this user be saved in the database we do not have any tables in the database but what actually happens is because of the identity when we add migration it will automatically add migration to create all the identity related tables let me see that we will close all the tabs here tools package manager console and I will add a migration add identity tables we have to change the default project and press enter perfect you can see in the migration it is creating a table asp.net roles asp.net users table role claims and many more tables related to Identity so all of this configuration of tables is already being done in the.net identity all we have to do is add migration and update database you can think about if you had to do all of this implementation it would take quite a few time and then also when it comes to security you need to be very sure that everything is super solid the.net team has taken care of all of that and we can just use that with confidence once that is done if I switch back to the SQL server and examine tables great we have so many new tables that are created for identity the main table here is the user stable and you can notice all the identity related tables will have asp.net before the table name so users table is basically asp.net user rolestable is asp.net roles in the users table we have username email we also have phone number but it is possible that you might want more properties in a user table like you might need address of the user full name of the user and much more so now the question is how can we modify the existing users table and add more columns based on our requirement let me show you that in the next video now we want to add more tables to the users table which is the default implementation enter and identity for that if I switch back to the application let me close everything here and if I examine program.cs where it added the default identity you can see the default user is identity user but if we want to add more properties to Identity user we can always extend that user so basically in our models here let me create one more file and I will call that application user we will make that a public file and in that file we need to make sure it extends the identity user and we will have to add the using statement for that we will have to install the package microsoft.extensions dot identity dot store once we do that that means application user will have all the default settings of identity user on top of that let's say we want to add name of the user and that will be a required field along with the name here we can add four more properties like street address city state and postal code we can make them nullable but name will be required now once we have that we need to add that to migration and we also have to add a mapper for that so if we go to application DB context we will create a DB set for that so DB set here all application user and I will call that application users with that configured we can add a new migration and I will call this extend identity user the migration you can see it is adding column City there is also a discriminator column but we have name postal code State and street address it looks good let me update the database and let me switch back to the database and let me do select top thousand again perfect it added all of those columns but one column is this discriminator column what exactly is that well now in our application if you think of that we have two type of user we have identity user and we have application user so discriminator column will basically have a value that will tell that the user on that record is that an application user or is that an identity user simple as that but with that we have seen how to extend the default identity user in our project and add more columns we have added application user in our models and we have pushed that to our database but the default identity here is still using identity user with that let me run the application and try to see how the default registration and login functionalities work so let me register for a user here and I will call that test gmail.com password I will do admin123 star with a capital A because if I only use one two three you can see password is not strong enough so we have to keep something strong I will add admin 123 star and register perfect once I register here it automatically signs me in but if we log out here and then if we go to login we can try that again test gmail.com and admin123 I did not add the abstract at the end so we should see invalid login attempt that looks good now let me type the correct password perfect with correct password it logs me in and we have a profile and on the top right here we see hello test gmail.com now if you click there it displays the profile where it displays username phone number they can update their email verify email modify their password add a two-factor authentication and they can download or delete their personal data all of this is provided by default with the identity that we scaffolded so you can see when we scaffold it provides many things not just the basic identity setup and it is more like a complete identity package but of course if you add more fields to register you can always update profile and all the other pages but before anything let me switch back to SQL server and examine the user that got created in the asp.net users table perfect you can see we have the record here if you scroll to the right what should be the discriminator column will it be application user or will it be identity user if you said identity user you are correct you can see that right here because right now in our application the default identity is identity user but on top of that the important thing is when we are registering the user we are creating an identity user and not an application user so we need to modify that because with identity user we will not get city name postal code State and street address if we want to capture those properties we need to find out a way to register an application user so let me work on that in the next video now we have the discriminator as identity user changing that to application user is super simple but before I walk you through that let me go back here in area identity Pages account we have register let me open the register page model again this is a Razer page here and you can see we are injecting many things Independence injection I want to spend some time to explain you few things right here now think about when you are implementing a login or registration functionality you will have to write all the code of what should happen when a user enters username and password you will have to encrypt that code you might have to validate that with what it is there in database and then you can be like okay authentication looks good login is successful on top of that you will have to store that in session or some place that user is logged in and you might have to store the details about user in session now these are only the basic things if you think about the complete authentication there are way more functionalities that are needed taking care of logging a user all the way to logging out a user and managing their credentials between there when we use the.net identity.net team has taken care of all the heavy lifting for us and they have given us these classes like sign in manager user manager role manager to manage your roles and all of that is provided by default all we have to do is directly inject them in dependency injection and then using user manager our sign in manager we can manage the user now sign in manager expects the type of user and that is identity user you can keep that that is okay we only want to change the discriminator when we are creating that user with the help of these helper classes if we scroll down and raise our Pages if you remember we have handlers so we scroll down we have a get Handler and we have a post Handler inside the post Handler you can see there is a method which says create user if you press F12 or if you scroll down you will see that method right here that create user is doing nothing but it is creating an instance of identity user rather than that we want to create an instance of application user and we will have to update the return type here as well that will make sure that create user right here the user will now be of type application user then on Line 120 you can see we have a helper method in user manager which is create async there it expects a user object and password and it will automatically create that user so when this method will be invoked it will insert an entry in the asp.net users table and on top of that it will encrypt the password as well so helper method is taking care of all the heavy lifting on top of that if result is successful we scroll down it is also doing something to generate email token and sending email but it is only the interface implementation of that has not been done but if you examine on line 144 we are using sign in manager and we are automatically signing in that user and because of that if you remember when we register a user and hit the submit button it automatically signs in the user we do not have to write any code we are only calling the helper method in sign in manager and user manager so that is great now that we have modified the user to be application user let me run the application and see what happens let me try to register a new user I know this will be an application user so let me say application user gmail.com we will enter a password and hit the register it will automatically sign us in as well if we go to database and execute that we have the application user here and if we examine the discriminator you can see it is of type application user so things are indeed getting different here and we can now register an application user rather than default identity user now because we are adding application user here on user we have more properties like if we want name or if we want street address we can populate all of them but before I populate all of those properties what is the role of current user by default when you add identity it does add the table to manage roles but if you examine the roles table it is empty so we do not have any roles in our website like if we want admin role employee role company role or any individual role we do not have any roles we have to write some code to see this asp.net roles table and then we have to use some helper methods that when a user is created based on what we select enroll we want to assign that role so let me first work on that in the next video we want to work on roles and how we can configure the identity if I go back to my code here let me stop the application and open program.cs in the add default identity it only adds identity user it does not add a role to the identity in our project if we have to add the role then rather than default identity we have to customize that and we will say hey I want to add identity now when you add identity by default along with user it expects a role as well and just like identity user we have a default implementation which is identity rule with that particular line we have added roles to our identity and that is included in our project now once we add a role here let's say when we are registering a user in a drop down we want to display all the rules that are available but right now if we go to our database we do not even have any row we need to set that role so what I will do is right now I will have hacky way of adding those rules in the on get Handler basically when page will be loaded I will check in the data page hey is there a role of admin here if there is then I won't do anything but if there is no rule then I will create that role right here in order to do all of that we will need helper class here just like sign in manager we also have something called as role manager role manager works on identity role and we will have to inject that using dependency injection so let me do that role manager is equal to role manager let me scroll down where we have the on get Handler now first I want to check is there any row rather than having magic string of admin or customer let me create a file that will contain those constant and for that we have bulky book dot utility where we added a class static detail inside there I will create four constant one will be customer row then I will add a company role and admin and an employee role based on the rules here we might have some functionality that we want to turn on and turn off right now we will be working with admin and customer role but before anything we have to create these rules inside our database we will do that in register here we can check using our helper method underscore role manager there is a helper method rule exists async we can check hey is there a role with the name of SD dot roll user customer if that is then we do not want to do anything but if that rule does not exist then we want to create all the roles now because this is an async method we will have to await that so rather than writing a weight right here what we can do is after the method here we can say dot get a waiter dot get result that is same as writing an await statement but when we are calling here we cannot do that so that is why we can use getawater.getwizard so that will check if the role exists if it does not exist then we want to create that role so on role manager we have another helper method create async inside there if you hover it expects an identity row we will have to create new identity role and there we have to pass the role name so I will say roll customer once I do that again it is an async so we will await that we can use get a waiter dot get result now we can check if any of the rule does not exist we want to create all the rules that we have inside our static detail so let me do that and perfect that looks good now let me use full name here and rather than user let me directly use customer or if it is a company client Maybe so here I will rename them to be company and I have customer that makes more sense great so we are creating four roles in our database now when we are using the create async orthos helper method we do not need save changes the helper method is taking care of everything and we do not have to worry about adding a unit of work or any DB changes with that configured let me save this and run the application in order to create the role all we have to do is Click register and that will invoke the get Handler but when we do that we will see an exception it says unable to resolve I email sender while activating register model what exactly is going on here why are we seeing this I email sender error now the reason is in register we modified the create user but on top of that if you scroll up we have I email sender that has been injected here and we are using this email sender if we scroll down in order to send emails but that is not important when it is trying to inject the email sender it gives the error message and because we have not implemented this interface it is saying that hey I am not able to resolve on what should be the implementation for this email sender logic and that is exactly the same thing with unit of work as well if you remember where we have the interface of unit of work we added the implementation of that in program.cs and after that it was able to give us that implementation when we asked independency injection but email sender does not have a default implementation in order to solve that error all we have to do is have an implementation for email sender now of course we do not want to spend time right now to implement the email logic but we can Implement a fake email sender because the error is when it is trying to inject and not actually sending the email now where should we add the implementation for email sender that is something common and I believe it should fall inside the utility project so let me stop the application utility add a class file and I will call that email sender we will make that a public class and that should implement the I email sender we will press Ctrl Dot and we will have to install the package microsoft.asp.net core dot identity UI once we install that then we will have to implement the interface as well so let me do that and there is one method send email async now right now rather than throwing an exception here it makes sense to own the return task dot completed in future if we have to send email here we will actually have the logic here to send email but right now we are keeping things super simple once we have the implementation all we have to do is register that in our services so Builder dot Services dot addscoped I email sender and implementation is inside email sender with that configured the error should go away and let me go to register here and perfect the page loaded now again why this broke when we added a role is because in program we are no longer using the default identity we are adding a custom implementation because of that it does not have any fake implementation for email sender but once the get Handler is invoked our rules must be created if I refresh here perfect we have our roles table automatically populated based on the name that we gave for our row so perfect our roles table is now populated and we have user when we register a user how can we assign user some role let me do that in the next video now that we have roles in our database when we register a user I can add a drop down here where user can select any of the existing row now you might be saying that hey you are giving someone the right to register an admin user from the registration page is that a good approach of course it's not but right now we are learning things and that is why we will keep it here but later on in the advanced sections I will obviously remove that before the code is being deployed so right now we are learning things and it is completely okay when you are learning but when you deploy make sure that does not go into production so we need to add a drop down when we add a drop down on the UI we need to pass some things from the page model that way it will be accessible on the page and we can display that in a drop down so we have the page model here and we have input model where we have Point property in Grazer page inside that input model I will be adding more properties so what we will do is after confirm password let me create a property which will be string off row and then we actually need a row drop down list for that we need an i innumerable of Select list item so let me close this here and I will add an i enumerable of Select list item call that role list and for validation I will say validate never once we have that I enumerable we need to populate that inside the on get right here so we need to populate the input is equal to new input model we can use the new syntax here in there we want to populate role list and in order to access all the rules typically we use unit of work but when we are working with identity we have role manager inside there we have rules and that will have list of all the rules now we do not want all the rules we will have to project that to be a select list item so for projection we will use select and we can say x goes to x dot name we only care about the name we select that name and once we select that name we will project that into the select list item so I goes to New select list item and we want to populate text is equal to I and value is equal to I as well what we are doing is from rows we are selecting only the name and whatever we are selecting here we are adding that to a select list item and we are adding that field to both text and value you can see how projections can get super fancy and how they simplify multiple line of code in just few lines of code now the final thing is to display this particular role list inside our register so areas we have the register here and let me copy this div paste it one more time we do not want any validation here or label as well all we need is a select field so you can use input or you can use a select here where asp4 that is input dot row and ASP items is equal to model dot input dot roll list give it a class name of form select perfect now again when you are using asp4 it automatically checks the model but if you are using any other tag helper you have to use the add model before that with that configured let me save and restart the application I think I had to restart because hot reload might not kick that in but let's see perfect we have admin customer employee and Company on top of that I can also go back and within select I can add an option which is disabled to select a role if I go back perfect looks good now we have added a rule in the UI but based on our selection we have to assign that role to a user doing that is super simple and we have to write one line of code in the register on post Handler we will do that if the create user is successful right here because we are checking if result is succeeded of creating user if that is then we want to assign rule we will first check if input dot role if that is not now or rather than that let me do string dot is null or empty if that is not null or empty then we want to assign row and we will say await on user manager we have a helper method add to role async now you can see there are two methods here so be careful when you type if you type add to role saying that means you are adding multiple roles to a user you can see it expects an i innumerable of roles but we are only adding one roll so we will say add to roll async pass our user and the role that has been selected by the drop down in the else part here I can copy and paste that and basically if user does not select anything from the drop down then I want to assign them as T dot roll off customer so if input.roll is not null or empty we will assign that else we will assign them the role of customer it is super simple thankful to all the helper methods that are provided by the dotnet identity with that configured let me restart the application whenever I make change in the dot CES file I feel like restarting just to be confirmed now let me register here I will set test admin at Gmail and we will select a role of admin and we see an exception here where it is generating email confirmation token and that is because of the same thing previously we were using the default identity and that included the implementation but when we have the add identity it is not included by default so we have to add the add default token providers because when we register in the page model here you can see it is generating the email confirmation token and that requires the default token providers but if you examine that code is after the user is created and Rule is assigned so that means our user should be created in database if I go to asp.net user perfect we have the test admin here and how do we see if that user is assigned the correct role well we have a mapping table which is asp.net user role that Maps user to their corresponding roles if I do select top thousand and examine the user ID it ends in 80 that is correct the role ID here starts with 0 4 5 and if I go to the roles table 0 4 5 is admin so that means correct rule have been assigned in our database let me try to register one more let's go back and this time we should not see the error message of token let me see that this time let me register an employee and let's register perfect we don't see that error here let me go to database employee ends in one nine Let me refresh here and perfect the new user has a role that ends in 1 9 that is employee now finally if we do not select anything by default it should be customer that ends in one two let me test that as well we will not select any role and register that perfect if I go here once again customer is 1 2 new user should have one two and that looks correct so with that we can see users are being created in our database and corrected roles are being assigned to those user we did not have to write much code to implement that all credit goes to the built-in helper method provided in user manager and role manager with that configuration let me continue from the next video now that we have user who have actual roles in our website we can make one modification and that is the content management should only be visible if a user is admin if it is not then they should not see the content management right here so how can we check role of a logged in user for that if we go back to the application and we have to add that inside the underscore layout which is the master page there we have the drop down right here to check rule of a logged in user we can add an if condition using the Razer syntax and we have the user object that is already available with the project so we can check if user there is a helper method is enroll and we can check the name of the role we need the static details here but it is not accessible we have to add the using statement we will say bulky book dot utility and if we do not want to add it here we can add that inside the view Imports right here and let me also add that in the other views that we have so in areas actually admin views view import paste that customer views view import and let me see the identity we have view Imports paste that now I will also paste the other two inside identity and I think I cut that so perfect that looks good let me close all the tabs I had too many tabs open let me collapse all and we were working on views shared underscore layout so now SD is accessible and we can say if user is enroll admin then we want to display this particular Ally if I save that and run the application you will notice that this drop down will be hidden unless the user is an admin user so right now we did not see that if we log in as test customer it will not be available you can see that and if we log out here let me log in as test admin whoops it should be admin there we go and perfect then we are able to view that now here we are only toggling when to display this content management but if someone has the URL here if the log out here and even then if they type the URL you can see they are able to access that and manage categories that should not be possible we need to make sure that only admin has access to this page adding that is super simple and what we will do is where we have the controller let me go to areas admin controller we are in the category controller here we can add an authorized keyword and we are telling that only the rows is equal to SD dot admin can access all the controllers action method so if a user tries to access the index action or any other action method if their role is not admin they will not get that access this authorized keyword you can add that at the complete category controller that will apply to all the action methods but if you want to apply them individually you can also do that on top of the individual action methods so whichever route you want you can select that I am going to apply that globally for category controller as well as product controller once we do that let me save the application here let me log in as an admin first we should be able to access that let me log out and let me log in here as test customer and if I paste that URL here you will see something odd it is going to account and then access denied but we do not have that page if you go back and search in the solution Explorer we do actually have an access denied page let me show that which got added in the identity but that is inside identity area here it is trying to look directly into account access denied if it was like this then that page is actually loading so the default route for access denied is not working and we have to overwrite that and it is not only that round if I log out here and if I try to access the admin product you will notice it is redirecting me to login because a user is not logged in they cannot access that first they have to be logged in and then they must have the role of admin so here also it is missing that particular area which is identity if we have that then it will work now these are the default application path that are set by default in the application but because we added the identity here we have to overwrite those default configuration and we will do that inside program.cs let me minimize this and open program.cs inside the Builder dot Services we have something called AS builder.services.configure application cookie and there on the option we have login path logout path access denied and other configuration right now I will only toggle these three configuration and with that let me restart the application with that change if I try to access admin product things will still not work it is still going to the old route what exactly is going on here well when you add configure application cookies that is one thing that you should remember you cannot add that before you add identity so we have to add that after line 16 and only then it will work with that saved let me restart the application this time if I try admin category it redirects to the correct path and if I log in as customer we will see access denied perfect with that we have implemented authorization successfully based on rule of the user that has logged in now one thing that I want to do is on register and login UI let me change the default UI a little bit you can see we have two partition here rather than that let me make register the full page I will move the section below register so let me switch back here we have the register page here where we have column md4 let me make it column md12 and the other one I will make it md12 as well that looks good then let me go back here and I will be adding a div with class of card and I will give it Shadow border 0 margin top of four within that div I will create three more div for card header inside there I have row and column 12. I will add the H1 there so remove it from here and rather than H1 let me make it H2 give it a class of padding Y2 and text White and we will display register we do not need this view data let me see how it is coming along this looks good for our header and then we have the card we have card header we will add another class card party and padding of four within that we will be pasting the complete row that we have here so let me cut and paste that and where we have the row let me add padding top of four let me go back and see how things are coming along looking much better here Now to create a new account let me bring that to center of the screen so where we have the H2 here let me make that H3 I will make this padding three and I will add some bootstrap classes here Potter border bottom some padding and text secondary with text Center perfect create a new account it looks good and I believe we have two HR let me remove one and great now email I wanted to take the full width but all the other fields I will make them column md6 that way they will take only six columns and the text here let me make that text muted so all the labels here let me add a class of margin S2 and text muted I will add that for all the labels that looks good let me save that and perfect I like that one now the email here I wanted column 12 but everything else I will make it column six I will add that for medium screen so let me fix that as well perfect if I save that and go back that looks good I need to put that in a row so where we have the form here I will add a class of row and it should add that perfect that looks much better the button here let me fix that I will also add that in a div give it a clause of column 12. and let's see great where we have the use another service I want to add a line here and type text of or so they can use this register or they can sign in using some other service which you can configure if you want like Facebook authentication Google authentication Twitter or any other third party service but right now I just want to add that line so if we go back here we will have to add some line in the CSS we have site.css let me paste what exactly I am doing I am adding a color here Flex 1 giving it a border bottom and a margin now this I am doing before and after using CSS so we will have to give this class divided text let me go to register here and where we have to use another service I will add a paragraph give that the class of divider text and D Flex inside there I will write or here and remove this HR save that and let's go back perfect I like the over here but let me add some padding top two and I think three will be better perfect that looks much better with that we have the register UI that looks good the selector role that we have here let me make that column md6 as well and let me save that perfect so our register UI is looking great let me add the same code inside the login as well so we will go to the login UI this time areas identity login where we have the column md4 this will be 12. scroll down this will be 12 as well and if I go to register I can copy the paragraph tag here paste it in the section here and remove HR let me see perfect looks good let me add the card here so we go to our register and I will copy everything till the card body paste that in the login here and let me add the closing div tags perfect in the card body here let me copy the row rather cut that and paste it right there we will display login here and we do not need this view data let me clean that great our UI is looking much better I will arrange these three links we have that in the main div here I can use the bootstrap deflects and justify content between that should bring them all in one line and perfect this looks much better than what I had and with that our register and login UI are looking much better I will align this to Center so let me fix that as well and register we have some classes copy and paste them where we have the H2 and make that H3 perfect we don't need the extra HR remove that great with our login and register UI updated let me continue in the next video final thing that I want to toggle is in the aspinet user we created many more properties I want to add all of those properties in the register page so we can go back here we will have to add them first to the register page model we scroll down we have the input model and there we have view properties we added the role drop down we want to add the other properties so you can copy them from asp.net users if you want but basically we want to add street address city state postal code and phone number Now phone number we did not add that in the application user because if we switch to our database and examine the asp.net users table phone number column is created by default that you can see right here so I am adding a property in the register so we can capture and save that as well once we add that here in the register we have to copy the email here paste that one more time before the role here make sure to change that to column md6 next what we have is street address copy and paste that we do not want autocomplete we can remove that one and perfect that looks good paste it four more times now rather than street address I will update that to City we have state postal code and phone number save that and let me see the UI perfect that looks good we need to update here as well so let me do that and perfect that looks good let me take a look at that we have a weird error here let me restart the application let me navigate to register and perfect the register looks good we have many more properties here and we have placeholder now you can obviously remove everything that is there in place holder but you can see because of placeholder we are getting the fancy design that when we click it slightly hovers on the top and I personally like that because of that I am going to leave the placeholder here but of course you can make the placeholder according to what the esp4 is I am not going to spend time editing that but you can obviously fix all of that with that we have added all the properties on the register UI now when we post we will receive all of them in the on post async where we have our model but when we are creating or passing the user here we are only populating email for that user we will also have to populate the other properties from the input model so let me do that now let me go back to the database here we also added name column there so let me create that property as well and name will be required save that here that's okay it should go away let me also modify here we need to add the UI there so let me copy the street address I should add that right after email but I want to keep password and confirm password together so let me do name here and I will cut name along with phone number and I will cut these two paste it right after email so email name and phone number goes together we have an error there let me see what it is well we have an issue with the required let me see why it says required is ambiguous reference between data annotation and some other required attribute we will modify that to be data annotation it is conflicting with something else there so let me add that and let me examine the change comment here I want to make sure I did not add something yes I did I added this line this using statement that was not needed so remove that and now required should work yep sometimes when you add some other using statement you can see how conflicts can happen but thankfully because of get changes I can easily make sure that I only have the changes that I intended to go in this comment with that configured let me run the application we still have an error here and what is in here and let me open application user I think accidentally something is integer which should not be whoops name cannot be integer it has to be a string if we modify something there we have to add a migration I will call that update name to be string application user I like to name migration as meaningful as possible and I forgot to change the default project perfect let me update the database and great that is all done let me run the application and make sure everything is working I will create a new user and this time all the details will be populated and we have multiples to read address that is not correct let me go to register this will be name so let me change that to be full name and perfect let me type that once again if I do not select a rule it will be customer role and that works for this user let me create that perfect that looks good let me switch back to the database here and if I examine asp.net users perfect now you can see all the columns are getting populated and that is working as expected now I want to show you one small bug if I log in with any user and if we click on managing their profile here previously there was a navigation here and now it is gone I want you guys to pause the video and try to find out on what exactly is wrong and why that is not working to give you one hint something is wrong in underscore layout and manage I hope you were able to figure that out now if I open the underscore layout here you can see the default layout is area's identity pages and underscore layout if you examine the pages here we do not have any underscore layout that is inside views shared underscore layout so we have to correct that path here to views shared underscore layout and with that if you refresh the application things will still not work let me show that we will go to login here and let me click on the profile you can see it is still not working the reason is simple again we have added or modified the underscore layout that is inside manage but how will all the pages inside manage know that it has to use this underscore layout we do not have a view start file inside the manage folder because of that the pages inside manage does not know that they have to use this underscore layout file so what we can do is I can copy any of the view start file copy that paste it in the manage folder and in there we just write underscore layout dot cshtml then all the pages in manage now knows that they have to use this underscore layout which has that manage nav bar so we restart the application and everything should work now let me login First and perfect you can see everything is working now similar to adding fields in the register you can add that in the profile but I am not going to do that you already know how to accomplish all of that I hope you have enjoyed the free video make sure to like the video and leave a comment if you have not done that already subscribe to the channel That way you did not miss any free content I have an advanced course on.net Mastery where we will enhance the application that we have built so far and Implement shopping cart and Implement shopping cart checkout functionality with payment integration and build order management you can find a link to that complete course in the description I hope to see you guys again in some other programming video till then Happy coding

Channel: DotNetMastery

Views: 280,590

Keywords:

Id: AopeJjkcRvU

Length: 566min 3sec (33963 seconds)

Published: Tue Apr 18 2023