Cascading Dropdowns in .NET Core (.NET 8)

foreign [Music] if you want to learn cascading drop down using MVC you are at the Right video my name is progen and welcome to dotnet mastery if you are new to the channel make sure to hit that subscribe button that way you are notified whenever I publish a new video without wasting our time let me show you the application that we will build here we have two drop downs we have category where once a user selects a category the product drop-down will be populated so if I select main course I have the product that have category main course dessert we will have the corresponding product it will be a quick video and let me get started with programming from the next video let me create a project here and we will have to select the MVC template I have that here I will call that cascading MBC demo let me create that I will use the.net 8 here and authentication I will use individual accounts that way we will get Entity framework core already configured for our project with that let me hit the create button and wait for that perfect project has been created and we should have the areas with identity if we examine the data folder we have the application DP context here now we want to create category table and the product table we will have to create them in the models folder right click add a class for category and we will have product inside product we will create three columns ID will be the primary key we will have name and price we need to create a mapping table for category and we need the foreign key relation so let me create category ID and we will have a navigation property for category where we can Define that category ID is a foreign key for this category table even if you do not Define that it will automatically do that because the name here is category ID which is basically the model name followed by an ID here next we need the category there we will create int ID which will be primary key and string let me call that category name we can use the required data annotation for category name as well as where we have the name here perfect that looks good with that in place let me go and add them to our DP set we have that right here so we will have to create a DB set for category and the table name that we want to give in the database let me call that categories I will do the same for product we will have a DB set on product call that as products perfect we save that and then if we examine the app settings.json file it already added a connection string let me make the database name a little simpler asp.net hyphen cascading MVC demo let me see if the server name I am able to connect from SQL Server let me try to connect here and if we paste the local DB Ms SQL local DB I am able to connect there so that looks good with that all we have to do is add a migration I will call that add category and product and with that it should create both category and product table let me do update database here and let's see categories it is creating the ID Products perfect it has that and we have the primary key and foreign key relation migration is complete here if I refresh the database perfect we have the asp.net cascading MVC demo and there we will have the identity tables along with categories and products perfect let me continue from the next video now on the tables here what we can do is careful the grud operation so in the controller here right click add a controller and we will select MVC controller with views using Entity Framework for the model here let me select category DB context we already have that application DP context we want to create views name is categories controller let me modify that to be category controller and scaffold that that will basically create all the views for Grant operation on category perfect it is all done you can see it is using application DP context and we have all the pages here that looks good let me pin this here in the views we have category and we have all the crud views that looks good let me scaffold the product as well controller with Entity framework model class will be product this time and let me add that whoops I think the controller name I forgot to check that I want product controller and not products controller it is products controller let me modify that to be product I like to be consistent and rename that great now all we have to do is in shared underscore layout let me add the link to both of them controller will be category action will be index and this will be category copy that Ally paste it one more time for product perfect let me run the application and see if that works great let me go to category here perfect create new give that a name test here and that is working delete and all the functionalities should be functional let me try to create a category appetizer and main course let me also create dessert here perfect now if I go to product well we have an error and I know why when we rename the controller the folder name we have to rename that manually with that let me run it again and perfect that works if it does not work make sure to clean the solution and rebuild the solution now when we create a new product perfect you can see it automatically displays category ID in the drop down and all of the scaffolding is automatically done by the.net team let me create the appetizer and when we hit the create button for some reason it is not working let me add a post here create let me examine the model state that is not valid and I believe it is because of the category yep the category navigation property we will have to make sure that we do not validate that category for that let me open the product model and I will say validate never run the application again and the credit functionalities should work now create new spring roll appetizer create that let me press F10 that works remove the debugging point and perfect I will create few more products here for appetizer main course and dessert next what we want to do is on the home page we want to implement a drop down for category once a user selects any category we want to populate another drop down with all the product that is how cascading drop downs work let me get started with that from the next video we need to populate drop down on the home page but for that we need to load all the categories when we are using the cascading drop down in the controller action that way we can load that in the drop down here let me open the home controller for that and we will have to add application DB context using dependency injection perfect then we have to work on the index action method right here we need to get all the categories so let me do that variable categories is equal to underscore context dot categories dot do list let me execute and populate that right now then we need a list of all the products but right now that product list will depend on which category is selected so rather than populating that we can do products is equal to new and this will be a list of product then on categories and product we will add one more entry there with the ID of 0 and category name will be select category product name will be select product now we have to pass both of the list here to our view we can do that using view back typically I am not a fan of you back I would rather create a view model but for the Simplicity of the course I am using viewpack here and let me call that products is equal to new and the list here we have to populate that in a drop down so we have to convert that to a select list or a select list item when we create a select list here we will have to pass the products and then what will be the value so ID we will get it there and the data field we can get that from name that looks good for the product drop down I will have to populate the category drop down let me call that categories and we have that in the categories name is different it is not name that is category name with that configured when we return back to the view right click go to that view here we can display the drop down let me do that inside the div here I will create a div with the class of text Center and give it a heading of cascading drop down demo inside there let me create a div with the class of row and form group and there we will add a div give it a class of column two I will copy and paste that three more times after 2 let me give it four two and four perfect here we want to display a label and I can say category ID for the next column two let me display product we don't want the ID here that looks good if I save that and go back to the view we have an error there we did not save the home controller let me do that and we will have to restart we see category and we see the product let me add some spacing there after H2 let me add padding top R4 and water also I will give margin two let's see great now padding top let me make it padding for perfect that looks good and then finally we need to display the drop down here let me do that in the next video now we need to display the drop down for category and product if I go back here from the home controller we are not passing anything to the view but in the index here at the top let me add a model which will be the product class the reason I am adding product class is there we have the product ID and we have the category ID we will use that in tag helpers right here so for the first drop down it will be a select tag with asp4 that will be the category ID let me add that class name will be form select for the drop down and let me give that an ID of category ID after that we need the drop down items which is ASP items that we have in a view back right here we can go view back dot we need the name that is categories copy and paste that here with that configured let me close the select tag and we will have to explicitly add the closing tag if I save that and go back perfect you can see it is populated but we have a select category for that we have two option right here in the select itself we can create dynamically an option like select category and that way it will be populated with that we no longer require this field let me comment both of them out here and if we examine that great that looks good now after the category has been selected we need to trigger an event that will give us all the product based on that category for that we will go back to the controller here and I will add that right here public and that will return Json so we will say Json result get product by category ID here integer we will receive let me call that category ID here based on that we want to return Json and there what we want to do is using our context we want to go to product dot where U goes to U dot category ID is equal equal to the category ID retrieve that and we will pass that back convert that to a list right here now we need to call this endpoint whenever we select any category from the drop down that way we will get the product detail for that I will go to index here and we will have to add some JavaScript so let me add a section here for Scripts and inside there I will have a script tag for our JavaScript we will add dollar document.ready and there we will call a function get product ID by category so whenever the page is loaded we will try to retrieve that on top of that we will have to call this method whenever a category ID is selected so whenever the ID of category ID is toggled we need to invoke this method again now where is that method do not worry right now we will add that very soon but right now whenever a field with the ID of category ID is changed we want to call this function let me copy that and let me create that now variable get product by category ID will be a function here and in there we need an Ajax call to this endpoint so we will say dollar Ajax here and there we need to define the URL we can use the Razer syntax here so add sign we can say URL dot action and what action method do we want to invoke if we go back here that is get product by category ID and what is the controller name that is the home controller and then we have the type here right now which is a get action but you can change that if you want when we are calling that do we have to pass any data yes we do we have to pass the category ID there category ID we can retrieve that using hash category ID dot value that is the ID we have given to our category drop down finally what we want to do is if everything is successful here we want a function where we will receive the Json response back and we will iterate and populate the product drop down before I populate the product drop down let me create that drop down here asp4 will be ID because we are in the product model this will be product ID class name again will be form select and we will give it an ID of product ID that looks good now if I save it right now and if I go back we will have an empty drop down we need to populate that we have all the result in the data here we are passing that as Json so we can iterate through that so we will say dollar on data for each record in there we will have another function basically it's JavaScript so we will call index and item it will iterate through all the product here and this is a built-in JavaScript function index will give us the index like 0 1 2 3 and item will have the product where we want to append the product it is inside product ID so let me get that dollar sign we will say pound product ID dot append and there we want to create an option with the value of item dot ID make sure you are careful with the single quotes here we will close that option and then for the name that will be inside item dot name I believe let me double check yep it will be item dot name plus we need the closing option tag perfect that looks good with that configured let me save and go back we select appetizer and nothing happens let me open the console window and we have a syntax error let me see that and of course I forgot a plus sign there with that let me go back and if I select category great we have spring roll main course well in main course you see the spring Rule and hash brown stays but it adds the new option what we have to do is we need to remove the existing option here so on success here we will find the product ID and remove all the existing option we go here perfect we see that appetizer main course and perfect with that you can see cascading drop down in action main thing here is working with JavaScript can be a little tricky but we need to call the Ajax to retrieve product based on the category ID now if you had three cascading drop down you can continue this on with more Ajax call and that way you can have category subcategory and then the product you can take that on as an assignment but this looks good for our demo project I hope you enjoyed the video and for more free content in the dotnet world do not forget to subscribe to the channel and like the video with that happy coding and I will see you guys in some other video

Channel: DotNetMastery

Views: 10,231

Keywords:

Id: qmyQRiXPClg

Length: 22min 15sec (1335 seconds)

Published: Tue Apr 04 2023