Learn ASP.NET Core MVC (.NET 6)

[Music] hi guys and welcome to dot net mastery my name is broken and in this course we will walk through the basic foundations of dot net core application we will be using dot net 6 in this course along with visual studio 2022 dot net core has been a buzzword in the industry for a while and recently it has been gaining more and more attention because of the efficiency and the advantages that it brings so first let's take a look at what are all the exciting topics that we will cover in this course foundation is a basic element of any building and that will be the first thing that we will learn as we explore the fundamentals of net core and its evolution then it's critical to understand what is new in dot net 6 when it comes to an mvc application so i will highlight the new features in dot net 6 with respect to the mvc application we will be using entity framework core to set up database connection string and perform all the database related operation once we have entity framework code configured we will be performing crud operations on any model crud stands for create read update and delete so while we perform the grud operations we will also understand how client-side and server-side validations work with net core we will display nice alerts using temp data and toaster.js now while we learn all of this one critical piece is error solving when it comes to any programming i will display you some of the common errors and how will you approach those errors and resolve them lastly we will deploy our application to azure and we will see everything live including sql server which will be hosted on azure as well so you can see there is quite a few things that we will be learning in this course let's get started with all of that from the next video in this video let me show you the demo application that we will be building we will start with an empty project and then we will use boots watch theme to add a nice styling next we will be building a category grud project so when you click on category in the navigation bar it will open up the page and it will display all the categories first thing that you notice here is we have a create category button when we click there it takes us to category create and here without populating anything if you press the create button we have default client-side validation not just that we also have some server-side validation like if we enter both name and display order to be same and hit the create button we have a server-side validation that display order cannot exactly match the name then we have a back to list button here to go back to our index page with the category list we can edit any of the existing category and as soon as you edit or create something we have nice toaster alerts that you can see lastly we will implement the delete functionality and on that also we will have our alerts so we will see server side client-side validation we will implement toaster alerts and take a look at temp data not only that once we complete the application we will be deploying that to azure so that will give you a complete flow of the application as we deploy things to azure along with our database so with that let's start on this from the next video let's take a look at all the tools that we will use in this course we will be using.net 6 for our application so make sure to install the latest version of darknet6 for the ide we will be using visual studio the version that i will be using is visual studio 2022 there are lots of advanced features in 2022 as compared to 2019 so you can always install the free version of visual studio 2022 for our database we will be using sql server so first you will have to install sql server and then you should install ssms which is sql server management studio if you have older version of ssms that's completely okay as long as you're able to connect to sql server on your local machine we will be using that connection string and everything will work so once you install all three of these softwares let's continue from the next video in this video i want to walk you through the journey of net core dot net core is probably the biggest change that the dot net language has encountered in 2002 microsoft introduced web forms which was a revolution at that time webforms has its drawbacks and there was a need to overcome all of them because of that the.net team came up with a new architecture which was dotnet mvc now even though i love mvc and i have built many applications in mvc it had its flaws like it was created on top of the components for web forms because of that it was tied to iis and ultimately windows operating system but with the evolution of web development microsoft had to keep up with the changing technology finally in june of 2016 microsoft released asp.net core and it was the first version now.net core is built on top of the new.net core framework it is completely rewritten and it is a cross-platform version hence it is not tied with windows also.net core was built with cloud in mind so it is extremely robust with that then in august of 2018 microsoft released.net core 2 and the team has been active with releasing new versions there was a big change from net 2.1 to 2.2 because we had to update quite a few class libraries and there were few challenges but since then dot net core team has been releasing new versions with 3 3.1 and dot net 5 which was released in november of 2020 after that there is dotnet 6 which will be released in november of 2021 we will be using the preview version but whatever we learn will be the same once dot net 6 is released so this is a small overview of all the.net frameworks and their evolution that being said why should one use dotnet core as compared to the classic.net dot net core comes with many advantages first one is asp.net core is fast and open source if you compare that to the traditional.net applications that have been quite a few benchmarks and it is very fast when you compare that to webforms or even dotnet mvc net core is also cross-platform the classic.net was tied to iis and windows but since the.net core is rewritten it has removed that dependency with dotnet core we also have a built-in support for dependency injection which saves a lot of time and it is extremely helpful once you get used with using dependency injection you cannot imagine your application without that with any programming language it is critical that the new updates are the new version that are released they should be easily upgradable and that is one of the feature with net core when a new version is released updating to that new version does not have groundbreaking changes because of that you can always keep up with the new versions net code is also cloud friendly when the dot net core was being written cloud architecture was kept in mind and because of that it is completely compatible with all of the cloud components and lastly when it comes to performance dotnet code exceeds all of the previous versions and even the new versions in dotnet core that are being released they supersede the previous version the code actually gets more optimized that results into improved performance the asp.net core compiler will eventually optimize the entire code whenever the code is recomposed using the.net core framework dot net core's actual performance is multiple times than any of the frameworks previous implementation because of that it is clear that microsoft has a long-term plan with dot-net code technology so with that brief overview let's continue our learning in the next video in this video before we take a look at the other files i will introduce you to a new concept which is dependency injection asp.net core implements a simple built-in dependency injection container dependency injection is an integral part of the asp.net core architecture dot net core injects objects of dependency classes through constructor by using the built-in ioc container before i show you what advantages dependency injection brings let's see a scenario where there is no dependency injection in a typical application let's say we have three pages right now and we have some common functionality that we want to use across all the three pages like let's say we want to send emails and we want to access our database in all the three pages that we have now let's imagine that on these three pages we need to access the database first so what we will do is we will create the object for database classes on all the three pages we will have to open that connection we will have to do the database operation and then we will have to close the connection in all the places to do the same and create object for email implementation that we have in all the three pages so you can see this is lot of duplicate code on top of that what happens in future if you change the implementation of how you access the database or email based on the current configuration you might have to make that change in all of the three pages which is a big mess because right now it's three pages down the line it could be 30 or 300 pages another issue here is that on each page you will deal with creating the object managing them as well as disposing them and that will be a time consuming effort when we have to do that in all the pages so that being said what is a solution to avoid all of this and get an optimal architecture the answer to all of that is dependency injection first let me show how the scenario would look like again we will have the three pages and we will have email and database functionality these are the common things that we had before as well but now we will have something special which is dependency injection container so as you can see we have got our dependency injection container that will have an i email and an itp interface and its implementation so inside our container we have the implementation of the i email interface and the itb interface when any page will need access to these functionalities it will just ask the dependency injection container to create an object of this functionality and directly give page an object to use so inside the page we will actually be using an interface and then dependency injection does all its magic of passing the object when the website needs it that way we do not have to deal with creating the object disposing or managing that object inside our pages our pages will look very clean with just the interface all the instance and implementation will be done by dependency injection container now in future if you want to change or replace the email class you do not have to make any changes in the pages all you have to do is just change the implementation inside the email class and since we are registering that in the container next time when we build the project it will take the new implementation so you can see we only have to change in one place now that is one of the main advantage that comes with dependency injection now in order to use dependency injection you can use many third-party tools but with dot net core we have a built-in dependency injection container and that has its own advantages so i hope that that you have a short overview of how dependency injection is helpful first thing that we have to do is we need to create our project i will be using visual studio 2022 here we have the recent projects on the left and on the right hand side we will get started we want to start by creating a new project so we will click that and it will display all of the templates you can either navigate and try to find the template or you can just search here for model views and controller as soon as you type that you see there are two templates that are available right here we will be using the asp.net core with c sharp language we do not want the other language so select the c sharp language or asp.net code web app and we have model views and controller let's hit the next button and we have few more options that we have to configure before writing the project name we can give our solution a meaningful name so let's say we are making our project for bulky book and in there you can have multiple projects like there can be data access layer that can be business layer that can be web layer and so on so solution name we can keep that as bulky book and then the project name let's call this bulky book web that way you can keep the project name and the solution name separated let me change the location to where i want to save on my computer and we will hit next button final thing that we have to select here is the framework version we will be using dot net 6 so we will select that in the first option next we have authentication time when you click the authentication drop down there are individual users account microsoft identity platform and windows right now we want to keep things simple and understand the basic folder structures of when an empty.net core mvc project is created so we will select none inside the authentication we will keep the configure for http as selected we do not want to enable docker right now because we do not want to work with the containers then we have enabled razer runtime compilation what this flag will basically do is let's say if you make your change in some javascript file or css you don't have to rebuild your project you can keep your project running and you can go back and refresh you will see the changes in the project as long as this flag is enabled but as of now there is a tricky part with this flag it will work only on razer pages and not in the mvc by default so i will show you one line of code that you have to write to make sure that this actually works in an mvc application later on with this configuration let's create our project it will take a while but it will create the project and it will load all of the files and folders great so once the project is created it will load the complete view of visual studio on the left side here we have the main panel where we will be coding everything and on the right side we have solution explorer git changes if we want to commit and some properties now by mistake if you close the solution explorer here do not panic you can open it back up by going to views here and we have the first option which is solution explorer with that in place let's continue from the next video now that our project has been created let's take a look at the files and folders that we have by default the first thing that we should take a look at is the project file in order to access the project file you will right click on the project name not the solution we have our project with the website icon here if you right click there we have the edit project file when you open that up you will see view configuration right here the first section here defines what is the target framework that we are using we are using dotnet 6 so you can see that right here the next important thing inside this file is the item group item group will contain all the nuget packages that we are using in the project we selected the runtime compilation and that's why that package has been installed in future we will be installing more packages when we connect to database use entity framework code and so on so in that case when we add nuget packages to our project a new entry will be made inside the cs branch file or the project file now usually you do not work with the project file but it is always good to know that we have all the packages and the references listed in the project file if in case you need to access that so that covers our first file which is the cs proj or the project file now that we have seen the project file the next thing that i want to show you is we have dependencies here and we can see the packages that we saw previously inside the project file will be installed right here we will be adding more packages down the road but the next folder that we have is the properties folder and inside there we have launch settings.json in here we have the different profiles using which we can run our application like you can see inside the profiles we have a bulky book web profile and we have an iis express profile if we use the iis express profile we know the port number that will be used here is explicitly defined if we use the bulky book web in that case it will use 5000 and 5001 based on https or http the bulky book web is the default type what this will do is it will run a.net command line and that will trigger the application so if you try to run this directly with bulky book web you will first see a command prompt and then it will launch the website on port 5001 you can see inside the logs it is displaying all of that so that is one way or one profile to run our application if you hover on this down arrow you will see there is another profile which is iis express and that is the name that we have in launch settings if you run with iis express it will use the port number right here for the ssl so let me run that and show that as well great you can see it runs on the different port that is defined right here so the default behavior is using the bulky book web profile but we will be changing that and using iis later on so that was a brief overview on launchsettings.json after that the next folder that you see here is the www root folder if you expand that you will see all the static files of your project so any static files like css javascript images or any libraries everything will go inside the www root folder the www root folder will not have any c sharp files this folder is only meant to serve the static files of our application so we will be using the static folder extensively throughout the course when we are adding some js or some images or any other libraries the www root folder will be the root folder of your application so always remember if you ever have to add any static file it will always go inside the www root folder then we have the folders for controllers models and view i will get back to them in a couple of videos but the file after that is appsettings.json this is the file in which we will be adding all of the connection strings and secrets of our application like you might have some api keys you might have some send grid keys you have strike payment keys any of the static secret keys that you want to save we will be storing them inside app settings.json if you expand this app settings you will notice that we have appsettings.development.json so you can create new json files and it will automatically bundle them inside appsettings.json like if you create for another environment appsettings.staging.json then you can have appsettings.production.json all of them will be bundled in one umbrella and then based on the environment variable you can configure it to use the different app settings file because connection string for a database in development will be different if you compare that to staging preview or production so that way you can go into those configuration we will be using just appsettings.json right now because we will be working with the localhost also in production there are multiple ways of saving secrets like you can add them to azure storage world and much more but that is beyond the scope of this course to get started you need to remember all of your application secrets must be inside settings.json and not directly inside any of your cs or class files we will come back to this file in the later videos and we will add our connection string now the last file that we want to take a look at is program.cs let's do that in the next video next we have program.cs this is the file that will be responsible for running the application once we open program.cs you can see we have a variable builder where the webapplication.createbuilder is passed with the built-in arguments when you run with the dotnet command you can pass custom arguments here if you want with that it will configure the application and it will create the web application builder object now in the previous video we saw that we can use dependency injection with dotnet core when we want to register anything with our dependency injection container we will be doing that right here so let's say if we want to register our database or email or anything else we will have to do that between the builder and before we call build on that builder object so right here we are just adding one service to the container which is builder.services.ad controllers with views we are adding this service to the container because we are using mvc application for our project if you were using razer pages then the service will be different now in the future videos when we configure database in our project and we add that to dependency injection we will be adding a new service here in our container or db context if you are working with any version prior to dotnet 6 or even some of the initial preview versions of dotnet 6 then this file was divided into a separate startup.cs class file and the services that we add to container were inside a method configure services and everything from line 9 adwords was inside a configure method so what we have on the top is we will be adding services to our container then we need to configure request pipeline and that pipeline will be configured from the highlighted section now you might be wondering what is this pipeline the pipeline specifies how application should respond to a web request when your application receives a request from the browser the request goes back and forth through the pipeline let me switch to the presentation here we have different browsers here and then we have a pipeline the pipeline specifies how application should respond to a request that is received when your application receives a request from the browser the request goes through the pipeline in the pipeline you can add items that you want pipeline is made up of different middlewares and mvc is a type of middleware itself so if we want an application to be built using mvc we have to add that middleware other example could be authentication middleware authorization middleware and so on what exactly happens is when your request will go through each of the middleware it gets modified by them and eventually it is passed to the next middleware if that is the last middleware in the pipeline the response is returned back to the server let's take a look at the few middlewares that we have in our application let me switch back to the code here and you can see in the pipeline first we are checking if it is development or not in the environment if it is then we are adding the use developer exception page that will show you user friendly exceptions so that you can debug and solve them but if it is not development then we are just redirecting them to an error page the next middleware is https redirection and then we have a middleware to use our static files that are defined in www root folder we also have a routing middleware and we have authorization middleware when we add authentication to our project we will have to add a new middleware inside the program.cs as well then we are using a map controller route that will map the different pattern that we have for mvc based on this routing it will be able to redirect our request to the corresponding controllers and action then you should always keep in mind that order of pipeline is extremely important the way you write middlewares in the pipeline that is exactly how the request will be passed so first routing will be done then it checks for authorization and so on so in this scenario if you want to use authentication to your pipeline we have a middleware which is app.use authentication but if you do this then it won't work because authentication middleware should always come before you authorize a user because you only authorize a user that is authenticated that is the basic fundamentals of authentication and authorization so if you place the pipeline in some different order that will break things inside the endpoints here you can see we have a controller name an action name and some id this controller route will make more sense when we understand routing in the next video let me show you more details on how routing works i won't be running the application to show you that but i want to walk you through some theory you can see when it comes to routing in mvc application we have controllers and we have actions before we explore the routing let me walk you through the main components of an mvc application which is models views and controller let me switch back to the presentation and give you a brief overview now if you remember we had three folders for models views and controllers and that is what mbc stands for the first thing in mvc is model which represents shape of the data a class in c sharp is used to describe a model the model component corresponds to all the data related logic that user works with let's say inside your application you have a table that stores all the category or all the product details then that product will be a model itself model basically represents all the data in your application it can be a table that you are storing inside sql server or it can be a model which will be a combination of multiple tables and so on this model can either represent the data that is being transferred between views and controllers or any business related data model that will represent all the tables of the database so if you have 10 tables in your database we will have at least 10 models that corresponds to them there is also more complexity but we will go into those details later on right now you can think of all the tables in your database will be a class file which will be a model then all the properties of that clause file will be the columns of the table that is a simple relation that you can think of right now then we have view in an mvc which is the user interface view can be thought of html and css that you write to make things fancy and beautiful whatever you see on the website with your eyes is basically the view that is being displayed to you but now you need to think of what happens if in a website you have a button and you click that button what happens is that view will interact with your model to display some other data but view does not interact directly with the models for that we have something known as controller controller acts as an interface between model and view to process all the business logic and incoming request so controller acts as an interface between model and view to process all the business logic and it manipulates the data using model and interacts with the view to render the final output this is just a brief overview of how model views and controller works so let's say if a user clicks on a button controller is the first thing that will receive that request then controller will have lots of action methods based on those action methods controller will redirect this request to one of the action method and controller will use the model it will fetch all the data that it needs to display inside the view once the view is rendered it will pass all of that to the controller and controller will then pass a response which will be sent back and the user will finally be able to see the page so you can see controller can be treated as heart of your application that is where we will have all the logic of your application and it is the one which will be interacting with models and views so with that in place now you see that the request first comes to the controller and its action methods so with that general idea if we go back you can see inside the map controller route we have a pattern where we define a controller and an action method so here we are saying that the default if nothing is provided it should go to the home controller and it should call the index action method but that is a 10 000 feet overview let's take a look at routing little more with some theory before we see routing in action let's see routing with some examples you can see here we have a general pattern of routing the first thing highlighted in blue here is the domain of the url when we run on the local computer you will have a localhost and a port number whatever is after that port number will be the route that we want to use when we are calling a page to be loaded in the first example you see we have something called as category then we have an index and some number when we are working with mvc after our port number or domain whatever is the first thing that we have will be the name of the controller then the next forward slash after that will be the action of the controller and after that if you have something that will be the id this is the pattern of routing with mvc if we go back to the application you can see the same format right here first we have the controller name then forward slash we have an action name then forward slash we have the id that corresponds with the request that we have here keep in mind that id is an optional field controller and action are not optional but if they are not defined we have set a default route that if there is no controller and action you can use home controller and index action as the default route because of that we have our home controller and we also have the index action which i will show you before we dive into those details based on the understanding that we have here i have given some sample url i want you to try to find out what will be the controller action and id based on this url again remember if controller is not defined default one that we have in our application is let's go back the home controller and if the action is not defined that will be index action so based on that the first url that we have the controller name is category the action is index and we do not have any id for the next one we have controller name as category we do not have any action so index will be the default action and finally id is null next what we have for the third one we have controller as category action as added and id as three the last one we have controller product action details and we have id as three so with that if you get a url now you can identify what is the controller name what is the action name and if there is an id or not so with that brief understanding of routing let's actually run our application see routing in action in the next video now we want to understand routing in mvc this is one of the tricky topics that i had when i first started learning mvc so i want to make sure that you get familiar with the routing before we see the complete routing in action let me walk you through the three folders that we have we have a folder for controller we have a folder for models and we have a folder for views by default we have a home controller that has been created models will be all the data related models that we want in the project so let's say if you are dealing with products that you want to display on the page you will have a product model and we will be using that model in controller and views right now you can just think of models as tables that you want in your database if you want a product table you will have a product model that is not always the case but we will explore models later on the main thing that we want to work on is understanding controllers and views controller is the heart of the application at the same time views is what will be displayed on the screen when user is looking at the page now the way navigation works is when we have a home controller all of the views or ui pages that are displayed with the home controller will be placed inside the same folder name as the controller name so you can see they have also created a home folder by default there is also a convention with the naming of controllers it should always end with the keyword of controller that is how the application will know that this is a controller if we expand our home controller you will see some code right here we have a class with the name of homecontroller and it implements the default or the base class of controller then right here we are registering the logger using dependency injection do not go into that detail right now i will explain dependency injection in much detail but for now to understand routing you can see we have two action methods inside controllers you can have multiple action method if we go back to the url here you can notice that we have the controller name and action name if the url was forward slash home forward slash privacy then it will go to home controller look for a privacy action method and it will load the content that we have here the return type for an action method is i action result because i action result is an abstraction for multiple return type it can return a view it can redirect to some action method or it can redirect a page and much more then i said that if the url is home forward slash index it will return the view that we have defined here now you might be thinking that where is this view we are talking about that view will be inside the views folder the way it finds or maps the view for this index action method is inside the views folder it will look for the name of the controller which is home controller so we have that folder inside there we will have a view with the name of this action method and it is index action method so that will be mapped to this particular view if we open that view we have some html and bootstrap classes so here nothing fancy is going on we are just displaying some text so let's run our application and see routing in action right now it will run in the command prompt window and once that is done it will run the website on port 5001 in the url right now nothing is present what should happen if there are no controllers and actions in the url we defined that inside the program.cs we said if nothing is present default that to homecontroller and indexaction method so what we see on the screen is from the home controller index action method to confirm that if you go to the home controller you can add a debugging point by clicking anywhere on the window what that will do is when it hits this controller this will be yellow so if we go back and if we refresh the page you can see it hits our breakpoint here so that means if nothing is present in the url it is calling the home controller index action method let me also add a debugging point inside the privacy action method so we will hit continue here and the request goes back so we will hit continue and then here we have return view that will find out the view that is associated and it will display that on the page if you right click on the view here you have link to go to the view if you click that it will automatically redirect you to the index view because it knows it has to find the home folder inside there that will be an index view this is how controllers and views are associated so if we go back to the application while this is running we have the privacy tab here and you can see on the bottom right the url that it will go to is home forward slash privacy so what will be the controller name controller name will be home and action name will be privacy so it will go to the home controller it will go to the privacy action method and it will return the view the view is inside home we have privacy and it should display this particular paragraph let's go back and hit that it hits our debugging point that is great let's continue and it displays the privacy policy so that is perfect with this you can see how routing is working in action with mvc based on the url you have to define the controller name and action name it goes to the controller finds out that action method and it returns view based on the view that you have defined inside the views folder now if this is too much right now do not worry just understand the basics that i have taught you in this video but as we proceed with the course routing will make much more sense and if this is too much for you do not worry you are not alone when i was learning mvc about 10 years ago at that time i had a very hard time trying to understand this since i was coming from the web form world where we just have code behind files so as we program this more it will get much more familiar and you will love the way it works so let's continue from the next video now that we have seen the basic controllers and views and how the interaction works with routing i want to walk you through the basic views that are available with our project we saw the home folder inside views that corresponds to the views of the home controller but on top of that we have something called a shared shared folder is used for partial views and partial views are similar to user components if you are coming from classic c sharp so it's basically a view that you can call within a view in multiple places in your application along with that we have a special partial view which is underscored layout and this underscored layout is the default master page of your application so if you open that up you can see we have some styling on the top here we have a header right here and we have a div where we render the body since this is the master page so whatever we display inside the other views it will use this underscore layout as the default master page so inside index when we are displaying this content it was displaying that with the navigation on the top we also have a footer here and we have some common javascript that we want across the application we have the main html and body tag and we have head right here where we are adding the styling we will be updating this in future videos whenever we want to add some css and js globally this is the place where we will be adding that next we have a validation scripts partial and this is a partial view where we are just adding scripts for some validations wherever in some views let's say in index view we want to use validations then we will include this partial view on that page so that way we do not have to write those script tags we will just include this partial view and that will be included we also have an error partial view that will be used to display the errors if you encounter in the application we will be adding more partial views as we proceed with the course so do not worry but remember shared folder will contain all the partial views and underscore layout is the master page of your application while the application is running if i switch back quickly you can see on the privacy page we have the header here we have the footer here and we have the body so where we have this render body at that place whatever we had inside the privacy these two lines are being displayed so i hope that makes sense then we have something called as underscore view import and underscore view start let me open the view import first and we have the global namespace right here so inside your application let's say you want to access some namespace in all of the pages if you add that using statement here it will be accessible across all the pages controllers and classes in your project that way you do not have to type this namespace every time we will see that in action as we proceed with the course but one important thing that you see here is tag helpers calpers are bindings that are provided by the.net core team that looks like html tags but they are special tags that are adopted by the microsoft team from other languages after looking at the success like angular and react i will show you one example quickly here in the underscored layout if we go back to our application we click on privacy you see it builds the url home and privacy here we know that home is controller and action name is privacy so how do you think this link is provided on this navigation it is provided using a special tag helper let me expand the header here and you can see we have an anchor tag and then we have tag helpers for asp controller and asp action tag helpers will start with the prefix of asp hyphen and then the name so here we have a tag helper which says asp controller and then we define the controller name for routing and in that controller what action name should be called so that is asp action do not worry about the asp areas for now we will be using lots of tag helpers that are provided by the.net team in future but tag helpers have been included in the project and we defined them globally inside the view imports file the last file inside the views folder is the view start this file will define what is the default master page for your application inside privacy you see we have not defined what will be the master page but it is by default using underscore layout because that is what has been defined inside the view start file if you want to explicitly define a master page for privacy which is different you can do that directly by defining that on the top and that will take preference over what is defined in view start but view start will have the default master page for the application now i know this section was a little bit lengthy but this overview was critical when it comes to understanding the default views that have been provided in this video let's take a look at tag helpers tag helpers are brand new to asp.net core microsoft looked at the success around libraries like angular react and decided that implementing an angular directive like experience in the new asp.net was so important to the adoption of dot net core that they decided to create tag helpers from grounds up even though there are similarities between angular directives and tag helpers there is a major difference tag helpers are for server-side rendering while the angularjs directives are all about client-side rendering if you have worked with older versions of net core we had something called as html helpers they are still around but tag helpers are being modern with the tag like approach so it's much user friendly tag helpers are very focused around the html element and are much more natural to use as compared to html helpers we will be working with tag helpers many time in the application but to just give you a brief overview you can see in the first tab here we have html helpers and tag helpers simplifies all of them because we can use the existing label tag and we will just add a tag helper asp4 and we will find that to a model we have same tag helper right here as well then in the last example here i am displaying tag helpers where previously we were using html.beginform and now within the same form tag we have the tag helpers of where it should be posted so you can see things are getting much more simpler when we are using tag helpers that being said if you are coming to dotnet brand new and you have never worked with html helpers this is even better you do not have to worry about the old syntax and what is different we will be working with tag helpers in the upcoming videos but i just wanted to give you a brief snippet of what tag helpers are and how they look like when we are using the same tags we just use the asp hyphen and then the tag helper name that being said we will explore all of this in much more details in the upcoming videos when you will be working with the dotnet core application you will see the return type of action result and it does not matter if you are using an mvc application or a razer page application in both the cases you can see we have i action result in mvc we are returning back view in this example and in razer page page handler we are returning back to the page but the return type is i action result i action result is a generic type that implements all of the other return types now if you want to be explicit about the return type in both of these cases then that would look something like this if the return type is view you can write view result but in razer pages when we return back to page you can write page result so now what is the advantage of i action result so first let's understand some theory so action result is a pattern class for many of the derived classes that have associated helpers the i action result return type is appropriate when multiple action results written type are possible in an action let's take a look at some of the helpers and action result so first let's take a look at what is there in razer pages a racer page can return content file not found page a partial result and redirect to different pages for all of them we have returned types like content result file content result not found result page result partial result and so on if we are working with an mvc application we can return back views partial views we can redirect to action return json and so on so if you are returning any one of these then you can use the individual return types for result based on the helper method but what if you are returning something like this right here in mvc you can see we are returning if true let's imagine there was some condition here based on that if that condition is true you want to redirect to action else you want to return to view this time you cannot have two different return types if you use view result here return view is working but redirect to action will throw error similarly if you use redirect to action result then redirect to action works but return view will give you error if you are working on razer pages and you have the same situation if you use page wizard then return page will work but redirect to page will fail and if you use redirect to page result then return page will fail so what is the solution to all of this the solution is to use i action result in both the places because this is a parent class so it does not care which of its implementation is being returned it will be able to handle all of them so that is a brief overview on how action result will help us with the return type from action method in mvc application or page handlers in a razor page application when we work with any web project the main piece or the heart of the application is the data and we need database to store our data so we will be using sql server to create a database and store all the data for our website with dotnet code you might have heard about term called as entity framework core as well if not do not worry but entity framework core is what we'll be using to create database and we will be using the same to perform all the data operations so with dot net core you do not need stored procedures or writing sql statements in the code entity framework is a smart editor that will help us with all the data related operations that being said it does not mean that you cannot use stored procedures you can still use stored procedures if you want but typically with mvc application entity framework core is used to manipulate the data layer we will go into those details in the upcoming videos but right now we first need to create our model model will basically resemble a table in database it is not always the case but whatever tables you have in your database you will need a corresponding model for the code first migration so inside the models folder we only have error view model let me create one more model here we will right click there and we will add a class file we want to create a table for category so we will call our model as category and let's add that it creates a public class file and it places it inside the namespace of bulkybookweb.models that is just the location so it knows that it is inside bulkybookweb models folder that is the category class right here now inside this category class we need to create all the properties that we want for our table we want to create id name and a display order so to start we can write prop and it is a code snippet so once you type flop and hit tab two times it will automatically create a property the id column we will keep that as integer and i will call that as id next property that we want to create will be the name of the category that will be a string so we will create that we press prop again we want the display order now display order will be an integer so let me add that on top of that let's say for logging purpose we want to create a datetime property which will have the date on when this category was created so we will call this createdtime now the created time let's say we want to set a default value to that so in order to do that we can use equal to sign and we can just assign the datetime.now like this that way the default value will automatically be assigned to the created time when we create an object of this class so perfect we have created our model and then we want to push this model to our database to create a table with these four columns but when we create a database table we might want to add some more configuration like we might want to say that id is a primary key and since it's an integer we want to make that an identity column so we do not have to populate that when we create a row inside the new table that we will create we could also add a validation that name is a required property and it should not be now if we had to write a sql statement we could have done all of that by using not null and identity in our sql script but how will we do that using entity framework for that dotnet team has come up with alternatives called as data annotation so on the property where you want to configure some more details we have special attributes that you can use let me walk you through them in the next video now we want to configure some of the requirements that we have in a sql script like we want to make this id column an identity column which will be the primary key of this table in order to do that we have a data annotation or an attribute known as key if you enter that you notice the red squiggly lines if you hover on that it will display an error that key attribute could not be found that is because we have to add a using statement so you need to make sure your keyboard is on the key and then if you press ctrl dot it will display that you can add using statement to resolve this so we will press enter that will add the using statement which has the data annotation that we want once this key annotation has been applied it will tell entity framework core that hey when you create a script to create this table you need to make sure that id is a primary key and it should also be an identity column it does all the configuration and talking by itself we just need to write one attribute and everything will be done for us pretty simple right the next thing that we wanted to do is we want to make sure that name is a required property so here we have another attribute which is required once you assign that when it creates the script it will make sure that name is not available property now we have talked about these two but there are more annotations that you can do for validation with this in place the initial iteration of our model looks good how do we create that in our database now let's take a look at that in the next video i've added the data annotations and we have created our model we need to create a table and a database inside sql server so let me open up sql server management studio make sure you have that installed on your machine because that is what we will be using to play with the database once the sql server management studio opens up we will be using our local database now for some of the users it could be localdb backward slash ms sql localdb for others it could be just a dot i have both of the server name configured so i will use any one of them and i will hit the connect button as long as it is able to connect that server name is what you will be using inside your connection string if you use something else then it won't work so i will be using dot but on your end you need to check if dot works you can use that or the local db ms sql local db should also work let's hit cancel here and if we expand the databases you can see we have few database here but i want to create a new database for our project so for that we have to create a connection string inside our project in order to store all of the secrets of your application you will be doing that inside the appsettings.json file you can hard code the connection string inside the class file but that is a bad approach app settings.json file is the file where you should have all the secrets that way if you have to update anything in the future you know it will be available inside the appsettings.json file and then you can create different app settings for different environment like if you have development staging preview production you can create all of those app settings and you can configure to use that app settings when you deploy the application that way based on your environment name you can use different app settings or different database and so on we will be working directly in appsettings.json and that should work with the local development so this is a simple json file now how will we add a new connection string in here as you can see it is just a dictionary with string key and value pairs what you have inside logging is known as a block where inside the logging block we have another block of log level and that has three key value pairs so we can either create a block or we can directly configure the connection string now the dotnet team thought that connection string is very common and almost all of the projects will have a connection string that is why they have created a default block for connection string that we can use if we want you can use something else but you can also use the default block name that they have given if you see it is automatically suggesting me that block name which is connection strings we can use something else but i want you guys to use the exact same name for now and i will also tell you the reason behind that in the upcoming videos so inside this block we will have a key value name so that key name you can use whatever you want i will just use default connection you can use any name that you want for the key right here and we need to paste or enter our connection string within the double quotes on the right side so the first parameter here will be the server name i am using dot so that is what i will write if you are using a different server name like if we go back to sql server and if you were using the ms sql local db to connect i want you guys to copy this go back to the application and paste that here i am using the local server with the dot so that is what i will use and then we need the next parameter if you have to separate anything in a connection string we will use a semicolon the next property that we have is the database name let's call this bulky then after that we want to set the trusted connection flag to be true make sure there is no spelling mistake here and that is all that we want to configure in the connection string you can make it more complicated but we will keep things pretty simple we have a database name that we want to create inside this particular server that we are able to connect in sql server and the trusted connection is true that way when we connect here we can just use windows authentication if you have a user id and password then you can use the different settings in connection string i will be using the default trusted connection so with this we are using a special block that is available with the name of connection string in there we have a key of default connection and value has the connection string now how can we use this connection string to actually create the database and create our category table inside the database let's do that in the next video we need to tell our application that we will be using sql server and you have to use this connection string to establish the connection with sql server for that we will be using entity framework core and we will have to create an object of the db context using that db context we will be able to make connection to the database so how do we do that it is best to create a new folder for all the data related changes so here let me create a new folder with the name of data inside there we will create our db context we will create a class here and i will call that application db context you can use any name that you want here but i'm using db context so that it's easy to identify let's add that class file now we need to inherit this class file from the db context that is inside entity framework core in our project we have not added entity framework code right now so there are two ways to add that we know that this will inherit from the db context so we can type that and you will see the red squiggly lines on there if you press ctrl dot inside the suggestions it will display that you can install a package microsoft dot entity framework core that will automatically find and install the latest version if you want to do that yourself you can right click on the project and you can select manage nuget packages or you can go to tools we have no get package manager and we can open up manage nuket packages for solution here you will have to go to the browse tab to see all the new get packages that are available now right now i'm using dotnet 6 with the preview version so i have checked the include pre-release right here the package that we are looking for is entity framework core let's press enter and the first package is microsoft dot entity framework or we are using the preview 7 so let me select that and we will install that once that is installed if we go back to our application db context and now if we press ctrl dot here it will tell us that we just have to add the using statement since we have already installed the package so we will add the using statement for our db context once we do that then there is one line of configuration that we have to do inside the constructor of this class file you can think of that as the general syntax that is needed to establish the connection with entity framework so first we need to create a constructor you can type ctor and press tab twice you can see it is a code snippet for constructor so once you press tab twice it should automatically create the constructor we just have to write some parameters here because when we get the db context we need to pass that on to the base class which is tb context so here we will have to configure the db context options on the class that we are on right now which is application db context we can paste that here and i will call this options so here we are saying that in the constructor here we will receive some options and those options we just have to pass to the base class which is db context this is a general setup that you have to do that will configure rdb context now once you configure rdb context we still have one main feature we still have to create our category table inside the database so whatever models that you have to create inside the database you will have to create a db set inside the application db context the file that we are currently working on now how do you create a db set that is pretty simple we will say public db set here and we need to write the model name that model name is category and once you write that you again see the red squiggly lines that is because it cannot find anything with the name of category in the same file we need to add the using statement to tell it that category is inside the models folder so if you press ctrl dot we have that using statement let's add that and the next parameter here is the table name so if you call this categories then inside database the table that will be created will be called as categories and not category so that looks good and we will add the getter and setter that's all that we had to do to create the category table what this will do is it will create a category table with the name of categories and it will have four columns that we have wrote inside the category model when it creates that table it will make sure that id is an identity column and name is a required field as well so you can see it is doing all the configuration by writing just few lines of code now when you are working with entity framework core there are two models one is code first and one is database first what we are doing is code first because here we are writing the code of our model and based on that model we will be creating the database so that is the code first approach database first approach will be something where database is already created and based off that database you will be scaffolding models i personally am a big fan of code first and that is what i have been using in all of my production application because i do not come from a dba management point of view i am more of a full stack developer who works with the code so if entity framework code will manage database for us i will be very happy with that approach so with that we have added our db seg for the category table but we are missing one small configuration our application still does not know that it has to use the connection string that we wrote in app settings and it still does not know that it has to use application db context to create a db context and that it has to work with sql server so let's see how we can pull everything together in the next video we just need to tell our application that it has to use the db context which is inside application db context and then it has to use a sql server using the connection string that we defined inside the appsettings.json we will tell our application to do that inside program.cs where we configure the services that our application will use so here we have the comments to add the services to the container make sure you always do that before you build the builder so right here we want to add a new service so on builder dot services the service that we want to add is db context so you can see we have dot add db context and that expects a class file the class file that we are using for db context is the application db context if you press ctrl dot we will just have to add the using statement to the data folder now when we configure this db context if we go back to the application db context right here we are passing the options and we are sending those options to the base class so inside options we have to configure use of sql server and connection string so here we will say options goes to this is just the syntax we will say options dot that is a method with the name of use sql server but it will not be available like that even if you press ctrl dot it will not give you the package name that you have to add so for that we will have to go back to the manage nuget packages and we will have to install a package which is sql server with entity framework core which is microsoft dot entity framework core dot sql server make sure you are using the consistent version if one version of the package you are using is preview 7 and other one is preview 5 or even.net 5 then things won't work and you will run into error message so always make sure that you are using the same version let me install the sql server and we will close the new packages now if you press control dot you will see the using statement using microsoft dot entity framework core we will add that and on this sql server we have to write the connection string so where exactly is our connection string that is inside app settings we used a special block with the name of connection strings since we wrote our connection string inside the special block theme that i was talking about we can directly use the key value here to extract the connection string let me copy this name we will go back to our program.cs and right here on builder.configuration we have an existing method that is provided which is get connection string inside this method we have to pass the string name which is default connection once you use that it will automatically find the connection string and configure our sql server now this cat connection string is a special method and this method will only look for this default connection inside a block with the name of connection strings if you named this connection strings 1 then it will not be able to find this connection string because this method will only look inside the block which is connection strings so that is why i said to name it exactly the same if you wanted to name it something else we have different ways of getting that but i do not want to go into those details right now so with this rtb context will be configured with the connection string so all the configuration is done that was needed for the db context now we are on the final step where we have to create database and then the table inside sql server let's take a look at that in the next video now that the program.cs has been configured the next step that we have is to actually create the database and the table when you are using entity framework code first there are migrations that you have to run using entity framework to push the changes to database it is not as complex as it sounds we have done all the setup that is needed in order to run the migration you will go to tools nuget package manager and this time you will select the package manager console the first thing that you have to do is you have to add a migration migration is basically keeping a track of all the db changes that are needed and once that migration is created you push that migration to the database to actually create the database or make changes to your table let's see what that is the command to add a migration is add hyphen migration and then we have to give our migration a meaningful name do not use any spaces when you are writing the name the name that i want to give to our migration is add category to database let's hit the add button and we see an error message the error is because when you run add migration you have to add a new get package you see the term add migration is not recognized i want you guys to copy this error and try to find out what is the package that is missing from google i can give you the answer directly but i want you guys to google what package is required based on this error message if you just copy that error and paste it here you will see the query first and if you scroll down you will see the package name it is so simple just install microsoft dot entity framework core dot tools that is the package that is required to enable migrations in your project whenever you face any error it is best to just google that error that way you can find the solution much easily and much quicker so let's go to our project manage new get packages we will paste the package name and we will install the same version that we have in our project perfect that is done we can close this i can open up the package manager console again and i will run the same command one more time this time it should complete successfully and if you notice on the right hand side here a new folder with the name of migrations is created and there are two files that got added our migration file is the first one and that is opened up on the screen as well inside migrations we have two methods one is up and one is down the up method is what needs to happen inside the migration and down is if something goes down we need to roll back the changes so do not worry about the down right now let's see what's happening inside the up method on the migration builder we have a method with the name of create table and it is creating the table with the name of categories that is the exact name that we defined right here so it will create a table with the name of category and then that will have columns the first column will be the id column which will be of the type integer and nullable is false since we said it is a key column it is automatically making that an identity column and incrementing that by one every time pretty smart right the next thing is the name column and you can see the nullable is falsier if you did not add the required property the nullable would be true you will see that display order is also nullable false but we did not add that inside category and the reason behind that is it is an integer property and not a string that is why nullable is false because it's an integer last we have the created datetime of the type datetime2 and that looks good if you see on the constraints it is also adding a primary key on the id column with a name so migrations is exactly what we wanted but can we take a look at the sql that gets executed no what entity framework code does is based on this migrations it will create an optimized version of the sql query and it will automatically run that on the database you do not have to do anything with that what you work with is just the models you create a migration and you push that to the database so once you verify that migration is looking good you can just run the command update database and that will push the migrations to database we have an error here let me go to app settings and of course we do this will not be colon this will be equal to right here and they are separated by a semicolon that was my bad we will go back to the package manager and you can also see the error said server and colon was not supported because it should be equal to let's update the database one more time perfect the migrations were completed but what actually happened is first it will connect to the server it will check is there a database with the name of monkey there won't be anything right now so it will create that database first and then the migrations here it will convert them to sql and execute them on our database so if we go back now if we refresh the database you will see the new database with the name of bulky and if you open the tables there will be two tables let's examine the columns inside the categories table it should have four columns and that looks great now what is inside the ef migrations if you do the select top thousand entity framework code keeps a track of which migrations have been applied so next time when you run the update database it will not apply the same migration it will only apply the migrations that have not been applied on this database entity framework code is pretty smart with all the configuration and tracking that it needs to do so with that using entity framework core we have created our database and we have added our table based on the model inside our main project so with that let me continue in the next video now before we work on anything else let me run the project right now it is running on port 5001 let me change that so that the command prompt is not opened every time we can just run that using iis profile by clicking here that way it won't run on the port 5001 it will get the new port that is defined in the project config i'm getting an error that i'll have to open visual studio under an admin account so let me do that real quick we will open the project again we have the iis express here let's try to run it this time and perfect so we have home and privacy but both of these pages are inside the home controller now in category we will be creating editing and deleting category so for that rather than working on the home controller let's create a new controller for our category so inside the controllers folder we will right click add a controller and we have few options here we will go with the empty controller to keep things very simple and start from scratch i will call that as category controller now when you name a controller make sure that you append controller at the end that is a required field whatever name you want must come before the controller so once you have that name we will click the add button perfect we get an empty controller with index action method our home controller also had the index action method and our category controller also has the index action method but the index action method in home controller has a view that is inside the home folder our category action method does not have a view right now you can add the view in two ways first you can create a folder with the name of controller which is category inside the views and then you can add index view inside there or if you want to do that directly from the controller you can just right click on the action and you have add view we will be selecting the razer view here let's hit the add button now when you add a razor view there are a few configuration that you have to do first what will be the name of the view we will give that the same name as the action method which is index then do you want to use any templates when you create this view if you hover here you can create a view for create delete details edit and list i do not want to go into those details right now but we will come back to that later on if you change that then model and data context class will be enabled but we don't want to focus on that right now we want to start scratch with an empty template next is a partial view partial view is basically like user controls in the web form so it will be rendered inside some other view so if you select a partial view the layout page will not be used because you do not need any master page if you create a user component because you will be calling that inside some other view we don't want to take a look at that right now let's keep it simple next we will use the layout page we want our view to use the default master page so if you keep it blank it will by default use the layout that we have set inside the view start which is underscored layout we want it to be consistent so that is what we will be using and we will hit the add button it will scaffold few dependencies and then it will create the view if you had any errors while building the project and if you try to scaffold that will fail it will ask you to resolve the errors and only once your project is building successfully you will be able to scaffold the views so perfect our view has been created and let me call this index category with that let's continue in the next video we want to display all the categories if there are any in the table format inside the index view for that we will have to actually retrieve all the category list from our database inside the index action method so let me open up the layout page right here where we have two options of index and the privacy page rather than privacy let me display the category right here and in order to go to the index page how can we navigate to this particular view that was created it is inside category controller and we have index action method so here to navigate we can define the controller name is category and the action method is index we are not using areas here so you can keep that blank or you can also remove them if you want if you save this let's run the project one more time and make sure we are able to navigate to our action method so we have category when we click there perfect we see the index categories that is what we have inside the view so we are able to navigate there successfully now we need to retrieve all of the categories from our database so let me switch back to database and just for dummy purpose let me edit the top 200 and let me add something here so i have just created one dummy record inside the table right now i have created one dummy record inside the table let's go back and we want to retrieve that inside the category controller now i have said before that we will be using entity framework or and the main file that we have is the application db context using that we can access our database object because inside that file we have the categories table so how can we create an object of this application db context and use that to call our database and table that is the beauty of dependency injection we do not have to create an object of this class everything will be done for us because we have configured that inside our container we want to use this service so because of dependency injection we will not have to create its object we can think that the object is already there we just have to tell application that please send me the object of application db context how do you request that inside the controller you want the application db context to work with database so i will first create a private read-only field which will be application db context and i will call that underscore tb we will add the using statement there and great now we need to tell our application that we need an implementation of this application db context where the connection to database is already made and i can retrieve some records right away so for that you will have to use constructor ctor tab tab and here whatever is registered inside the container you can access that inside our container we have registered application db context so inside the constructor we can get an implementation of that just like this so this db will have all the implementation of connection strings and tables that are needed to retrieve the data so we will populate our local db object with this implementation so we'll say underscore tb is equal to db and then we can use this underscore tb to retrieve our categories the syntax of that is very simple we will create a var let me call this obj category list we will first access the underscore tb and on that we will have all the db set the db set that we want to work on right now is categories and we want to convert it to a list and retrieve that so it will go to database it will retrieve all of the categories it will convert that to a list and it will assign that inside the category list you can see how beautiful this is you do not have to write a select statement to retrieve all the categories from the table there is no sql coding required you just have to write underscore db dot the db set name and that will retrieve all the records you convert that to a list and you assign that to a variable now how do we test that this is working we will add a debugging point by going to this pan you see the red dots if you click here we are setting a debugging point then if you run iis express here your application will hit the debugging point when we load that page so if we click on category it will hit a debugging point you can see that is yellow now and if you hover on the category list you can see there is one count if you expand it more you can see it is the same record that we created inside the database so it goes to the database it fetches the categories and it does that automatically we have a list that is already populated here we just need to pass this list to our view and we can run for each loop on that list and we can display all the categories let's do that in the next video let me remove the breakpoint and let's do that in the next video now that we have all the categories inside this particular object we can copy that and we will pass that to our view and i do not like using variables here i am a fan of using the strongly type so this will be i innumerable of category we will have to press ctrl dot to add the using statement now since we have an i enumerable here and not a list if you want you can also remove the dot to list that is not a required thing but if this was a list then you would have used the dot to list so we are passing that to our view now that we are passing an i innumerable of category to our view we need to capture that inside our view as well so let me open up that view i have right here but if you do not have that open you can go to category and index view so right here we first need to capture the model that we are passing from the controller for that you will be using at the red sign and you will write model in all lower case if you make this a capital model that won't work in order to fetch what is being passed from the view you have to use a lower case at the rate model sign so what exactly is being passed from the controller action method it is an i enumerable of category we can copy this and we can paste that right here that way our view knows that whatever we receive here will be an idenum variable of category since it is i innumerable we can iterate through that now if you have never worked with razer pages you can use both html as well as some c sharp code directly inside the view so first let's use the table attribute gives that some classes of table table bordered to give it a border and we'll set table striped we can also give it a style of width 100 percent inside the table we have t head and t body let me add both of them so t head will be for headers so we will have a tr tag in there and a t h tag what will be all the columns that we have to display the first one will be category name and the next one will be display order you can also display the date time and id if you want but we just want to display two columns that is the header now inside the body we will need a for each loop to iterate through the i innumerable and display the actual values as i said before we can use c sharp code directly inside the views using the at the rate directive so if you press at the rate you will see we have a for each right here syntax is pretty simple we will create a wire here we can call that obj and that is inside our model of the page so on top we use the lower case model but here model will have the first letter as capital so you can see how it is different that way it will iterate through all of the properties inside this model in a for each loop now for each of the property we want to display a table row so we will add dr here in that we want the td tag first we want to display the name so again that name is inside the c sharp variable object so we will use the add the red sign and we will say obj dot name i can give it a width of 50 percent here and we can copy this and paste it one more time then we have display order so we will say obj dot display order let's give it a width of 30 percent this looks great let me save this and run the application if we go on category now you will see our one category that we have inside the database this is looking perfect to display all of the categories next what i want is edit and delete buttons here and i want to make this a little bit more pretty for that i will be using boots watch themes and let me show you that in the next video who loves a pretty application because of that i want to use bootswatch.com which has free themes for bootstrap if we scroll down i want to use the solar theme for our project we can hit the download button and let's download the bootstrap.css let's open that file and it is using bootstrap 5. that's perfect let's copy this complete bootstrap and let me stop the application select ww root where we have css our bootstrap is inside the lib folder but here let me just create a new item style sheet we'll call that bootswatch theme and let me add that i will paste the theme that we copied and we will be using this in our project looks good let me save this another change i would do is insidesite.css they have added a btn primary so let me remove that and the anchor tag we will be using what is there inside our bootswatch theme in order to add this to our project we will have to go to underscore layout and we should have our css at the very top this time we do not want the default bootstrap theme we want to use our bootswatchtheme.c now since we are using bootstrap 5 with bootspot if we go to bootstrap.com let's click on getting started in production we are in bootstrap 5. let me copy the js bundle that we have here we will copy that and we will go back to our project inside the underscore layout let me replace the js bundle that we have with the one that we copied as of this recording the default version of bootstrap is not five in dot net six this might change in future but that is the reason i'm switching to the latest version of bootstrap with that change let's run the application and see if something is different great you can see a dark theme has been applied so things are getting different let me switch back to the boots watch and let me go back to the theme that we have let's click on preview here we have a navbar let's use that i will copy everything that we have here let's go back to our application and i will paste that right here before the nav bar that we have now since we are making changes inside the view if you remember when we created the project i enabled the razer runtime compilation so what that should do is when we save here and if we go back to our application and refresh it should load the changes because we are making changes directly inside the view but that does not seem to work as you can see the reason behind that is we added the package of razer runtime compilation even though these are razer pages if you examine the program class file we are only adding controllers with views we will have to make one small change here on builder.services we will have to add razer pages and on that we have add razer runtime compilation i don't know why it is like that i believe in future they will also add this with the views but right now this is only available with razer pages so this is one extra line that we have to add in an mvc project to get that runtime compilation with that change let's run the project one more time and great we see the new navigation menu right here we don't want everything else here let me comment that we will just add the home and category let me go back here to underscore layout and i can just copy the home let me cut this i can paste that right here let me scroll down but we have the other category controller cut that and we will paste that instead of features perfect i will remove these two the one in drop down i can just leave that in comments so that in future if we want to drop down we can use that and i can remove the nav bar all together let's go back and refresh and great this time we did not have to rebuild the application the text here is not visible so let me go back and we don't want the text dark anymore we can remove that and perfect looks much better if you click on home page it loads the home page and category should display all the categories great i also want to hide this border so that should be inside footer we have border top we can remove that and we can give it a background of bg dark let's go back and refresh and this looks much better so with this now we are using bootstrap 5 in our project and we are using the bootswatch theme let's continue in the next video inside our index view what we can do is we can add a button here to create a category so if we go back to our index let me add a little bit of more designing with bootstrap we will add a div give it a class of container and padding of three these are just the bootstrap classes in that we will add a div give it a class of row and padding top of 4. let me add test here save that and go back that will create a new row right here i want to divide this row into two parts by default bootstrap divides each row into 12 parts if we want but if we just want to divide it in two parts then we will have six in one and six in the other so here we will add a div give it a class of column six that will combine the first six in one div and we will add another div give it a class of column six so that will divide the screen in two parts the first one we want to display and heading so h2 give it a class of text primary and we want to display category list here let me save this go back and refresh and looks good let me close this container at the very end so we'll close that div at the end and right here we want to add a button right here we want to add a link inside there we want to go to a new action method that we will create inside the category controller that will be for creating a new category so right here we will say that should go to the same controller which is the category controller and it should go to an action method which will be create we do not have that yet but we will create that in the next video we can also add couple of bootstrap classes btn btn primary and here we can say create new category let me save this go back and refresh and we have our button let's align this button on the right hand side in bootstrap 5 we have text end we will save that and that will bring it to the right side then let me just leave couple of lines here i can just add few br tags and this looks much better now i also want to use some icons here like font awesome but with bootstrap 5 they have given their own sets of icons so why don't we use that if you go to getbootslab.com we have the icons tab getting started with all of these icons is super simple i used to like font awesome but you had to register and do lots of thing this is available quickly you just click the install button and you have the cdn you copy that go to the underscore layout styles we will paste the cdn with that the icons are readily available to use let's go back to the bootstrap and right here let me search for plus if you scroll down we have this plus circle if you click there we have the link here we will copy and we just paste it before create category let me add a space let's save that and you will see the icons are working perfectly super easy to get started with that we have added icons but if you click the create new category you will see page not found that is because it is going inside category controller create action method but inside category there is no action method with the name of create so let's add that in the next video let me copy the index action method and we can paste that one more time we will have to change the name here to create and this will be a get action method now when someone hits the create button we will give them the option to enter their name and display order and create a category so when the view is being loaded you do not have to pass any model you can keep that blank and then you can create a model directly inside the view what do i mean by that let me create a view here we will right click add view razer view we will keep that empty and looks good let me add that now previously when we were working with index i said that this is the model that will be passed from the controller that is true but it is not always the case like in our create we are not passing anything from our controller but we still want to work on the category model and we want to fetch its properties when we submit the form so for that also you will have a model for this view that model will be the category model so the model that you write inside view is not always the model that is passed from the controller but if you are passing a model from the controller it must match what you have inside the model in the view but if you are not passing anything inside the controller like in create then you can find your view with a model based on the data that you are collecting on the page here we are collecting the name and display order we will use category so that we can use tag helpers to find everything for us now you might be thinking what is this new term tag helpers i will walk you through that but before that let me create a form here give it a method of post because we will be posting our data because we want to create our category in there i will create a div give it a class of order padding of three and margin top of four in there i will add a div give it a class of row and padding bottom of two and we will add a heading here which will have a class of text primary for the yellow color and we will display the heading which is create category let me add a hr here save this and run the project i want to see the view while we are building that so if we go to our category now and if we hit the create category button it will take us to the create category view that we created here i want to display a label and a text box so outside of this div i will add another div give it a class of margin bottom three in there we want to display a label you can just do label and give it a name like this that will work but what we want to do is we want to bind everything on this page with our category model because of that the dot net core team has provided tag helpers which starts with asp so here we have asp hyphen 4 when we add that in a label we can use any of the properties from our model so you can see it is already displaying created date time display order name and id we will select name here and we do not have to populate anything else if we go back and if we refresh the output will be same because what it does here is it displays the name of the property inside our category model so we have it as name so that is what it will display in the ui as well let's go back to the create view and now we want an input field so we will say input and we will just say asp4 tag helper this input is for name that way it will do all the binding and when this form is posted it will post an object of this category class with the name populated we can give it a bootstrap class of form control let me save that and refresh oops i close that let me run it again and great you can see a text box right here this looks good let me also add a text box for the other field which is display order so i will just copy this paste it here the asp4 will be display order this time let me save that go back and refresh and great this looks good you can notice the name of the label is display order without a space and that is because inside category that is the property name itself we will fix that in just a second but i wanted to show that now let me add a button here to actually submit the form and i will add a link to go back to the index page of the category controller so we'll go to create here and we will add a button give it a type of submit we will also give it some bootstrap classes of btn btn primary and i will give it a width of 150 pixels i will call this button as create next i want to add a link here this link i want to go back to the index action method inside the category controller to load all of the categories so it is more like a back button link so first what is the controller name that is the category controller and what is the action in there that is the index action we will give it some bootstrap classes btn ptn secondary and i will also give it a style with the width of 150 pixels within here we will display back to list let's go back and looks better if we click on back to list you can see that is functional now in the next video we want to hit the create button and create our category with that let's continue from the next video now i want to create the category when we populate the details and hit the create button so when we hit the create button we will have to create a post action method inside the category controller and in that post action method we will already be fetching the category object that is populated because we used tag helpers so inside the category controller we can copy this create and paste that one more time let me stop the application inside the parameters we will be receiving a category object let me call that obj this will be boost action method now if an action method is post we have to write the attribute http post on top of that the dotnet team has upper and then we also have to validate the anti-forgery token anti-4gb token is there to help and prevent the cross-site request forgery attack what it basically does is inside any forms that you have inside the application it will automatically inject a key there and that key will be validated at this step that key must be valid to prevent the cross-site request forgery i have explained the cross site request forgery and the validate anti-forgery token in much details inside free content on.net mastery if you search and look for cross-site request forgery you can find that video on youtube and watch that i do not want to change the focus of this course so we will just validate that token on all of the post requests this is not required but i will highly recommend that to avoid the cross-site request forgery now once we have the category object that is populated with name and the display order we want to create that record inside the database so to do that we will use our db context and on that we have the categories then in order to retrieve categories we did not have to write anything else but when we have to add something to the table we have to add method there and you can see it expects a category entity we already have that inside the obj that is what the user populated so we will add that to our database now once you add it to the database it is not pushed to the database right now it will be pushed to the database when you run the command underscore db dot save changes at that point it goes to the database and saves all the changes once the changes are saved we have return view here that will take us back to the same category view let's say when we are done let's go back to the index so that we can see the new category that was created so rather than return view we want to redirect to an action we want to redirect to the index action it will look for this index inside the same controller if you had to go to an action method in some other controller you can define the controller name right here but since we are in the same controller we can just mention index and that will work let's run our application and try this out let's go to our category and let's create a new category i will call this test display order 12 and create you can see it has been created if we go back to our sql server let me close this and if we do select top thousand now we see two records so perfect this is working as expected and we are able to create a new category now but our create category is not perfect if you hit the create button you will run into an exception let me switch back to the project and you can see the exception is cannot insert now inside the column name we do not have any validations but inside database we said that this was a not nullable column so when the entity framework code tries to save it gives the exception pretty smart but we have to be much smarter to handle the validations let's take a look at them in the next video now when we try to create a category without any fields populated right now we see some error message because it cannot add an object when in the database we have validation but that is not a good approach because we are throwing exception in that case what should happen is we should handle our validations inside the server side which is controller as well as inside client side which is inside the create view so how do we handle validations let's first do that at the server side so when we receive a model here we can check whether this model is valid or not and what defines a valid model is the validations that we have right here name should be a required property so let's go back and let's make sure that our model is valid in order to check that with dotnet core we have model state dot is valid that will determine if the model is valid or not if that is valid we want to create and redirect to index if that is not valid we just return back to the view with the object let me run this and show you what happens i'll add a debugging point on if the model state is valid so let's run our application let's try to create a category with no fields populated we hit our break point and if you examine the is valid flag is false so our model state is not valid great but now which property in our model state is not valid it is important to know that because right now we just have two properties it could be possible we have over 50 properties in a model so in that case you hover on model state you expand that inside the error counts you see we have two errors if you hover on the values here result view you will see which properties are not valid you can see display order is not valid as well as name is not valid let's continue here and this time let me populate display order and hit the create button one more time model state will still be not valid but this time if you examine the error count is only one because we already fixed one of the errors by providing display order so now you can see display order is valid but name is still invalid because it is a required field but server side validations are working but with that it would be helpful if we are displaying an error message right here so that user can know why it is failing doing that is super simple we will remove the breakpoint here and let me go to the view just like we have asp4 tag helper we also have a tag helper for validation so inside name we can add a span tag and we have the tag helper asp validation for on this you have to define the model so we want to check validations for name here and if there are any errors we want to display them in red color so we can give it a bootstrap class of text danger we will copy this pan and we will paste that for display order as well with that in place make sure to save this and we will go back and refresh the page let me just reload this and this time if you try to hit the create button you can see the default error message is displayed the first one that we have is name is a required field and display order value now is invalid because it's an integer so with that we can display the default error messages right here so with that we have our server side validations in which it checks at the controller level if the model state is valid or not if it is not valid it populates the model state with error message it returns back the obj and it automatically displays the validations that we have added we did not have to write javascript or any other complex code it is doing all of that with the help of tag helpers let's continue in the next video with server side validations what if you want to display a summary at the top with all the error message if you want to do that dot net core has a solution for that you will need a div this time and not a span that you were using with validation for and inside div you can see we have a tag helper asp validation summary this will be all in this case it will display all the validations at the top in a summary format once we make this change let's go back and refresh here if you hit create great now you see the error messages at top as well when you select all it will display models as well as properties if you want to limit that you can change that to model only and none but if you are using validation summary i personally like all and this is great now along with that what if we want to add some custom validation like let's say inside the controller here we want to make sure that we do not add any category which has the same name and display order how can we add that to the validation so before we confirm if the model state is valid we can check here if obj dot name is equal equal to obj dot display order we will have to convert that to a string if this is the same we want to tell our model state that this is not valid so for that on the model state itself we can add custom model errors here we have a key and value pair you can give any key name that you want we will call this custom error if you want you can also use string dot empty but since this is a key you have to make sure that you do not use the same key two times let me add a custom error that the display order cannot exactly match the name now since we are making a change inside the controller we will actually have to restart our application to see this change if we were working with the view we did not have to restart let's go to our category and try to create a category with the same name and display order this time you can see we have our custom validation that is being displayed in the summary now if we did not have summary then this would not have been displayed but what if you want to display the error message inside name as well it is pretty simple we will stop the application and the key we will just change that to name because inside the category object if you notice we have name so inside controller we are adding a new error inside the name property let's run this and give that a try let's go to our category and try to create a new category with the same name and display order great now you see it displays in both places so with this we have seen how to add custom error message but all of the validations that we have so far are done on the server side every time you hit the create button you will see the page will reload so that means we are hitting server every time even if the name and display order are empty we go back and hit the server because the page reloads what if we want to make all of these validations on client side let's do that in the next video now if you want to do the basic model validations like name and value for the display order on the client side it is pretty simple if you examine inside the shared folder we have a validation scripts partial that is using jquery.validate it is inside a partial view so if we want to do client-side validations we just have to include this partial view in our view so that brings the big question how do we use a partial view we have not created one but we are using the one that is already available it's not a rule but typically it's good to name partial views with underscore so even if in future when we create a partial view we will follow that convention now in order to include a partial view it is pretty simple you can directly say partial and then you have to write name of the view so make sure to type the exact name if you have a spelling mistake there then this won't be included with that the errors go away but inside the partial view if you open up we have script files so we need to add that inside a script section of our view so here we will have to create a section for scripts and in there we will have to add our partial view and that tool inside razor syntax once you add this let's run the application one more time and see the magic let's go to our category and let's try to create a new category we will hit the create button you see we get the validations but we are not going to server this time all the validations are done on client side because of the script that we included to double check you can just add a debugging point here and hit the create button it will never reach our debugging point it will reach our debugging point if the name and display order are the same then the client side validations are valid the validation that fails is the server side custom validation that we added and if you continue perfect you can see that in action so with this we can see how easy it was to add client-side validation let's continue in the next video now that we have added the client-side validations i want to show you one more thing right now we have the default message that is being displayed right now we have the default message that is being displayed on top of that you can see right now in display order there is no space that is available and it is the same with the validation the reason behind this is if we go to our category model you can see that's the property name and that is exactly what is being displayed so if we want to display something that is not the same as property name we have display name here which is inside component model and here we can just give whatever name we want to display so let's add a space there and it will correct that automatically let's run this and give that a try let's go to our category create category and this time you see in errors we have a space labels we have a space and perfect looks good now if you go on the official documentation there are quite a few data annotations that you can use we see the required one that we saw we also have a range attribute i won't go into all of them you can explore them when you want you can see the display attribute that we used now let's just try one more which is the range attribute that specifies a range for a field so let me just close this and we'll stop the application inside our display order we will add a range attribute and here we have minimum and maximum value so let's say minimum is 1 maximum is 100 so now if the display order is not in the range it will give an error message but the error messages that we see on the screen with validations are also customizable so with range if we want some other error message we have that property right here and we can give a custom error message we will have our custom error message as display order must be between 100 only with two exclamation let's run our application and see that in action let's hit create we have our required one let me add something more than 100 and you can see it directly displays our custom validation with that you can see everything is working as expected and we saw how to add custom error messages arrange validation and how to use display name now inside our create view i will hide or comment the validation summary because we don't want that right now the inline validations are sufficient let me go back and remove the debugging point everything looks good so far from the next video we want to work on editing and deleting our category now that we have the create functionality working as expected let's work on the edit functionality for edit we will go to category controller and just like we have to create get and create post we will copy that and paste it one more time this time we will call them for edit so let me change the action method names here one thing that will be different for edit is when the page is loaded it will display the existing functionality of the category that was selected here we will retrieve an integer which will be id based on that id we have to retrieve the category details and display them so we can check here if id is no or if id is equal to zero in those cases we will return back not found because that is an invalid id if that is not the case we will retrieve the category from database so category from db and we will extract that using our underscore db dot categories now this will retrieve complete list of all the tables so on that we have few more ways of finding one of the entity first is single or default which returns only one element every time it will throw an exception if there is more than one element id is a primary key so there is no chance that there will be more than one element similarly we have single the difference between single and single or default is single will throw an exception if no elements are found for that id but single or default will just written empty if there are no elements so default will not throw exception if the element is not found similar to single or default we also have first and first or default the difference between single or default and first or default is that single or default will throw an exception if there are more than one elements first or default will not throw an exception it will return the first element of the list so if more than one elements are found first or default will return one element singular default will throw an exception last but not the least we have one method which is fine find basically tries to find that based on the primary key of the table we know that id is the primary key so we can use find here and pass the id it will find the category based on that id and assign that to our variable let me also show you how you can use first or default with find you just had to pass the id with first or default you have to pass an expression here where we will have a generic object let's call that u and we will say u goes to u dot id should be equal to the id that we have if that matches in any of the category row retrieve that and give me the first one out of them let me copy this and paste it one more time for single or default the syntax will be same we will just use single or default and let me call this variable single so these are three ways to retrieve a category from database based on the id i will comment two of them out but i wanted to show you how that could be done using entity framework core now once we retrieve the object we will check here if category from db if that is now that means again we will return not found if we find that category we will return that category to the view so next what we will do is we will create this view which will have the category loaded and we just need to display that that view will look exactly same as the create view but the only thing different will be that it will be for edit page so we can copy the view that we have for create inside category folder and paste that one more time i can rename this to edit to give us a head start let's open that edit view our model will be the category model but rather than create category this will be edit category now when we edit a category we want the validations so that will stay the same the button text will change that from create to update and it is just submitting back we do not have which action method it should submit to if you do not provide any name here it will by default submit to the same action that is of the name of the get so since the get is from edit it will post that to the same action method which is edit but if you want to be explicit about the action you can use that with the tag helper asp action and you can write edit like that so if you want you can be explicit but that is not required the back to list will stay the same so with that in place if we want to see this in action let's go to the index view of category where we are displaying everything i want to add a link to navigate to the edit action method there will be three columns here let me add another gh tag and inside the tv we will have one with the links so inside this td we can add a div with a class of width 75 and btn group we can also give that a role of group in there let me add an anchor tag and we will use tag helpers inside this anchor tag this will be for edit and if we go back and if we open up the bootstrap icon let's try to find an icon for edit we have this pencil square let me copy that and paste that here let's run the application and we will get back to the index in just a second while the application loads let's get back here so this edit should take us to category controller and edit action method so if we go back here we want the asb controller it has to go to the category controller asp action it should go to the edit action that is great but if we go take a look at our controller action method it also expects an id so we have to pass that id with our link we can pass custom variables here so we can say asp route and then what is the name of the variable that is id right here so we will just say id here this will have to bind with our object so we'll say at we have obj dot id you can see how dynamic we can get with the razer pages with that let's go back and refresh go to category we should see the edit button yep that is here you can see if you hover on edit you can see the url where the id is changing if you click edit here it will take us to edit category and it automatically populates the name and display order our back to list is also working as expected to make this button look pretty we can just add two css classes btn btn primary and some margin let's go back and refresh and this looks much better so our edit get action method is working as expected in the next video let's work on updating our category now we are able to load the category that we want to edit when the user hits the update button it will go to category controller we have the post action method for edit you can have the same validation that we had there but if all the validations are valid we do not want to call the ad we want to call the update method on our categories db set this is a built-in method with ef core where based on the primary key it will automatically update all of the properties and you do not have to do any manual update it will take a look at the obj right here and it will find its primary key retrieve that from the database it will check all the other properties where the values have changed and it will update all of those so you can see it is handling all the complexity and we just need an update statement to update any of the category based on the id after that make sure that you are saving the changes and we are redirecting back to the index action if you examine here you can see all the options that are available with rdp set we have add remove add async at range that will add multiple objects at the same time we have update and much more for this time we will select update and we will have to restart the application since we made some changes to the controller let's go to our category and let's try to edit any of the category and great you can see update is working successfully now the last part that i want you guys to implement yourself is to add a button or a link here to delete any of the category once you do that it should take you to a details page like edit category but this will say delete category and the fields will be disabled then there will be a button to delete and when you click that on the post it will delete the category and take you back to the index page it is exactly same as what we did with edit category but rather than update you will have to find what keyword to use to delete the category also i want to show you that inside edit our validations are working if you hit update here you can see it does not let you update you go back the data stays the same so all the validations are working as expected but in the delete category we will not need any validations because you have to make sure that the fields are disabled so good luck with the assignment and i'll show you how to do that in the next video the last functionality we want to work on is the delete functionality inside category so we will copy edit as is and we will paste that one more time both get and post i will change this to delete and we will use the same name right here for the post action method when we are deleting a category we want to retrieve that category and we want to display that on the view so this functionality stays the same with the get action method now with the post action method you can either push the complete object or you can just pass the id here so we will have integer id and based on that id we will first retrieve that category now i do not need any model state validations so i will remove them all i have to do is based on the id i have to retrieve the category so i'll say variable obj is equal to underscore db dot categories dot find based on the id we will find that if there is null we will return not found else on categories we have remove and we will remove the object save the changes redirect back to the index page that looks perfect but we see an error with the name we cannot have same signature with the name and the parameters for two action method so for now let me rename this to delete post let's work on adding the delete view it will be same as edit because we will be displaying them so let me copy edit paste it one more time i will rename this as delete let me close all the other views so that we don't confuse ourselves this will be delete category and the button let me make it danger since we are deleting we do not want any validations and the fields will be disabled so let me copy that as well now the post action name is added but we have renamed the post method to delete post so we will copy that and paste that right here let's run our application and give this a try let me go back and add a debugging point right here let's go to our category and we forgot to add the delete button inside the index view i will copy this and paste it one more time this will be for delete rather than square we will have to look for delete icon so let me look for a trash can the get action will be delete so we will use that let's go back and refresh we have edit and delete let me give it a different color and perfect now if you try to hit the delete button it will take you to the delete category let's see what happens when we hit delete button it will hit our breakpoint and you examine the id is null now why is this id null it was not null when we were editing but in delete this is null the reason behind that is inside delete let me hit continue here and it will take us to not found page that's perfect but the reason behind that is inside delete all of the fields for our model is disabled if one of them was enabled id is primary key that's why it was automatically being set on the forum so in this case what we will do is we will have an input field with the tag helper asp4 id that's the only field we care about and we will keep it hidden since it is inside the form when the form is posted we will retrieve that id right here let's go back and let me refresh let's hit the delete button this time the id is populated so now if you hit continue now if you are editing you make some change you get this error message but i believe with visual studio 2022 we are just giving that right now and it will be fixed later on in that case just rerun the application so let's go to category here and try delete one more time perfect that category was deleted but that delete is working as expected but i want to show you one last thing right now inside delete we have the action as delete post what if we want it to be delete in this case it won't work because the controller will know that the action method name here is delete post for post so if you want to explicitly give that a different name we have action name attribute right here and we can give it delete that way the controller will know that if a request comes in for delete action method http post inside the category controller that is this particular action method so let me run that and show you that this also works so let's go to category and delete one more category perfect so with that all the functionality are working as expected want to display some alerts when someone deletes edits or create a category on the category index view how will we do that for that we have something called a stamp data in dotnet core temp data has been provided with one single purpose whatever we want to store in temp data stays there for only one request after that if you refresh the same page that will be gone so that is perfect for displaying alerts of successful or failure notification let's take a look at how will we do that let's say right now that when we create or edit or delete anything we will add something to attempt data of success so once the create is successful here before we redirect we want to use temp data it is directly available as you can see so temp data and then you have to give any key inside there so let me call this temp data of success and we will store a message there that category created successfully on create post if they are editing let me store category updated successfully in delete i will say category deleted successfully so we are storing some string inside temp data with the key of success now where do we want to extract this we want to extract that inside the index view so at the top here we can check if temp data of success is not no the main important thing is the key name must exact match if you use a different key name this will not work so if this does match inside an h2 tag let me display temp data and the value inside that let's save this and run our application to see what happens with that change let me try to create a new category great you can see we have category created successfully now since this is in temp data if you refresh this will go away so it only stays in memory for just one redirect and after that it goes away if we try to edit any of the category we get the error of course we see category updated successfully when we delete we get the deleted successfully if you refresh that goes away so this is great when you have to display notifications on some of the actions that are performed now this time data can be used throughout the application and not just one page so why not when we are checking this temp data success and displaying that do that at a global level so we do not have to add this in all the pages for that partial views will be a perfect candidate we can have some code inside the partial view and we can call that partial view everywhere we want because right now it is four lines of code but it is possible that this code will increase drastically when you do something fancy for notification so let's move this code inside a partial view and see how we can call that now that we have added a code to display some of the alerts and notification we want to make sure that this code is applicable on almost all the pages because if in future we add more pages we don't want to copy and paste the same code in all the places so the best thing is inside the shared folder we will create the partial views that is the folder that i like to place all of my partial views we will stop the application right click add view we will go with the razer view not the mt1 and here we will select create as a partial view we did not do that earlier but now we will do that that will create an empty partial view i forgot to give that a name so i'll have to rename this once it is created it's just view we will change that to underscore notification what we want to do is the temp data check that we have here let me copy and paste that here and it will do its check since we have attempt data for success we can also implement attempt data for error so we can display both success and error notifications so great now inside index we can just say partial here and we can say name is equal to underscore notification pretty clean right let's say in future you want to add this to multiple pages you just have to add this partial tag and that will be done let's run our application and see if our partial view is working as expected let's try to create a new category and great that is working if we refresh that goes away so with that our partial views are working as expected rather than displaying a text as an alert why don't we use something fancy like toaster so we have toaster.js so with toaster if we go to the github page we have a javascript notification that we can use if you go to demo here and hit show toast this notifications are much cleaner and easier to read in order to use that we will copy the minified js and css files let's add that to our project in the underscore layout of the css file we will be adding right here so we'll say link rel is equal to stylesheet and the href let's go back and copy just the css so we will copy this and paste it right here now the gs file will be required at the underscore notification level so we will have to go back copy the js file and we need to include that right here so we will have to use a script here src let's paste that also when we are using toaster we will need the jquery reference that is inside lib we have the jquery dist jquery.main.js so we will have to add both of them in both the places next we need the toaster alert so if we go back we should have a usage right here we have toaster.warning toaster.success we will use it exactly like this so if we go back here if we have success that is populated we need a javascript code so we'll add a script tag we will say type is equal to text forward slash javascript and i will use toaster.success and display everything inside temp data of success make sure here you are using the single quotes and then you need the activate sign for accessing the c sharp variable let's copy the script tag and paste that for error and this looks great so with that we have added toaster.js in our website if we go back even while the application is running these are just the javascript changes so you can refresh the page here and let's try to edit something in the category and great we see our toaster alerts here and everything is working as expected now let's say this notification is something you will have across all the pages in that case it does not make sense to add this one line in all the pages even though it's just one line it just doesn't make sense so rather than adding this in all the pages you can add that in underscore layout and that will be included in all the pages so just before render body where we have all the body that we render for the page we will paste our partial view and that will make sure that it is included in all the pages of your application so make sure that you include only things that are needed across all the pages because this will be loaded every time your page loads so with that if we go back and refresh and try to delete a category our toaster alerts are working as expected now that our application is up and running and everything looks good i want to show you one thing with the controller we added the controller ourselves and we also created all the views but with dotnetcore we have some help if you want so if we try to add a controller this time we will implement the same logic but with mvc controller with views using entity framework we will hit add here and this will create an mvc controller with views using entity framework on a model so we will select our model category on that we want the grunt operations let's select a data context that will be used to access the database and we will give our controller a name i will leave the default name but rather than categories i will say categories temp controller since i want to delete that later on let's add this and see what happens this will scaffold everything for us it will create a new category stamp controller and it will create the views for create edit delete details and index you can see the new controller it has all the action methods as well as the post action methods and inside the category stamp it has added 5 views let's run the application and see the change in order to navigate that we will have to manually type category stem it takes us to the view here where we have the index view it displays our category we can create a new category here with this it also asks us to input the created time let's do that you can see it is not as efficient because it does not know that created date time will be the default one so it asks the user to input that but you can create that edit that go back view the details and you can also delete any of the request so all the crud functionalities with the views are ready for you and generated in just a minute but you'll have to spend time on customizing this based on your requirement the reason i did not want to go into this directly is i wanted you to spend some time and learn how to do everything from scratch but once you know this you can take a look at the controller action method most of the code will be the same but that is also an option that is available with that let me remove the temp controller that we added as well as the views with that our application is complete let's see how we can deploy this to azure and see everything live on the internet now the final task is to deploy our application to azure so for that you will have to create an account on portal.azure.com i already have an account if you are signing up for the first time you will get 200 dollars of free credit that you can use the first thing that we have to do in here is we need to create a sql server and a database inside that so we can create or search for sql databases and let's hit the add button usually i like creating everything from visual studio but sql server i like to create here that way i can easily see all the configuration you will select the subscription that you have and in there we can create a resource group i will call this resource group as dotnet mastery underscore course and then let's enter a database name we will call that dotnet mastery underscore db we do not have a server so let's create a server the server name will be unique so i will use dotnet mastery server and then we need an admin login we cannot use admin here that won't work so i will just use admin sql for password you can use something secure select your location and hit ok now next option is to we want to use elastic boo we will say no there and in the server location that's not available so let me select some other location each us2 and let's hit ok then you need to select the compute plus storage we will select configure database there and i will use the lowest option which is basic here and that is 5 usd per month let's apply i do not want to pay more for the subscription so i'm going with the lowest option the redundancy backup that is perfectly fine with me let me hit review plus create we will hit create here and it will take a while to configure our database and set everything up and perfect our database has been created if we click go to resource it will take us to sql database now one thing that you will have to do is if you want to access this database from your local sql server you will have to select the set firewall settings and add your client ip that will enable your client ip and you can access the database from sql server let's hit the save button to add your client id there once that is done let's go back to sql server and we need to connect to that server so we will hit ok here go back to the resource and we have connection string let me copy the server name here go back and paste it and we will use sql server authentication we have admin sql and the password let's press connect great we are able to connect to our sql server so with that in place let's continue from the next video let me close the other tabs here now we are able to connect to our database from sql server let's go back to our project and we want to deploy our website to azure for that we will right click on the project and hit publish we will do all the setup directly from visual studio to create an app service and we will use the database that we created here we will select azure hit the next button we will be using azure app service for windows if you are not signed in make sure to sign in with the same account that you have used to create the database on azure portal you will select the subscription name here and we don't have any app servers that are running so we will create a new app service here and we need to give a meaningful name i will call this bulkybookweb and because of that the final site name will be bulkybookweb.azurewebsites.net we will have our subscription resource group if you do not have one you can just create one it is just any name that you want that is more like a folder structure in which you can organize everything together next is the hosting plan by default there is s1 hosting plan i want to use the free hosting plan so we will select new here and we will select the free plan that is available with azure let me hit ok here and hit the create button this will take a few minutes but it will create and configure your app service once the app service is created we will have to configure the connection string and then in the new database that is created we need to make sure that migrations are executed perfect this is done let's hit finish here then inside dependencies you see we have sql server database you can either configure this here or if you just click the edit button here it will display the database which has a connection string if you go back to your portal and we will have to go to our sql database we have the connection string right here we will copy this and we will paste that here we just need to make sure a few things we just need to make sure that password is populated let me do that here user id looks good we will say that we want to use this connection string at runtime let me copy this and inside the entity framework migrations we want to apply migrations on publish we will paste the connection string here as well let me go here to make sure password and user id looks good and the last option is since we are using dot net 6 it is not available inside the api service so for that we will have to change the mode to self contained that will have a self-contained environment with dotnet sex with that let me save this and let's publish when it will try to run the migration in the logs we will see one error with the ip address let's wait for that and you can see it is failing here so it should give us the error message pretty soon and perfect we see that here it should be with the ip address and there you go you can see it cannot access this ip address that is the server ip so let me copy that and i will paste that in notepad let me copy this ip address we will go back and inside our database we will select the server firewall add that ip address and we will save that perfect now that should not be an issue let's hit publish one more time this time it should be able to push all the migrations and deploy our code to azure once everything is done it will load the website which is bulkybook.azurewebsites.net great it automatically opened up and perfect this looks great if we go to category there won't be any category but we can create a new category here and our alerts are also working so perfect with this we have seen how we can deploy our website to azure that being said this is only for testing but the sequel database that we have we are getting charged for that so let me remove all the resources and we will also delete this profile the reason i want to delete is i only wanted to show you how easy it is to deploy your code to azure so with that let's go to all resources select all of them and let's delete them so with that we have seen the cred operations that we can do with category using mvc in dot net six so first of all congratulations on completing the grud operations using dot net six mvc we have seen quite a few things in this small course but right now we are just getting started with dotnet core and there is a lot more to explore and learn when it comes to dotnet core even though this course has come to an end i have advanced courses that will take you from the basics that you have learned here all the way to exploring new concept let me walk you through some of those concepts in the full course of dot net core mvc we will take what we have built so far and convert that to an entire architecture because that is a real world scenario because that is a scenario that is adopted with most complex project then we do not interact directly with the data context in our main project we will be using a repository pattern and unit of work to interact with our database so we will see dependency injection and how to inject that using a repository pattern then we will further split our project inside areas in dotnet core which is a folder like structure but everything gets much more organized we have seen temp data but we will see view back and view data with dotnet core and see how all of them are different next we will use sweet alerts which texture editor data tables with dot net core and api calls with any application authentication and authorization plays very important role and dot net team has given us the razer glass library which is identity in the dot net world that makes all of the authentication super simple because the basic functionality and table structure is already implemented for us so we will see how to scaffold that identity in mvc application next with authorization we will see how roles play an important role and how can we modify our application based on the role of the user that is logged in in a real-world scenario we also accept payments so i will show you how to accept payments using stripe and also give refunds when the order is cancelled session is one of the key feature that was very helpful with traditional mvc application with net core also session is not gone we just need to do a little configuration and add session to our project and we will see that in action most of the applications will send emails in some way i will show you two approaches one using the smtp server and second using applications and grid then with the modern applications we have social logins like facebook twitter and so on so i will show you how the dotnet team has made it easy to integrate social logins with the help of facebook lastly there are some advanced concepts like view component how to see database with db initializer and once the data is seated in the database our final goal is deploying the application to azure so you can see there are quite a few topics that we will cover in the advanced course but with that you will get a solid foundation to build your real world project and if you like this free course please subscribe and like this video and i will have more free content uploaded every month so good luck with your journey of dotnet core and happy coding

Channel: DotNetMastery

Views: 49,764

Keywords: MVC, ASP.NET Core, .NET 6, .NET Core, .NET6 MVC

Id: 8NWC8BnxC8o

Length: 184min 18sec (11058 seconds)

Published: Fri Oct 08 2021