Cascading Dropdown in .Net Core / MVC using JQUERY AJAX

hello guys today I'm going to show you how to use uh the cascading drop down uh in dot net core using jQuery ajax and let me show you how it's working here so uh for example um I'm using a different department and uh it's going to show me the devices related to these uh to this department okay and when I select the required device it's going to give me the module okay and now um I'm going to show you my table have a look at this table so this this is these are the three tables okay so this is the department list and um Department one is related to DMS in the tool and DMS is related to itdms module one that's the tool ID in modules okay so if I'm selecting it desk it would show me DMS in the uh in the tool and devices and if I'm selecting DMS if DMS is selected uh it's going to show me itdms mod 1. okay and uh vice versa if I'm going to select customer care number two it's going to show me SFA and in the module uh it's going to show me ccsfa okay so um uh let's let's have a look at it once again so you can see uh if I'm selecting Finance it's it's going to show me nothing okay it has nothing it if I'm sure if I'm selecting a networking it's gonna show me nothing but if I'm selecting it desk it's gonna show me DMS and nothing in the module so unless DMS is selected module has nothing okay so uh if I'm going to select uh customer care module has nothing as device is not selected if I'm selecting SFA it's going to show me the CC SFA model one okay now what happens if we have uh two devices of the same name nothing will happen it will work perfectly fine why because we are taking the ID and not the name of the device okay so for example this um it desk has DMs tool and uh the finance has a DMS tool okay so how is it going to work let's change our tables accordingly okay let's change our table so uh and uh to this device I'm going to put another DMs and I'm going to assign it to Department Finance so Finance is how much fifth and accordingly we will also use uh module we will also have a module so for example uh this one is going to be Finance should be f i underscore DMs module one and it is related to device ID3 okay so now we have two DMS okay let's see refreshed so I'm going to see networking nothing in networking I'm going to Select Finance I again got DMS so now you can see that Finance has a DMS and it desk also has a DMs but the module will be different for the same device for itdesk it's going to give me itdms mod 1 and for Finance is going to give me fin DMS mod 1 why because it's picking up the ID not the name it's picking up the ID so here DMS is using Fifth and finance module is using a device ID3 okay so for example if if you are using this kind of example in case of your country State and a city so we can have same state names in case of countries okay in case of different countries so for example uh we have um Allah in uh Pakistan and uh we we have Punjab in Pakistan and we have a Punjab and um India okay I'm sorry I'm sorry I couldn't remember there is a city that is that has the same name in Pakistan and has the same name in India so we have couple of places wherein there there would be a different uh state but same city name or there would be um a different country but um would have a same state name in that case this thing is going to work give me a second please so uh that was all we saw like um uh so using a different departments but even if we have a same uh device or a tool name it's still using the different module because of the IDS that we are using not because of the name so even if you are using the same thing enough in case of a country State and a city you can also have multiple States or multiple cities of the same name and it will still work fine okay so let's go ahead to the program and have a look at it so um this is the uh design view uh the the razor View uh so you can see that uh I'm using select class because I feel comfortable using HTML controls so it gives you more Authority like I have more uh control over the HTML tags so when using a jQuery instead of using the ASP tags I prefer this once so you can see that uh we used a default option select in in three of those drop downs however for the first one I'm using a view bag to fetch the data from the controller and for the remaining two we are using jQuery I'm gonna show you what uh functions we are using here so inside the document uh so I'm assuming that you have jQuery set up on your program because if you are going to run a new dotnet core project a jQuery is there by default otherwise if you are using um mvco if you want to set that up yourself you have to uh download jQuery and you have to uh put it in the uh uh you have to put it in the script there is a jQuery folder uh you can add it there in your which I'll show you yeah there is a JS okay you can put the the JS file here and you can put the path uh you can link the path to your layouts okay so for example if we are looking at the Shared layout I have this one is the default.net core layout and uh it should have the scripts linked in here you can see this it's it's inside the Library lib the library folder there is a jQuery and jquerymin.js and bootstrap is all used here so in order to use the scripts inside your razer Pages you have to mention this one with the render section is saying scripts required it's not a required thing but you have to mention that in your layout so that you can use it in your CS HTML or the Razer View files now inside the script tag I'm using the functions that are required so department is the control the drop down control for um the department thing and now when I'm selecting the drop down Department um uh um I'm removing everything from the issue with um tag from the issue with drop down and from the module drop down some I'm removing everything and adding this option uh the select uh option to their to the first uh option of the first item okay and then I'm calling this uh this is the Ajax call that I'm making here and uh this is uh a get call to the user controller tool devices so if we are going to the user controller here is the tool device and here is the modules section so when I'm going here what I'm doing here is ID is already fetched formed from the uh from the jQuery and these are simple Json result um methods so it's it's returning Json result only and in in a variable name tools I'm calling my table where the department ID is equal to the ID that we sent okay so from the tools departments ID this one should match with this ID that we are sending and it's giving me data accordingly and then we are using that data in the um razor base okay so you can note this down uh the result is fetched here and the row is the data that we are using in the options okay same thing same type of function in uh module we are using the same thing in the module just change made some changes to the controller action and uh the column names okay so if we are going to have a look at the jQuery stuff here and see I'm making a small change in the department so let's say customer care see it's going to hitting the debugger and then it's uh doing its stuff I had the stops where is it okay first of all it uh cleared all the contents from the drop downs and then it added the select device and select module thing then it's trying to fetch that uh yeah it's already it has already fetched that from our controller and now it has it this the result in the result variable okay so now we will uh in using this row the second variable uh and the ID it's there okay it's uh let's remove the breakpoints I would have shown you that now let's select the tool issue with is changed now ID is to now you can see the result is fetched already and we have uh you can see this the row it has the module name in it the ID is already there so this is which is uh binding into the drop down say this so that's that's the working thing that we have here if you want to have a look at the code again so this is the code here and if you want to have a look at the controller section I can show you the controller section as well so nothing much in the controller section just uh Json results and uh we are fetching the table data in the Json result and returning it okay so that was all for this video guys uh we will be having new videos we will be having new videos in the future and stay tuned and um happy coding thank you for watching have a good day

Channel: Fired Developer

Views: 619

Keywords: cascading dropdownlist in dotnet core, cascading dropdownlist in asp.net core mvc, cascading dropdownlist in asp.net c#, cascading dropdownlist, cascading dropdownlist in asp.net core, cascading select list in .net core, cascading dropdownlist in asp.net, cascading dropdowns in dotnet core, cascading dropdownlist in asp.net mvc 6

Id: lzL6zIim1DU

Length: 13min 49sec (829 seconds)

Published: Fri Jun 02 2023