ASP.NET MVC Project - Full ASP.NET MVC Course - Build a Blog With ASP.NET MVC and Entity Framework

hey what's up everyone in this video we are going to start building a real world project using asp.net MVC and we will use the latest version of.net that is dotnet7 this video is a preview to my 10 plus hour course on udemy that I've built with love and covers everything you need to build amazing web applications using asp.net core MVC please watch this video right till the end and if you like this video you will surely love my udemy course the link for which is in the video description along with a huge discount code for my special YouTube viewers please enjoy this video and I will see you in the course hi and welcome to this course where you will learn and master your asp.net core web development skills and build a highly scalable data driven asp.net website with me using asp.net MVC framework my name is Sameer and I will be your instructor for this course together we will build an asp.net core website from scratch that is built on the popular MVC framework if you have worked with the asp.net framework in the past then it is for sure that you have encountered asp.net MVC by now with the evolution in asp.net the way we used to create websites have changed and a lot has changed inside asp.net MVC as well in this course we will build a highly scalable blog application using asp.net core MVC from scratch using the latest asp.net core version we will learn the overview of asp.net core and the model view controller framework we will then go ahead and create a new asp.net core MVC project and go through the files and folders that we have in the new project we will start with finding our domain models for our application we will use the most popular object relational mapping tool that is Entity framework code and connect our asp.net MVC web application to a SQL Server database using ef4 we will first start with the basic crud operations that is create read update and delete operations on our database we will also learn how we can seed initial data to the database using Entity Framework we will understand routing and see the different routing techniques for MVC web pages we will then learn repository pattern to read and persist data to the database we will learn how we get data on page loads and also submit forms we will also show success and failure or error notifications on our web pages we will be using the most popular CSS framework that is bootstrap to speed up the web development process along with maintaining a consistent clean and responsive look for our website we will also create a web API controller in our MVC application and we will invoke these API using JavaScript we will learn and Implement asynchronous programming throughout the code we will Implement a third party wizovic that is a Rich Text Editor to create the content for our blog application we will also add authentication and authorization into our project using Microsoft identity along with the functionality for registration and login we will Implement role-based authorization where we will have multiple rows like users admins and super admins we will also implement the functionality to manage these users we will be going through the topics discussed in a very practical approach so that every concept just comes naturally along with the Practical website that we will build let me take you through the application that we will build in this course we will be creating a fully functional Dev blog website this will be a website in which we create our Dev related blogs people on the internet will come to our website to view these blogs on the home page we will have all the blogs available to us as a list we also have categories also known as tags for these blogs that we have on our website these tags are used to navigate to similar content for example ASP net tag gives us all the blogs which have the tag asp.net in them the user can view the details of any blog by clicking on the read more button this will take them to the details of the blog which is routed using the URL handle this makes the blog SEO friendly for search engines like Google and Yahoo as well the blog Details page also has the functionality where it shows how many users have liked this block when we scroll down we get the functionality to view the comments on these blocks as you might have noticed you have the likes and comments showing up on the screen but they will only work if you are logged in to the application for normal users visiting our blog we have the functionality where the user can register themselves using the register page on a successful registration they can log into the application using the login page once the user has logged in they can browse the website as usual but now they have the functionality to like and comment on blogs apart from the normal user we have two other user roles implemented we have the admin users and the super admin users both admin and super admin users can log into the application and upon a successful login they will see another navigation that is just available for admins and super admins using the admin functionality the admins of this blog can create new blog posts here they have the access to this Rich Text Editor which they can use to create the content for this blog we also have implemented the functionality to upload images for these blogs to a third-party cloud-based image hosting provider the admin will use this page to create new blogs they will see all the blogs that they want to manage using the blog list page from here they can view the details for any blog and also have the functionality to update any of them they can also delete blogs using the delete button another functionality that admin have is to manage users we have the users page available only to admins and super admins using this page they can view and delete users we also have implemented the add user functionality but using a pop-up model instead this will be an amazing tutorial by the end of which you will Master creating scalable asp.net core MVC websites I am excited to do this and I hope you will have fun doing this with me in this lecture we will create a new asp.net core web application from scratch this will be the web application for our Dev blog for that I have created a folder called bloggy MVC I want to create a.net web application under this folder I will open Visual Studio and from the get started section over here you can see a bunch of options that you can choose from I want to create a new project so I will click on this button that says create a new project so I will click on that this will take me to a page where I can select a few templates from the left hand side you can see I have a recent project templates that I have chosen to create projects recently you may have this as blank but you can choose a template from the right hand side over here from the top filters I have C sharp all platforms and all project types selected and if you want you can also choose this drop down to select a web because we want to create a web application from the selection over here we can now choose from a ton of different templates I will scroll down to select this template over here that says asp.net core web application and in Brackets it says model view controller it reads that it is a project template for creating an asp.net core application with example asp.net core MVC views and controllers this template can also be used for restful HTTP services but in our case we will use it to create a web application so select this template and click on the next button on this page you can configure your new project from here you can give a project name the location under which you want to save this project and also a solution name so one solution can have multiple projects so you can configure that from this page we have the location already so I will copy this location and paste it in the location tab so I want to create an application under this folder I will give my application a name so I will call this bloggy dot web because it's a website and the solution name goes with the project name but we will remove the word dot web from it so the solution name is just bloggy and the project name is bloggy.web with this I will click on the next button on this page Visual Studio is asking for some additional information it is asking us for the framework on which we want to create this project from the drop down that I have I have three options I have.net 5 which is clearly out of support I have.net 6 which at the time of recording this video is still a long term support but that can change in future and we have the latest version dot Net 7 which is a standard term support you can know more about the Frameworks on the Microsoft website if you've followed the tutorial from section 1 I have explained how to download and install the dotnet 7 SDK and runtime and you may also have to update Visual Studio to have the selection of dotnet 7 over here so please do all the steps and then create your new project so I'm going to select.net 7 over here and after that I will keep the authentication type selected as none because we will do authentication in a later section and we will start from scratch and after that I will keep the configure for https check flag on and I will leave the rest of the settings as is and click on the create button it takes a few seconds to a minute depending on the speed of your PC for visual studio to create this project in the next lecture we will go ahead and see what files and folders has Visual Studio created us for this new project in this lecture we will understand more about the project and the files that were created as part of the project scaffolding let's understand them one by one on the top here we have the solution our solution is called bloggy a solution is an architecture for organizing projects in here we have a single project at the moment a solution can have one or many projects in them and inside that we can consume each project as well below the solution file we have the project file in our case it is bloggy dot web similar to a solution a project is a structure for organizing files and folders so if I expand on this project I can see different files and folders inside this project if you double click on this project we will open the bloggy.web.csproge file you can see the different properties of the project in our example we are looking at the Target framework which is dot Net 7 we have the nullable as enabled and we also have implicit usings as enabled so these are the properties of the project when you add nuget packages to our project they also end up as a reference in this project file now let's look at the launch settings Json file which is under the properties folder over here so let's open that as the name suggests the launch settings.json has the configuration and launch information of this project stuff like profiles and application URLs reside in this launch settings.json file if we look have the look at the drop down over here we have the different profiles coming out over here we have the HTTP profile we have the https profile which is the selected one we also have the is Express profile over here we have these profiles from these columns over here so in the Json file we have configuration for the HTTP profile the https profile and the IIs Express one at the moment we are using the https profile if you want you can also rename this so I can rename this to bloggy https and that gets renamed over here so now I can select it bloggy https profile and that has the application URL of localhost 7100 and localhost 5177 based on the https version and the HTTP version the application URLs for your created project may be different so make sure you go to the launch settings.json to have a look at the application URL for your project after that we have the www root folder over here static files such as HTML CSS and JavaScript and images are assets that an asp.net core application serves directly to its clients by default static files are stored within the Project's web root directory which is also known as the www root directory over here this also means that any files under this folder are publicly and directly accessible by the client that is your browser so any CSS or JavaScript that we want to expose to the client we will store it over here the next folder we have is the controllers folder the controllers folder contain class files for the controllers a controller handles user requests and returns a response in MVC we require the control filers controller files to end with the controller keyword over here you will learn more about controllers and how to create a new controller in a future section after that we have the models folder the models folder contains model class files typically model class includes public properties which will be used by the application including the controllers to hold and manipulate application data after the models we have the views folder the views folder contains HTML files for the application typically view file is a DOT CS HTML file where you write HTML and C sharp code the views folder include a separate folder for each controller files for example all CS HTML files which will be rendered by the Home controller over here are included in the home folder inside the views folder we also have the shared folder under which we have the views that will be shared amongst all the different controllers we also have the layout file which is the layout for this application under this shared folder stuff like partial views also go inside the shared folder inside the views folder over here now let's talk about the app settings.json file all the application settings are contained inside this file any changes made inside this application or Json file will require restarting the Microsoft IIs Administration inside app settings for Json we can see there are a few details available such as logging the log level and other stuff in here we will use this file to create other configuration like the database connection and storing Keys Etc we can access all these variables inside our program within asp.net6 or asp.net 7 project you will not find the startup.cs file if you are coming from a previous version of.net you might be just seeing the program.cs file and that is what we will discuss next you might see that everything that was inside the startup has now been clubbed together with the program.cs file the program.cs file is the entry point of the application this will be executed first when the application runs we first add services to this file or to our application and these are our containers asp.net supports dependency injection software design pattern which is a technique for achieving inversion of control between classes and their dependencies dependencyin.net is a built-in part of the framework we can inject our services into the dotnet container by accessing the services collection in the Builder object an example of this is adding controllers with views into these services and that's part of the Builder object over here dependency injection can be a little tricky if you are just starting out but trust me you will fall in love with it when you understand it fully so don't hold yourself back from learning anything you can do to understand dependency injection and specifically in.net core after that we have the request pipeline configured over here by using the request pipeline we add middleware which is a software that is assembled into an application pipeline to handle requests and responses these are the middleware that have been configured in our application we have https redirection we have using static files we have routing authorization and other stuff the order in which these are configured is very important finally after adding everything into the request pipeline we run our application and then the project starts and then we wait for a user to create an action so that the controllers can handle it so this was a brief about all the files and folder structure for MVC in the next lecture we will create our domain model for our application in this lecture we will go ahead and create the domain models for our blog application we will start first with the admin functionality as an admin of this blog the admin would be able to create a blog post just like you see on other websites on the internet and also tags to these blog posts tags will be something like hashtags for example if a blog is a Dev blog on HTML CSS and C sharp so the tags will be HTML CSS and C sharp so tags will serve as categories for these blog posts let's start with the blog post first a blog post will have the below structure it will have an ID which will be a unique identifier the block will also have a heading which we will use as H1 tag so that we can give the heading of the blog post we will also have a page title after the page title we will have the content for the blog and this will record HTML structure of the blog content inside this column we will also have a short description which just gives the summary of this blog it will have a featured image URL column which will have the URL of the featured image that will be used on the top of the blog it will have a URL handle it sometimes is also called a slug so for example if your website is bloggy.com anything after the main website URL address is your url handle which takes you directly to this blog so that will be your url handle after that we have the published date which will be a date time and then we have the author information who wrote The Blog then we also have a Boolean flag for visible enabling or disabling this flag will make sure that your blog is hidden or displayed on the website along with the blog post domain model we will also have a tag domain model which will just have three properties the first one is a unique identifier which is the ID then we will have a name for the tag that we just saw in the examples for example HTML then we can also use a display name to have these tags as categories because we can't use spaces in these tags because we want to use it in the URL so for example if your website is bloggy.com we want to use it as bloggy.com forward slash tags forward slash HTML and that will give you all the blogs for the HTML tag so for display purposes we will use it a different column and you may have figured it out already but blog posts and tags are connected one blog can have multiple tags so a Blog written on how to host a free website can have CSS and HTML tag and maybe some JavaScript tag or Azure or other platforms and one tag can display multiple blogs so for example if a tag is of HTML it will have multiple blog posts which are related to the HTML Tile For example how to create a header how to create a footer so all those blogs are inside the HTML category and therefore inside the HTML tag now that we know what our domain models are let's go back to visual studio and create these domain models for our application so we are back to our application and we want to create domain models we have a folder here already which says models but we want to create domain models so we will segregate them separately and we will create a new folder inside these this models folder so right click on this models folder add a new folder and I will rename this to domain so this will signify that these classes inside this domain folder are the domain models and to add a new class inside this domain folder I will right click on this folder add a new class the first domain model we want to add is the blog post so I will rename this class to call this blog post dot CS click on the add button we have a class created with no properties inside it this is a public class so that we can use it inside our application now we will start creating properties for our domain model and we will use these properties throughout our application a way to create a property is to just type it out or there is a shortcut for us that we can use which is p r o p and then press tab twice and that is a shorthand on creating properties we will use this a lot inside our application so make sure you use this shortcut the first is the axis modifier of this property which is public then it is the type of the property then the name of the property and then the Getters and setters so first we want to create a ID property as we saw in this in the presentation so we want to create a unique identifier which is the ID so the unique identifier in.net is good so we will make use of the grid type and then rename this my property to ID then we will create another property and you know the shortcut it's p r o p double tab we want to create a property with called heading so rename this to heading and then it's of type string after that we add the page title so that will be a string as well so I will just copy and paste this and rename it to page title then we have the property for content so prop another string and rename this to content after that we have the short description so I can copy this and paste it and rename this to Short description which is the summary then we have the featured image URL and after that we have the URL handle and they all are string types then we will have a date time which will be the published date so prop then the type is date time and the name of this property is published date after that we have the property for author so public property of type string and the name is author then we will have the visible property which will be a Boolean type so property Bull and the name is visible and this these are all the properties that we need for the blog post and if you are just catching up you can pause this video right here and you can note these properties down for your blog post model [Music] after that we need the properties or we need a domain model for the tag so that we can save it to the database so we will right click on domain folder add a new folder or sorry we want to create a class so I will delete this folder and we will create a class instead so right click on domain folder add a new class and we will call this class tag dot CS click on the add button to create this tag model class and this will have three properties as we saw in the presentation the first one will be a unique identifier and in asp.net we use goit type [Music] and the name of the property will be ID [Music] after that we will have a property of name of name name which will hold the name and another one of type string which will hold the display name and we will see later on how we use these two properties of name and display name they might look similar but they will solve two different purposes you can pause this video here again so that you can note down the properties for the tag domain model now as we saw in the presentation we know that one blog post can have multiple tags and also one tag can have multiple blog posts attached to it so it's a many too many many relationship and because we are going to use Entity framework core for our uh as as our orm and to talk to our database we want to create a many-to-many relationship between these two models so let's start with that I will come to the blog post model and I will create another property which will be in I collection which will be a navigation property so that I am telling the Entity framework core that this blog post can have multiple tags so I will create another property inside the blog post domain model so another property the type of this property will be an Eye collection and it needs a type so I collection of type tag because this will be one blog post can have many tags a collection of tags and I can name this property tags now we have defined the relation from the blog post perspective but we also have to assign this relation from the tag perspective so I will come to the tag domain model and in here I will create a similar I collection property but this time I will tell Entity framework that one tag can have multiple blog posts so a property prop double tab this will be an Eye collection similar to what we had in the blog post domain model and the type of this collection will be blog post and the name will be blog posts so here we have it we have a relationship defined between blog posts so blog posts can have multiple tags and tags can have multiple blog posts with that our relationship between blog post and tag is defined now if we come back to the blog post domain model we can see these green squigglies over here under some of the properties if I hover over it it says that in non-nullable property heading must contain a non-null value when exacting The Constructor consider declaring the property as nullable so it knows that we don't have a Constructor which to which we always have to pass a value and this also means that because Entity framework core is going to use these domain models to save the data to the database into the blog post table or the tag table over here if we don't pass a value to any of these properties then it will result in an error so because we know our domain model and we know we always want a value inside a heading we always want a value for the page title similarly we always want a value for Content that's why we are not defining these properties as nullables if there's a requirement in your domain model that you want to say the heading can have a value or it can be null in the database then you define the property of a of this heading as a nullable property with the question mark symbol ahead of the type so now this heading property becomes a nullable string property now if you don't pass a value to The Heading field and Entity framework tries to save the blog post inside the table with the heading as null it will still be able to do it so it will be able to do it successfully but if this is not in place and then you try to put a null value inside heading and Entity framework tries to save it to the database it will throw you an error because the columns that Entity framework core will create for this blog post table will be non-nullable so if there's a requirement you have to Define this property as a nullable use a question mark after the type of this property in our case we know we will not have this so all the values over here should have a value or all the properties should have a value before it gets saved in the database that's why we are not putting a question mark in front of the properties so now that we have created our domain models we need Entity framework to create these domain models into actual SQL tables and for that we need to install Entity framework core first so in the next lecture we will go on and install some packages for Entity framework core in this lecture we will go ahead and install some packages for Entity framework core let's come back to visual studio and we want to install two packages for Entity framework core let's right click on dependencies and go to this option that says manage nuget packages this is the window where we can find and install nuget packages for our application on the browse section over here click on browse and search for two packages the first package that we want to search and install is Microsoft dot Entity framework core dot SQL Server I will copy this and paste it in the browse location and hit enter we have this package over here which is Microsoft dot Entity framework core dot SQL Server I will click on this and install the latest version because I have dotnet version 7 and this is also the latest stable version so make sure your packages version and the dotnet framework version you have used to create this project matches so I will click on install this has now been installed and we want to install another package and that is Microsoft dot Entity framework core dot tools this is the package responsible to run migrations so that Entity framework core can create SQL tables inside our database so I will browse for this package and then I have it on the first row over here which is Microsoft dot Entity framework core dot tools I will select this and click on install I will also go ahead and give the names of these two packages into the notes attached to this lecture so that you can open up notepad and directly copy the package names from there so we have installed both the packages for Entity framework core so in the next lecture we will go ahead and create a DB context class for Entity Framework in this lecture we will add a new DB context class a DB context class is an important class inside Entity framework it is a bridge between your domain models and the database by defining DB set properties inside the DB context class you tell Entity framework and when Entity framework core run migrations you are telling Entity framework what classes or what tables and columns to create in what fashion we also Define the relationship between different domain models or entities or tables through the DB context class so we can say that the DB context class is the primary class that is responsible for interacting with the database and Performing crud operations on our database tables so now that we know why we need a DB context class let's come back to our code and create one we are back inside visual studio and in here the first thing we want to do is to create a table or a folder on the project I will right click go to add and create a new folder for our DB context we will call this the data folder inside the data folder we want to create our DB context which is just a class so I will right click on data add a new class I will give it a name followed by the word DB context so that we are aware that this class is a DB context so the name that we want to give for our application is bloggy DB context so bloggy DB context that is just the name of the DB context click on add to create this file now we installed Entity framework core packages and Entity framework core knows about the DB context so we want to inherit from a class that comes from package that we just installed so this bloggy DB context inherits from a class which is DB context and this class won't be available as of now but if I click on this keyword and press Ctrl Dot I can import the dependencies from here so it wants this package which was installed when we installed Entity framework core so I will click on this and import this using statement after that we want to create a Constructor for this class and there's a shortcut for that because we want to create a Constructor with the DB context options and I will explain why I will click on this bloggy DB context and press Ctrl dot again from these options I will select generate Constructor blocky DB context with the options parameter and you can see it's giving the options of the DB context options so I will click on this and visual studio will automatically create as a Constructor with the DB context options parameter what's happening over here is we will later on override these DB context options from the program.cs file and we want to pass these options to the base class and hence we are creating this Constructor with the DB context options parameter now that we have the Constructor ready it's now time to create the entities or the tables that later on Entity framework core will create inside our database so we need two properties over here which will correspond to the two domain models that we have one for the blog post and one for tag so I will create the first property and you know how to create a property the shortcut for that is p r o p double tab and this property will be of type DB set and DB set takes a type A T entity and the entity for the first DB set will be blog post so we will give the blog post which will come from the models.domain folder so I will click on that and it has the using statement on the top and now it's time to rename this property so I will call my table blog posts Entity framework core will use this name to create the table inside the database after that we need another property for the tags so that Entity framework core can create the tags table so another property of type DB set and DB set needs an entity which is the tagged domain model so I will give tag and rename these two tags so we will have two tables after this after Entity framework core runs migrations we will have two base tables which is blog posts and tags and we will have another table which connects these two because we have a relationship between these two tables as one block can have many tags and one tag can have many blog posts so it's a many-to-many relationship and we will see how the table looks like in the SQL database later on now that the DB context class is ready in the next lecture we will go ahead and add a connection string to our database and the server inside the app settings.json file [Music] in this lecture we will add a connection string to our SQL server and also provide the name for our new database that we want to create so for that I will come back to my application and to create a new connection string we want to add it inside the app settings.json file so I will open that file and after the allowed hosts we want to create a new property for connection strings so I will put a comma and in the next line I will open and close the double quotes and it's suggesting us to add connection strings which I want to so the property connection strings will be and inside the curly braces we will have the name of the connection string inside double quotes So the name of the connection string I want to give is bloggy DB connection string and that's the key or the name of the connection string and then we want to add the value to it so after a colon and inside double quotes I will put the value of the connection string and Entity framework code will use this value to connect to that SQL Server so I will start with the server information so server is equal to and I want to give the name of the SQL Server installed on my machine so I will open Microsoft SQL Server and if you followed the installation videos in Section 1 we have installed SQL server on our machine the name of the server that I gave during the installation was localhost backslash Ms SQL server01 yours could be totally different so you can just try connecting to it with the SQL Server that you had installed and it connects and I have databases in it but I don't have a bloggy DB which I want to use so I can use this server and pass the information to Entity framework so I will disconnect this or somehow use the rename the name of the server so I will copy this server name and come back to my application and paste it for the server over here after that I will put a semicolon and give the database information so I will write database is equal to and we don't have a database with us we want to create a new database so you can give any name over here and that will be the name that Entity framework core will use to create the database so in my case I'm using bloggy DB so that will be the name of the database then put a semicolon and add two pieces of information one we want to write trusted underscore connection is equal to true so I will use the scroll bar so that it is more readable trusted underscore connection is equal to true and I want to add another piece of information so after another semicolon I will write Trust server certificate so trust server certificate is equal to yes and with all this information inside the connection string I will now go on to inject the DB context inside the program.cs but that we will do in the next lecture [Music] now that we have added the connection string to our SQL Server database we have to inject our DB context class inside the services of our application using dependency injection so that whenever we have to talk to the database the application will smartly handle all the connections and instances and will provide us the data smoothly we are back in our application and this time I will open the program.cs file to inject the DB context in our application and we want to inject it in the services container over here so after we have this line Builder dot Services dot add controller with views I will add another line to inject the DB context so I will tell the Builder dot services to add the DB context so add DB context and you can see it takes a type of context so we have the type as bloggy DB context which is our DB context class so that we will provide over here so bloggy DB context and it takes from the data folder and here's the using statement for that after that we want to give the options and these are the same DB context options that we used in The Constructor over here so now we want to give those options inside here during the injection and we want to tell which type of server we are using so I will start with options such that and I can come to the next line so it is more readable options dot use SQL Server so we want to use SQL server and it's coming from this package over here so I can write use SQL server and import this package which is using Microsoft dot Entity framework core if Visual Studio doesn't suggest you directly you can type your package over here and then it will all be fine after that we want to give the connection string to this SQL Server so if I open the bracket over here you can see that it is asking us for a connection string of type string so we have the connection string with us which is inside the app settings.json file and that is what we will provide during this injection but we won't provide a hard-coded value we will use the Builder again to fetch it from the app settings.json based on the name so I will minimize this and over here I will say Builder [Music] dot configuration and from the configuration I can get the connection string using this method and this just needs a name to the connection string so the name of the connection string in my case was the bloggy DB connection string if you have a different name you should write that name and pass it to this method so inside a string I will write bloggy DB connection string and after that I can close this bracket from this method and put a semicolon to end the statement I think I need one more for this options over here so now our line is fine and do and this is the way to inject the DB context inside the services of our application so now that we have injected our DB context whenever we want to use the DB context class we can just use it from the services collection over here in this lecture we will create our database using Entity framework we have done all the preparation so that we have everything we want to give to Entity framework so that it can do the heavy lifting and create the database and the tables The Columns and the relationships for us we will run Entity framework core migrations to create this setup back in our application let's open nuget Package manager console so I will go to tools nuget package manager and I will click on package manager console to open the console window in here we have to type two commands which will you which will be used by Entity framework to create our database the First Command that we want to run is to add a migration and the command for that is ADD hyphen migration space followed by the name of the migration inside double quotes so let's use this command and I will type add hyphen migration followed by a space and then inside double quotes I will give the name to this migration because we are doing this for the first time I can easily write this as initial migration and then I will press enter to start this command [Music] the command runs successfully and it took a few seconds and it has created this new folder called migrations over here and you can see this file getting generated which is which has the name initial migration so that's the name what we gave to create this migration when we open this migration file it has this script which is written in C sharp what has done been done behind the scene is Entity framework core has looked at the DB context class it has seen that these are the two tables that needs to be created and it has created a script for these two tables so if I open the up method over here it has a script in C sharp to create a blog post save table with all the columns necessary and the tags table with all the columns necessary it even knows the primary keys for each tables and also has a relationship table for the blog posts and the tag table so the migration has completed and it has created as a migration but there is nothing in the database yet and we can go and have a look at this we can connect to the database or the SQL Server over here and if I expand on the databases I don't have the bloggy DB with me so the database hasn't been created yet only the migration file has been created so now we are on to the second script that we have to run so I will open Package manager console again from here and the second command that I have to run is update hyphen database and what update hyphen database will do is it will go to the migrations folder and also connect to the database using the connection string and it will see what's missing and it will pass on all those details for example we don't have a database yet so it will create the database it will create the tables The Columns and every other stuff so I can use the command update hyphen database [Music] to update these migrations into our SQL Server database and press enter to run this command the update has been completed as well and you can see it has ran all the migration that it found in the migrations folder and also compared it to the database if there was any so if I open the SQL Server again and refresh on the server expand databases now we have the bloggy DB with us and if I expand on the bloggy database we should have three tables so the first table we have is the blog posts table which has the columns that we created in the domain model that is ID heading page title and all other columns as we saw in the domain model we also have a table for tags we should have three columns the ID name and display name again these are the same properties as we had in the domain model and finally we have a relationship table for blog posts and tags so this one has the blog post ID which is the unique identifier over here and the tag ID which is the unique identifier over here and Entity framework core basically manages all this relationship behind the scene so now we have the database and the tables created for us in the next section we will create a new web page and we will work on those web pages so that we can perform crud operations that is create read update and delete on these tables in the next lectures welcome to section 3. in the previous section we did a lot of groundwork and creating our database and tables in this section it's all about using them we will create controllers actions models and views for our application and we will perform crud operations that is create read update and delete on our tag table using Entity Framework but before we move on let's understand a bit more about the MVC design architecture the MVC architectural pattern has existed for a long time in software development almost all the languages use MVC with slight variation but conceptually they are all the same MVC stands for model views and controllers a model represents the data a class in C sharp that is used to describe a model and is used to carry data around to the controller and to The View model objects store data retrieved from the database view on the other hand is user interface view displays model data to the user and also enables them to modify them so we can views views to display and also to gather the user input view in asp.net MVC is typically HTML CSS and some special c-sharp code that makes it easy to communicate with the model and the controller and after that we have the controller that is the request Handler a user uses the view and erases an HTTP request which will be handled by the controller the controller processes the request and Returns the appropriate view as a response back to the user a typical flow in an MVC design architecture usually looks like this a user comes to your website and performs an action or a request the request then goes directly to the controller the controller then typically reads a database or performs an action on the database and gets a model back then that model or the data in a class is then provided to the view which then is comes back to the controller and the view is returned back as a response by the controller to the browser which the user then sees so now that we know more about the MVC pattern let's go on and Implement that inside our application we are back inside visual studio and the first thing we will do is to run our application to see what Visual Studio provided Us by default to run an application you can simply use display button and you also have options of choosing your browser so under the browser tab over here you have the list of installed browsers in your PC as you can see I have Firefox selected but you can go ahead and choose the browser of your choice and use the visual studio to run this application in your preferred browser so once that is done you can use this button and click on that to run this application [Music] the application is now running and you can see the URL https localhost 7100 yours could be a totally different application URL on the website we have a header we have the body for this website and we also have this photo section over here by default the application uses bootstrap to for its CSS components and gives us a very clean and consistent look throughout as you can see we have in nav bar over here as well clicking on the home button takes you to the home page and clicking on the Privacy button takes you to the Privacy page if you pay attention to the URL over here the Privacy page goes to localhost 7100 forward slash home which is the name of the controller forward slash privacy which is the name of the action let's go back to our application to see this as well so inside the controller we have a controller named home which was displaying over here and after that we also have a action named privacy so we have a action method over here which is called privacy so when the URL home slash privacy is hit the controller home is hit and inside that the action method privacy is called similarly when we click on the home page we have the home page but it is the same as forward slash home forward slash index which is the default action method so if I press home slash index and press enter it goes to the same home page that is because back in our application we have the home controller and the index method is our home page this is how the MVC architecture works and every action in here corresponds to a view as well so the home controller has its home folder and the home folder has two views the index view which corresponds to the index action over here and the Privacy view which corresponds to the Privacy method over here so when the index method is called The View for the index view is called and responded back from the controller we will use this pattern to create more controllers and more actions and Views throughout our application but before that let's change some look and feel of our application so I will open the layout file first and make some changes to the header that we have so this is the header inside the layout.cshtml and we have the nav bar and inside the nav bar we have a list which has two allies one for the home and one for privacy we don't need the Privacy section over here so I can completely take this out we can keep the home selection but that is totally optional but now I want to add another navigation but before that I want to also change the color of this nav bar now as we know this is all boot start classes and if you want to learn more about bootstrap you can go to get bootstrap.com and you have access to their documentation and examples as well in our case we will go to the docs and we will look at the navbar options we have a different nav bars and different colors that we can give to navbars so we want to give a dark color to our nav bar so instead of navbar light we will say nav bar dark and instead of background white we will say background of dark and this is just because I know bootstrap I know the classes but you can always go back to their documentation you don't have to learn all the classes they have a very powerful documentation with a search functionality so you can use that documentation to see what components and elements you can use for your website so with that change I will save the application and use this new feature inside Visual Studio which is a hot reload it doesn't work all the time but it does its job almost all the time so with that I will come back to the application and refresh this and with that we have the dark nav bar with us and this is a look that I want it may not be the look that you want and CSS has you know infinite uh different things that you can do with your website so you can play around with CSS and see if that works for you [Music] so once the nav bar is done that is it has changed its color to dark we no longer can see the nav items over here so the first thing we want to do is to change the colors for the nav links and instead of text dark we'll use text light and see if that makes a difference so we will use hot reload and that has changed the color of the nav link to White and that looks good now after this we want to also change the uh how content is placed on the screen so if I come back to the application this is the body section over here in the layout and render body is responsible to show different content from different views inside the layout page over here and as you can see we have a container class which pushes the content inside from the sides but we want to give that functionality to the page themselves so I will remove this class from here and we will later on add this class to individual pages that we want to display and along with that I also want to add a new item which will help us to create the crud structure for the admin functionality and that is a drop down so I don't know how to create a drop down in bootstrap so I will use the bootstrap website and open get bootstripe.com I will go to the documents and I will search on let's say a nav bar and inside the nav bar we should have some example with a drop down so I would need something like this one and I will just selectively copy and paste that inside my website so the drop down corresponds to this Li over here so I will copy this and paste it back inside my website use Ctrl KD to reformat the HTML so Ctrl and K and then d after that we want to rename this drop down I want to call this the admin functionality so I can say this is an admin and instead of four Lis like four options inside the drop down I want to just make use of one and that will be to add a new tag so that will be the first thing that we will do with our controllers and Views and the database is to create a new tag inside the tag table that will be for a next section but for now we will create this list item and to rename this I will say this is ADD tag with that change and hot reload your application if I come back and see that we have a new admin nav item over here and if I click on that we have a link of add tag so we have enough link which can go to a different page but the href of this one doesn't lead anywhere but we know we are going to create a new controller in the next lecture and we are going to work on the add functionality so we will change the href in the next lecture in this lecture we will create a new controller which will be responsible to let the admin add a tag for our blog application using this controller we will perform crud operations but we will start with saving a single tag in the database first and for that we will come back to our application and we will create a new controller inside the controllers folder so we will right click on controllers add a new controller from the controllers template I will select the MVC controller hyphen empty template and click on the add button it is asking me to give a name for the controller and as we saw in the introduction videos the controller need a suffix of controller and we have to prefix that with the name of the controller so we want to create a tags controller which is an admin functionality so we will have the controller name as admin tags controller dot Cs and with that name I will click on the add button it creates a class file for us and as you can see controllers are also class files but we know and we inherit from the controller class which comes from the package microsoft.asp.net core dot MVC so this way the application knows that this is not just an ordinary class this is a controller class and it handles the user's requests as part of the scaffolding the class has been given an action method so we have the public eye action result which is a response type of this action method the name of this action method is index and it returns a view now we will rename this method because we want to add a tag and we want to display a add page so that the user can fill a form and add a new tag to the database and in our application when we saw the URLs this is our base URL this will be the controller name which is admin tags and then we want to open the add page so instead of in the index we can rename this to add and this becomes our action method this is the get method by default but we can explicitly say that this is the HTTP get method in square brackets we can mention this as HTTP get [Music] and with that we have the get method for the add action method over here and we want to create a view so that whenever the user enters this URL it goes to this controller over here and then it goes to the add action method and when the action method is called it returns a view so we would like to create a view at the moment there's no folder called admin tags so a shortcut to create a view is to right click on The View itself and go to add View select the razor view empty and click on ADD and before giving a name let's pay attention to this folder that got created inside the views the naming Convention of the folder is the same as the controller name and every action inside the controller will have its own CS HTML file we will have to rename this to add which is the name of our action method over here so the name of the view always has to correspond with the name of the method so with that change I will click on ADD and now when we don't specify a name for a view it automatically by default looks at the name of the action method inside the views folder and the shared folder as well now we will have to test this and run our application to see if this URL corresponds to this action method and in turn gives us this view so let's give it a heading as well so that we can see that the proper view was called we will Define a H1 tag but before that we will create a div so just simple HTML the div will have a class which is bootstrap class which is BG hyphen secondary which is a background of color secondary it will have a BG hyphen opacity of 10 and a padding on the y-axis of 2. so all these again are bootstrap classes if you want to know more about bootstrap you can go to their website and learn it inside this div we will have another div which will be a container padding so div and this div will have a class of container and finally inside this div we will create an H1 tag so H1 and the heading would say add new tag this is the page heading and we will just mention that this is admin functionality not that we need to but we can just do it so that it's displaying on the screen so with those changes we want a link so that we can click on the link and it goes to this URL and in the shared page when we open layout.cshtml file we created a drop down which is here and inside that we have the add tag drop down link but the href doesn't go anywhere at the moment so we will change that instead of the href we will use the tag helpers we will use ASP hyphen area is equal to empty because we don't have any areas as of now after that we want to call the controller as you can see after the base URL we want to call the controller which is admin tags so I will call ESP hyphen controller and I will give this a name of admin tags I will put this in a new line so that it is more readable [Music] so we have the controller which goes to the admin tags controller and now we need an action which points to this action method so we will come back to layout.cshtml and add another tag helper ASP hyphen action which is ADD which we just created so using this navigation link this should go to the controller action method and should give us this view so it's time to test all of this I will run my application the application is running and we want to go to the page that we just created using the navigation so if I go to admin and hover over the add tag button you can see on the left hand bottom corner it is displaying the URL that will load when I click on this URL it will go to localhost 7100 forward slash admin tags which is the controller name forward slash add which is the action name so if I click on this one it correctly loads the controller action and the correct view which has the tag The Heading of the add new tag admin functionality it is also a good time to remove this margin between the nav and the heading so that there's no white space over there so let's come back to our application and inside the layout file on the nav we have this margin bottom of three so I will just take it out and press save and hot reload the application when the application reloads you can see that the white space has now gone so now we have a completely blank page to add a new tag in the next lecture we will go ahead and add a form to the admin page so that we can capture the details from the user and save it to the database [Music] in this lecture we will go on and create a form to capture the details so that we can take the user input and create a tag in the database and before we do that we will also add a container to this navbar so that it aligns with the body so that is a quick fix I can go back to the application and the header needs to have a container instead of the container fluid I will just change this to container and this will push the content of the nav bar to align with the body over here so it's refreshing now and it changes the content and padding on the sides so now that we have that defined we can come back to our application stop the application and create a new form inside the add.cshtml where we have the heading already but we have to create a form element so that we can capture the details from the user to do that we will first create a div element and give it a class of container and a padding on the y-axis of 5. inside this div we will create the form element so a form for now I can get rid of the action attribute so I will just keep the method is equal to post and inside the form I will create different elements and again this we are using bootstrap to create our form and form elements so you can easily go to the bootstrap website to create your form elements from here I will create a div and give it a class of margin bottom hyphen 3 so every element will have a margin below them inside this div we will have two things one a label and the other thing is an input element now for the tag functionality we need to capture these details we need to capture the name and the display name because the ID will be generated automatically by the application and the user will not be able to input the ID so if I come back I want to create the input element for the name first so a label the label will have a class of form hyphen label [Music] and the name of this label will be name after that we will have an input element this will be of type text and I can get rid of the name attribute for now and the class of form hyphen control I can also get rid of the value attribute so with that we have one selected we have one input and that is the name we also want to give it an ID so the ID of this input element will be name similarly we will create a input element for the display name so what I can do is I can easily copy this div and paste it below I can change the label to say this is for display name and the ID for this will be display name in camel case we have two elements let's see how they look on the screen so I will run my application the application is running so we will navigate to the new page which is the add tag functionality and you can see that below the heading we can have we can now have the form with two elements the name and the display name and we would also need a button which is the submit button to submit these details to the controller so back to the application we would need another div so a div with a class of margin bottom hyphen 3 and inside the div we will have a button which will be of type submit so type is equal to submit and the classes for this the visual Aesthetics we will have two classes BTN and BTN hyphen dark and the name of this button would say submit or you can say it as save as well so with that change and hot reload I will come back and wait for the browser to reload the application and now we have a submit button to submit this form to the controller as well in the next lecture we will see how we can use the submit details or submit this form and capture the details behind the scene in the controller and how we can use that data to save the data to the database in this lecture we will learn how to submit forms and how to read data coming from these forms in our code behind class that is the controllers there are two ways to submit and read data and that is either by reading the incoming request and read values one by one and that is a very manual way of doing it and the other way is to dynamically bind the values to an object and read that inside the controller the second technique is called Model binding and that is the preferred approach we will look at both the techniques to read data inside the controller but finally we will follow model binding to read the data from the form and capturing it inside the controller we are back inside our code and we have the add.cshtml which is the view and the admin tags controller which is the controller for this view we have that in the controller we only have the get method which is responsible to display in this form when this link is clicked or when it reaches this action method after that to submit this form with these two input element details we have to create another method in the admin tags controller so that we can capture that and that will be the HTTP post method because when you submit the form it goes to the post method so let's create another action method inside this controller so public eye action result and that can be the same name for now and I will call this ad uh let's say or submit tag or save tag and we can come back to the same name but I'll show you why and the this will be the post method so we will have to annotate that with the HTTP post keyword so HTTP post and we now have to return a view because it's throwing an error because it has to return an i action result so let's say I return the view and I can't return the view just with empty because submit tag is not a view created over here so I have to explicitly mention uh return the add view over here so it will go to the add View and then uh you know render it after that we have to capture the values over here in this method when this form is submitted so I will put a breakpoint over here and we have to do a few things in the Cs HTML first we have two input Elements which we have to read one is a text and the other is also a text so the first thing we will do is to give them the name attributes or the name properties so name attribute is equal to this is actually called the name so I can actually mention this name is equal to name and this is the display name so I can say name is equal to display name so we have given both these elements the name attribute so now we can come back to the controller and we can use this method request so this is the object request dot form and using this we can capture the value of the input element using the key and the name for this input is the key and this name for this input is the key as well so using the name as the key I will first say the first input element is with the name of name itself so read that and store it in a variable so variable name is equal to this and we will create another variable which is for the display name and that will be request dot form and using the square brackets giving the key this time the key will be display name as we have given in The View and close that so now when we submit this form it should come to the submit tag HTTP post because I will now give this action name as add because it has to reach a action name and that has to be add because this is the add CS HTML so when I submit this it should come here and it's we should be able to read the values coming from the form so let's run our application and see this in action the website is up and running so we will go to the add tag page and we have the two input elements so I can just give a value over here let's say this is the HTML tag and the display name can be HTML blogs or something like that so I can submit this and because we have a breakpoint in the post method over here I will go one step at a time so I will press F10 to debug this so F10 and F10 again so that I can see the value over here so I will hover over the name property and the value is coming as HTML you can also just you know select this and add this to the queue so add watch and the value is coming as uh HTML and we can do the same thing to display name so select it and add watch as well so the value here is empty at the moment but once we come after it so F10 again the value comes as HTML blocks so the same value as we typed in the form in the HTML form so that way you can capture all the values coming from a form uh manually using request.form but as we discussed this is not a preferred approach we should be using model binding which is a much easier approach and the preferred approach as well so let's get rid of this code and come back to model binding so I'll stop the application I will also get rid of these two lines because we don't need it and also I can get rid of the name attribute because we wouldn't be needing the name attribute we will be using another tag helper that asp.net provides us out of the box so to use model binding we have to create a model so that we can bind that to a view and using that binded model when the submit button is pressed and the form is submitted the model completely as a whole comes together in the action method over here and then we can just read the properties of the model so let's see that in action as well so in the model I have the domain folder I will also create a view models folder because this new model is not a domain model it's not an entity it is just for the purpose of reading our forms and displaying the forms as well so on the models I will right click and add a new folder and I will call this view models so press enter on that and I will right click on this view models folder to add a new class and the name of the new class in our case because it is a request to submit a tag or add a tag I will say this is the add tag request so adding a tag and it's a request object so a request and I will click on ADD [Music] so we have a new request model inside that we only need two properties and the two properties are the same as the input elements we have over here so we need a property to capture the name and we need another property to capture the display name so we have we know that these both are of type string so I will create two properties p r o p double tab this is of type string and the name can be name for the first one for the second one we also have a string property and the name would be display name and these are the only two properties we need for the tag domain model or to submit a tag to the database so using this request we can now come back to the controller or not even the controller we should go back to the view instead first so that we can bind this model to the these two properties over here so inside the view I can get rid of the comments over here and I want to create a model so I will start with this at model and this is a convention to Define that this is the model for this View at model now I will try to go and mention this model over here so I will start with the namespace which is bloggy dot web dot models because it is in the models folder Dot and I should have view models over here so view models dot add tag request so using the statement over here I am mentioning I am trying to tell asp.net that this model is the model for this view over here and because we know that this model has two properties name and display name we should be able to bind these properties to these two input elements so let's do that one by one for to bind a property into a view we should use the tag helper ASP Hyphen for is equal to and inside double quotes we can now directly mention the name of the property because the model is binded to the view we can now mention the property name directly this is the input element for the name so the property is name as well and it also shows in the intellisense over here similarly for the display name we will use the same tag helper we will say ASP hyphen 4 is equal to and you guessed it right it should be display name and when you start typing intellisense automatically sees that the model has been binded to The View and the only other property we have is the display name property so now that we have binded these two properties to the input elements when somebody when a user submits this button or submits this form we should be able to capture this model inside the post method so the model would be coming as a request as an input parameter to this action method so we will say the input parameter here is the add tag request coming from The View models folder and here's the using statement for that and I can give it a name I can give it the same name add tag request and in here I can do the same thing I can create two variables where name is equal to add tag request dot name and display name [Music] is equal to add tag request dot display name so I'm just reading the two properties of the add tag request over here I also have a breakpoint so when the uh when the form is submitted it should stop over here and I'll just go one by one also now that this method is completely different from the get method I because of the parameter coming over here I can rename this back to add and I don't even have to explicitly mention that this is the action name for the add method so if I remove it visual studio and asp.net are still happy because they are able to identify the difference between the add method and the add method over here because this has a different signature with the parameter coming along previously because we were reading the form we didn't had any input parameters so it was treating both of them as the same get method so pay that in mind but even if you want to add a special action name over here that doesn't harm you you can still go on and use this convention as well so I will start my application to submit the form and read the values through model binding the application is now running I will go to the add tag page and we'll just submit the same values as we submitted last time so HTML and display name as HTML blogs and if I submit it it has again come back to the the post method over here and we have the name as null display name as null as well so I will just go one by one the name value changes to HTML as you can see in the watch over here and when I go over this statement the display name property is also changed to HTML blogs and the same value that we submitted from the HTML form so you can see if I hover over this object as well the display name and the name properties are filled with values that we supplied from the user interface so now that we are able to read the values from the form inside the controller uh in the next lecture we will make use of the DB context class that we created inside the data folder and we will make use of it to use Entity framework to save our tags in the tag table that we created we have built a form which we are able to submit and send back values to the controller in this lecture we will use this data that we are sending back to the controller and save this data to the database with the help of Entity Framework we will use the DB context class that we created and we will make use of it to talk to the database using Entity framework and DB context class will do all the heavy lifting for us and save our changes to the database let's see all of this in action we are back inside our application and the first thing we will do is to clean up these two lines because that was only for display purposes and to show you that the values are coming back inside the controller so now that we have this post method ready to get a add tag request from the UI we have to make use of the DB context to save our tag to the database and if you remember from the last section we had injected our DB context which is in the data folder over here and we had injected that in the program.cs file so over here we have injected our bloggy DB context which is getting the connection from this connection string and we have injected that to the services of our application so it's being injected in the services container so we know that we have supplied everything to dotnet so that we can make use of bloggy DB context it's now time to use and access the services container and use it inside our controller so the way to use this is called Constructor injection so we will make use of Constructor injection and we will call blocky DB context over there and asp.net is smart enough that it will provide us the correct instance of the DB context which we can use so to do that we first have to create a Constructor and the short form or shorthand of this is ctor and press double tab and this is the Constructor for this class or the controller and as we discussed we are going to use the Constructor injection we will inject the bloggy DB context the same we did in program.cs file we will inject it as a parameter to this Constructor so I will write bloggy DB context and it comes from the data folder so make sure you have the using statement over here and I will give it a name which is blocky DB context now it's coming as a parameter to this Constructor but I can't use this parameter inside the add method so I have to create a private variable which I can use in the get or the post method or inside the class anywhere but I can't use this so I first have to create a private field so private the field is of type bloggy DB context and name of this field would key let's call it underscore blog EDB context so I will copy it with the underscore and now I will initialize this field from the value of logi TV context coming over here so I can say underscore bloggy DB context is equal to block ADB context so it's taking the value from here and inserting it into this private variable and now I can use this private variable over here so visual studio has no problem uh in me using this private variable but it won't let me use this variable because that is just in the context of this Constructor another way to create and initialize this private field is using a clicking on this input property over here so input parameter and press Ctrl dot Visual Studio suggests you to create and assign this field as you can see the suggestion it is also creating a private read-only field and the name is the same as bloggy DB context and it you can just then use blocky DB context so either you can create your property yourself using the underscore or you can use this shortcut and the shortcut is again press click on this input parameter over here press Ctrl and Dot or control period you get the suggestion and then use create an assign field bloggy DB context so now you can use this private field inside the add method or the get method as well [Music] so now that we have injected our bloggy DB context we will go ahead and use it to save our tag to the database so the way to use the bloggy DB context is we will use its private field then go to the table which is if I open blog ADB context we have two DB sets one is for blog posts one is for tags and at the moment we are just dealing with tags because we want to save tags to the database so I can access the tags property from the field over here so let's say I have dot tags and it's giving me suggestion as well and it has a add method so using the add method I can provide it a tag entity which it will save to the database so using the add method if I open the brackets it is asking for a models.domain.tag entity so I have that domain I just want to create it and then I can supply it to the DB context over here so because it needs the tag entity I will have to convert this ad request into a domain.tag model so I can just easily do that I will create a new variable so variable called tag is equal to new and I want to use the domain model so tag which is coming from bloggy dot web Dot models.domain and the using statement is on the top over here then I can just open and close brackets and assign the values from TAG request inside tag so there are three properties which is the ID name and the display name that this blog posts are just a navigation property which you will look at later on so just three properties for the tag I won't be assigning the ID because the application should should generate its own ID so I won't be supplying that so the name is coming from add tag request dot name and visual studio is smart enough to understand that there's a name property inside this model as well do you want to map it to the name from the tag and that is correct and the second property is the display name which also comes from add tag request so that is mapped as well and these are the only two properties that we wanted from The View as well because there's only two input elements name and display name in the controller we have mapped these two properties to the tag model over here now we can supply this tag entity or model into the add method and bloggy DB context should be able to create this tag inside the tags table in our SQL Server database so first of all I'll just do the commenting that we are mapping the add tag request to uh the tag domain model and we are doing that so that we can give the tag model to the add method so using block ADB context we have added that but if you run the application and if you submit the form nothing will happen as of yet because there needs to be another command which is bloggy DB context dot save changes if you don't write this command bloggy DB context or any DB context will not save any changes to the database this line is crucial so that your context can actually talk and save the changes to the database as well and after you save the changes I can redirect you back to the get method or later on to another action method but let's just use the view for now so we have our code ready and this is all we needed to save a tag inside the database you can see that blog ADB context is handling everything from the connection to the instance and everything with these two lines itself so we just had to map our domain model so it's now time to run our application to see this in action [Music] I will navigate to the add tag page and I will just use the same values HTML and HTML blogs and if I press submit I have a breakpoint back in the application so I will just go one by one I don't need the watch now so I will close it so we are mapping the add tag request to the tag model and the tag model should now have the HTML blocks as a display name and the name as HTML you can see that the ID is still a default good so no value over here so the first thing blog ADB context is doing is to add a tag and it's attaching it but if I come back to SQL Server let's open SQL server and see if we have a tag in the table or not so I'll select on the tags folder or the tags table you can see that there's nothing in the tags table as of yet and I will come back to visual studio and then execute this line so F10 on this and it comes to the view line so now let's go back to the SQL Server again and execute the same statement and now you can see that the name and display name the same ones that we provided in the form or the UI have now been inserted into this SQL table and Entity framework has also given them a unique identifier a good so that we can prime I mean identify what the ID is so this is the primary key as well of this table so we can uniquely identify what the ID for this name is so now that we have this I can just press continue and it will just go back to the view as well so we can see how easy it was for the Entity framework and DB context to save our entities to the tables in the next lecture we will try to read these entities back from the table and would display it in a tabular manner on the web page if you have reached this far I'm sure you are liking this video and I guarantee you that you will love the course even more please head over to udemy by clicking on the link in the video description to get this full course on a great discount hope to see you there I will see you all in the next video

Channel: Sameer Saini

Views: 68,564

Keywords: asp.net mvc crud, step by step tutorial on asp.net mvc crud, asp.net mvc, asp.net mvc tutorial, asp.net core mvc, asp.net mvc project, asp.net mvc tutorial in hindi, asp.net mvc project start to finish, .net 6 mvc, asp.net core mvc 6 tutorial, asp.net core mvc sql server, asp.net core mvc crud operation with entity framework, asp.net 6 mvc, asp.net 6 crud, mvc crud operation example in asp.net c#, mvc crud operation using entity framework, .net7 mvc, .net7 mvc crud

Id: jhj9ouy7x1g

Length: 115min 45sec (6945 seconds)

Published: Fri Mar 24 2023