Full CRUD Operations with Drop down List in ASP.NET Core | CRUD Application with ASP.NET Core

hi friends welcome back in today's session we are going to perform crowd operations with drop down list for that I am going to create a new project here I am going to use Visual Studio 2022 I'll create a new project here I am selecting asp.net core web application with MVC here I have to provide project name so this is my project name and in this location I am going to store my project here I am selecting.net framework so in my case 7.0 is latest one so I am selecting latest Standard Version I'll create the project here inside my solution I have multiple project so this newly created project I am making a starter project right click on this set as startup project here we are going to create two different models one is category another one is product model category will be used in the drop down list right click on the models right close this is my model name here I am going to define properties related to category model ID will be primary key here I am going to create another model for product add class here I will define the properties related to product table this is going to be primary key here I am adding missing name space so in category also we have to add the namespace for data annotations this is product name price quantity and here I have to define the relation between category and products table for the delegate another property here I am going to store category ID here I am going to add category table category ID will be foreign key for that I am going to Define as foreign key here I have to pause table name that is categories now we have created category and product database models to add the FDB context for that I'll create a folder and make it as data access layer so inside data access layer I am going to create a class for appdb context here we can provide any meaningful name this will be inherited from DB context here we have to add the Entity framework code we are going to use the Entity framework core code first approach here for that we have to install the framework right click on the project manage nuget packages here we have to install Entity framework core related packages here I am selecting Entity framework core I'll install it then I need design we need tools also because we are going to use the code first approach to migrate the database we need tools package also we need SQL Server we are going to use databases SQL Server so we have to install this package also here I am going to add Entity framework core package reference select the DB context here I am going to access quick actions from here I am going to generate a Constructor with options here I am going to create DB set for categories and products so this DB context will be used to communicate between our application and database server now I'll go to the app settings.json because we have to Define our connection string inside app settings.json for that I am going to open app settings.json file I'll add connection string here here I am going to Define connection string name my DB connection this is the connection stream name here we have to provide server name then we need database name then we have to define the type of authentication we are going to use the windows authentication for that I am going to make it as Integrated Security as true then we are going to use the SSR for that we have to enable this flag trust server certificate as true so here I can get the server name from my DB server so this is my SQL Server I am going to connect to my SQL Server so this is my server name and here we are going to define the code first approach for that I have to provide the DB name so I'll give the DB name as so this is my DB name which will be created by Entity Framework so now I will go to program.cs class so I have to add this connection string inside my program.cs class here I am registering my connection string add DB context here we have to provide our database context name so this is my appdb context name I'll configure here to pause options here so here we have to provide the namespace it is available in data access layer use SQL Server here we have to provide connection string name which is configured in app settings.json this is my connection stream I'm going to pause it here now I can migrate my database tables to the DB server for that I am going to open the package manager console first we have to add the migration it is going to be initial in our solution we have multiple projects we have to select the default project here so you can open the drop down list from here we have to select our project this is our project again I am going to run the migration so this time build is succeeded now we have to update the database so the command is update database so DB migration is completed we can open our SQL server and we can check it I'm going to refresh the databases here so this is the DB which we created cloud with drop down list I'll open the tables so we have created two different tables one is categories another one is products table here we can see the columns ID and name four categories for products we have ID name price quantity and one foreign key category ID is available we have completed basic setup of our project to perform crowd operations for these categories so I am going to create a controller here right click add controller I am going to select MVC controller with views using Entity Framework click on ADD here I am going to select model category and database context we have to select here and I'll name it as category controller click on ADD so by using scaffolding it will generate the views for us so category controller has been created with all the methods this is the method which is responsible to read the data from the DB and it's going to bind into index View and this is the details index method and this is the create method to get the blank form and this is the method which is going to post the data from the view to database and this is the edit method which is responsible to get the data under displaying in the edit form and this edit post method which is going to post the data while updating the category details and finally this is the delete method it is a get method and it is going to get the data based on the ID and it will be displayed in the form and this is a post method to delete the data from the database so this is the method which we are going to check whether category is available or not with the specified ID so this is generated by the MVC and if you see the views also it will be generated all the views like create details delete edit and index so we will run the application and we'll see how the output is showing in the category master so I'll run the application so I am going to call category controller from the your so this is the category controller index View So currently we don't have any records in the database execute we do not have any data here I am going to create a new category here I will name it as mobile and I will create here so this mobile category has been created and we can edit here back to list and I am going to create one more category so all the categories has been created and we can check the details by clicking on the link you can edit from here back to list I can delete it here click on delete it will ask for the confirmation if I click on delete the data will be deleted from the DB you can go and check in the DB also execute query So currently we have two categories mobile and TV we will create another category here laptop create category Mastery is ready now and go and do some changes here here we will create a hyperlink for category master we'll copy this list item here we have to change the controller name here action will be index so this title will be category go to the category and I'll do some changes here so instead of hard coding this index I will take it from my title let's create new button we will assign the style I am going to add the bootstrap style here here also I am going to make it as I'm adding margin top here likewise we can add it for delete also so we will run the application now I can click on category hyperlink here so all the categories are displayed here click on edit this will be displayed back to list click on details so detail is showing here click on delete so once it is confirmed this red card can be deleted from this form back to list so now our category Master is ready now we can display these category details in the product screen to create product master and we are going to consume this category inside the drop down listed product master this is the categories table we created three categories here and this is the products table which we have relation with the category table today we are going to perform crowd operations products table so this is the project which we created in last session so here I am going to create a controller for product right click on the controllers I'm going to create a controller I am going to select MVC controller empty I am going to name it as product controller so this is our product controller first we have to fetch the data from the database and we have to display in the index view for that I am going to initialize FDB context which is available inside the data access layer I am selecting the appdb context I'll go to the quick actions I am going to generate the Constructor for my appdb context now I can communicate with the database by using this context here I have to read list of products from the database for that I am going to use context Dot products which we will get it as list also we need categories along with the products for that I am going to use the eager loading for that I'll use include method here I can call categories also along with the products table because we have the relation between these products and categories I will go to the models and I will show the products model this is product model which we are using categories as reference here and foreign key reference used for category ID so now while displaying the products so we have to display the category name also for that I am going to use the eager loading and I will call the include method to get the categories also along with the products here I am going to pause the products I'll right click on the index action method I'll create a view for that I'll create empty view add here I will call model so we have to call the product model here I am going to define the title for index View so I will make it title as product list here I will display the title so I can reuse this new data here I will add one paragraph and I will add the hyperlink for creating a new product here here I have to define the action I will make it as create we have to create the create View I'll add the class here so this boot substance I am applying for this hyperlink and here I will name it as create new product here I am defining one table to bind the product list and add the bootstrap class for this table here I'll Define the table headers table row first I will display the product name here copy this then I'll display the price quantity and finally I'll display the category name here so category name we can get it from model dot categories dot name so we are going to display the table headers category name so after adding table header we have to bind the table body inside table so before binding we will get the list of products here we have to validate model is contains any data or not for that I am going to add if condition here I will validate model here model should be not equal to null and then model should have any data then only we are going to bind these records otherwise we will display message here there is no records available in the table okay here we will get the multiple records so we have to use the for each Loop so we will get the products from the model here I am going to create table row inside this table data I will take it and I'll bind with HTML we'll take the model here I'm going to use the Lambda expression product dot name first I'm going to copy this table data price quantity we need product price also quantity then we need the category name here which we will get it from categories table here I am going to add one more table later so before that I have to add here table header I will make it as action here we are going to create action buttons for the edit and delete make it as edit here we have to provide the route ID that is parameter we have to add here I will make it as ID here ID and I'll add the class here like this I need one more button for the deletion so we have to create this action method for edit and delete also so if there is no data we have to display the message here so that I am going to create one row I'll add the call span here we have to take the number of columns available we have five columns I'll spend the file and here I will display the message like so this is the message which we are going to display when there is no products inside the table I'll save it run the application now so before that we will create a now item for product inside the layout page copy this so this is going to be product controller action will be index and the title will be product I'll run the application you click on the product nav item so it's showing products not available in the database and products we don't have any products inside the table so we will try to add one record from the back end I'll edit the table product name I will enter Samsung the mobile category will be one and price avoided this now we will reload the page it's showing and the category name also showing perfectly and we have to modify this here already we have the product name and this one we will make it as category for that I'll go to the models category here we can change the display name inside the model here we have to add the missing namespace component model should be run the application now it is showing correctly this is category mobiles category now we have to work on create new product I'll go to the product controller again here I will create a action method for create public create so this is going to be get method here I will call written View because this is going to display the blank form for the product creation I'll create a view here right click on the create action method add View I am taking empty view add will make it as create here we have to design our view for create here I'm going to call model product model and here I am going to add the title here I'm going to add title this title will be displayed inside our form add one horizontal row after the title here I will add form this div I will move it inside the form I'll add the action here it should be create add one div here I'll add Style margin bottom two inside this I'll add one label is before so I'm going to add name here you can make it as class control label here I need text box for that I will take the input also we have to display the validation messages here so I'm going to copy and reuse this price then product quantity and here we need product categories for that we have to load the categories also here so we have not loaded categories I am going to create one private method here this is non-action method so categories will be available inside the categories table here we will get the list of categories and I am going to save this inside the view bag I'll make it as categories so I'm going to convert these categories into select list because we are going to bind inside the select list here we have to post categories then it required data value field data value field will be ID we can check inside the category so this is the data value field and this is the data value text this I am passing here you have to pause it as a string then we need the data text field this name so here we are reading categories from the categories table and we are storing inside the view bag and here this categories we are converting into the select list because we are going to bind as a select list inside the product create page so now I am going to call this load categories inside get method of create so now I'll go to the create here we can add the select list items here I'll add one more div I'll add a label here so I'll copy this here this is not required here I am going to make it as category then we are going to take the select list here here I will make it as as before category ID and we have to define the class form control this is a bootstrap Style and here we have to add the ASP items so which we can take it from view back that categories here I can Define default option value so this is the default select category value I added inside this select list finally we need button to submit the form and add one div here and add input type will be submit value I'll make it as create add the bootstrap class now design part completed now we have to create another action method to post the data so I'm going to copy this here I'm going to create another action method for create this is going to be post method and here we will receive the data as model here we have to add the namespace for product which is available inside the models now I am going to add the data to the database product store right we have to pass the model here save changes so once it is successfully saved we have to redirect this to so I will send it to index View we'll run the application now so there is some error it should be named I am going to click on this create new product button it's product creation form is loaded and this is text boxes and this is categories which we are loading from categories table we will add one product here look at that create so product is created and it's redirecting to index page we will try to create another product here so product is created and it is redirecting to product list here it is showing the categories also now we will perform the edit operation for that I am going to create one HTTP get method here we have to pause the primary key that is product ID we have to pause here we have to check ID is valid or not here we can display the custom message also if required so just I'm pausing not form or else here we can get the product based on the product ID here we can pause the primary key that is ID so finally we will assign the product to The View also here we have to load the categories for the edit purpose again I am calling the that private method which we created for loading the categories now we will create another post action method to post the data from the edit form here we will get the data in the form of model it is product model here we have to check whenever we are posting data we have to check model State validation if model state is valid then we have to submit the data and the voice it will return to same thing we have to implement inside the edit method also we are going to update the products table we have to assembly model finally we have to save the changes here once it is updated we are going to redirect into index View now we have to design the edit form further right click add View I am selecting the empty laser view add I'll name it as edit here again I am calling model product model here I am going to add title update product I'm going to display inside my phone here I'm going to add one form I had to define the action here going to be edit so I'll copy the content from the create so we now need to design all these things again I'll copy this I'll replace it inside the edit form here I am going to add one hidden field to store the primary key that is ID input type will be hidden ID so rest all the things will be same and here instead of create we have to make it as update these Styles I will change it to success run the application I'm going to click on edit so there is a error here cannot apply index to an expression okay here we missed something edit so this should be viewed data it's not the view back I'll run it again here we will check the model data categories is null category ID everything is available I think here model state is having some errors validation status invalid because at model because that categories are empty that's why it's showing this header where we know need of that categories so we can exclude the categories from the model here I'll make it as modal state Dot remove here I can pause that categories so that we will not have any address for the model state now again I'll debug this these categories we will use the burning purpose only we are not going to use it for post the data so we can exclude from the model State validation I click on products edit so here instead of mobile I'm making a Stevie update so this time model state is valid true so it's going to update the data it's updated and it's redirecting to index View so this one also change it to TV so the data is updating perfectly now we have to implement the delete operation here that we will create a action method for a delete also we have to pause the product ID so I can take it from here the same code we are going to use it here I'll use it and this time we no need of categories we are not going to display the drop down list directly we will bind the data here and I'm going to use another method for post data for the deletion here directly we can pause the model itself I'll pass product model and here I can add action name also I'm going to use delete as action name finally once it is deleted I am going to redirect this form to index View here we have to pass the model finally we have to save the changes so now we have to create view for deletion add View I am taking empty razor View here for delete also I am going to copy it from edit it will be similar to the edit I'll paste it here here I will make it as delete product and here we have the ID and this action will be delete and here we should not allow user to edit the data so I'll make it as read only so for all I'll make it the same thing so everywhere I am copying read only here I am making as disable I'll run this so also we have to do this will be delete and it should be Danger this time changing the button color here currently we have three different products so we are going to delete the product now I'll run the application I'll click on this delete button here we have disabled the edit option so this category is not selected we will check this we will remove this and we'll check it so these categories are not loading so here this is not the issue while calling this delete get method we have to call the load categories also I am going to call this before binding the product I'll run the application now first we are going to load the categories and here we are filtering the products based on the product ID so in this we will get the category ID also so based on the category ID the drop down item will be selected inside the drop down so I'll open the products now click on delete so this category has been selected here so just this is the deletion form user can verify the data and here user can delete click on delete this product has been deleted you will check the database earlier we had three products now we have only two products I am going to delete another product also delete here we will create another product so product has been created like this we can use the drop down list inside the hp.net core application and we can perform the crowd operations that's it for today if you like this video please like And subscribe to my channel thanks for watching

Channel: CodeWithGopi

Views: 3,242

Keywords: .net core, asp.net core mvc, bind and access dropdownlist value in asp.net core 6, bind data to dropdownlist, bind dropdown in asp.net core 6, codewithgopi, crud operation in mvc 5 using entity framework, database connectivity in dot net core application, drop down list in asp.net with database, dropdownlist in asp.net core, dropdownlist in mvc, entity framework core, how to add entity frame work in dot net core 6.0, how to update dbcontext model in asp.net core application, mvc, sql

Id: F0ASEdodBEM

Length: 60min 11sec (3611 seconds)

Published: Tue Jun 13 2023