.Net 6 Cascading DropDown List Blazor Server EF Databse First Approach

hello and welcome to coding jackpot in this video we are going to see how we can develop a cascading drop down list in dot net 6 entity framework and we are going to use blazer server for that so what we are going to develop at the end of this coding tutorial is like we're going to have three drop downs country state and city so whenever we select anything in the country then based on that country selection the states are going to populate and if we select any of the states then in that state the cities are going to populate and if we change it to anything else then again the state and the city will be reset so let's see how we can develop this so we have opened visual studio 2022 and we'll create a new project this will select blazer server app and we'll name it as blazer app one next and you're going to select dotnet 6 long term support and click on create so this will create the default browser server app so if you go in the solution explorer in this pages we have this index.razer page so we are going to open this index.page and whatever content we have we just will simply remove it and let's make it and name it as fast training lockdown list one and so we have removed the default contact from from this index.razer page and we have added a simple coding section now let's go in our database and create the required tables for country state and city so here i've opened sql server and in this i have a database demodb and here i'll be creating three tables one is country and it will have id and name id will be the primary key then i have a straight idn name and in this i am using country id and i have a table city and it is also having the same columns id and name and here i am using state id so state will have a country id and city will have a state id so let's create these three tables so when i execute this script so i can country state city so here you can see three tables are created in this demo db here you can see the database name and i have id id name country id id name state id so let's insert few records in this table so i'm inserting three records in the country table so here now if we see the country i have three records so let's similarly install let's insert for the records in state and similarly we can do for the city as well so it's like insert script here we are not inserting the primary key because it is if we see the identity column it's one comma one so it's getting increased starting from one and incremented by one so we are only inserting the other values like name and state id similarly in case of country we are only inserting the name of the country the id is auto increment so let's check the records so here i have the three records for the country then i have the states and then at the end i have the city so this many cities are there fine now what we are going to do is like we are going to go to this package manager console and update the data models based on the database first approach because here if we have already created the database and we have the tables in it okay so we have these three tables in our demodb now here in this blazer app one i'm going to create a new folder and name it as db models and in this package manager console we are going to so before this we have to install these three nuget packages microsoft entity framework core so let's go on this blazer app one and select manage nuget packages and here we can install this one you simply have to accept this let's install install the second one okay so once all these three dependencies are installed we can go in the project dependencies and check the packages section here we'll find all the three whatever we have installed successfully okay now we have to go in this package manage manager console and here i should have the default project now the the project should be the one which is having this where we want to create our data models okay so this is the laser app one and in this db model folder i want my data model so i have to copy this so this is the server name the name of my server which is nothing but if i disconnect it from here and or if i like connect it again then i'll get the server name so this is the server name okay so that server name we have to write it here against the server then the database name then we have to mention the trusted connection equal to true and the nuget package we have to mention then we have the output directory where we want our data models to be created so i've named it as db models and i have to write we have to just mention the force flag because if the class is already exist the data models already exist then it will be forcefully updated so this scaffold db context we are copying and pasting it here so let's click enter key so if all is well then we simply will get the desired output in our db models folder so now the build has started once the build get succeed and the data models are generated then automatically it will create the required classes in this db models folder so let's wait for it to get complete fine so here you can see so here you can see in this dv models i like this demo db context is created and apart from this devote db context we have the city country and state so these are like we are having three tables in our database so for those three tables we have the respective classes with all the required fields whatever fields we have in our database the same fields are created here now if we go and see in this context class okay which is getting inherited from this db context so here you'll see like we have three db set okay so these are like db set of those tables now here there's a warning so we will just comment of the warning and apart from this we have us the connection string uh to connect to our database we have a connection string so that connection string is getting stored here trusted connection database name and server so we have to comment off this connection string also also because what we are going to do is like we are going to add the connection string in this app setting json folder so here just above this logging will add the connection string so here we have added this connection string or tag and we have named the connection string as db connection okay then we have the server database and trusted connection all these three things we have now for our application to use this connection string we have to mention that connection string in our program.cs file so here you see this we have this different type of services like razor pages server side blazer singleton so just below this we have to add a new service or we have to mail what do we say we can we have to add a piece of code through which we can access the connection string from the appsetting.json file so let's add that so here we have added this dot services add db context and inside this add db context we are main we are going to mention the name of the db context so here in our c in our this db models folder we have this demo db context so that name we have we are going to mention here and then we are passing the options parameter and in that we are going to use use sql server so we are getting two different errors so for this first error is like we have not inherited the namespace so we are going to press ctrl dot and we are going to get this using blazer app one day we models so that is that got added here now for this we are going to use the nuget package namespace which is microsoft entity framework core so that also got added here now now inside this we are going to use the builder configuration and get the connection strings from the db connection so this db connection name should match this db connection okay so these are like uh through this program.cs we are just pulling the db connection and the db context we are going to use is demodbcontext fine so this was like we have created the database and we have created the db models also now in the pages we have the index dot razor page so here we are going to use we are going to add few name space through which we can use this uh demo db context and also we can access this db models folder so let's add that so using db models and we are going to inject this db context okay so we have injected this db context and for this db context we have inherited the db models folder now here we are like we have we want to create three drop down list one is for country another one is for state and third is one first city so we are going to create three variables to store the data whatever we are going to pull from this database so if we go and see the database here we have three like uh country and the states and this city these three records so we'll have to create three variables in this code so here in this code section we have simply created three variables public list of country and we have named it as countries then we have list of state and list of city so apart from these three variables uh three list variables we are going to have one three more variables where we can store the selected index for example if the user has store selected country then we have to store the index of that country like which out of three which was selected and that index will be is nothing but the id the id of the country okay so here we have three id so this is nothing but the index so we have to declare three variables that will be of integer type so here we have declared three variables selected country id selected state id and selected city id so apart from the we are going to declare one string variable which will hold text and the initial value will be empty fine now what we are going to do is like we are going to create a div structure and the class we are going to apply is a row so this class is part of this blazer app and it's a part of bootstrap so by default the bootstrap library is inherited in this blazer app so we don't have to include it anywhere this is a bootstrap class in row so inside this we are going to have three different reduce inside that row and we are going to apply some bootstrap class to it so here we are going to apply this bootstrap class all the three divs and inside this we are going to have a label let's name it as country and this will be straight this will be city so we have three labels and inside this three and just below this three all three labels we are going to add a three drop down list so let's add the drop down list so here we've added a simple drop down using a select and the value is zero for select country so similarly we are going to name the ideas ddl country and let's copy this one and paste it here and paste it here so here we're going to add select constraint and this is select country and let's name it as ddl state and this is ddl country so we have changed the id now here if you see we have declared three variables selected country id state and city so we are going to assign all these three values to this class and if you see the select uh the drop down list select we are add we have added this class form control so here we are going to add a value equal to at the rate selected country id so this is the value for this and similarly similarly we are going to add for this state and city so here we have included this in double quotes so this value equal to double quotes at the rate selected country id so same thing we have to copy it from here and paste it here for selected state id selected ct id so it will be like selected state id and selected cti now so like we have three drop downs with the default selected value and the default selected option like country select state now we have what we what we did is like we created three list so what whatever data we have in this leads list that should be like looped here and bind it to other options like if we have three countries then it should have three options here but currently we only have the value zero which is the default one so what we are going to do is we are going to add a loop here for loop we're going to add a for each loop so here we have added a forage loop for the countries okay so this countries is nothing but a list of country and we have the item option value equal to the id and the display name is the name so same thing we have to add it here for the state and for the city now the variables we are going to change here is states and cities fine so what we have is like we have all the three drop downs ready apart from this drop down we are going to simply add a div to display the selected text so at the rate text so that text whatever uh whatever value we are changing that we have to add it will be storing in this text variable or we will be appending that in this variable so so far what we have did is like we created three drop downs uh and binded all the default selected value and whatever options we have that we did as a part of loop so we have the country we have the state and we have the city so three drop downs we are having fine now what we have to do is like in the code section what we did is like we only have the variables so we have to pull the data get the data from the database and assign to this variable so let's create the default basic uninitialized method so here we are going to add the basic on on initialized method and in this we are going to add a method to get get countries so we'll need three methods to get the countries get the states and get the cities public world so we have this get countries similarly we'll have get states and get cities but gets trace states by country id so the input parameter will be country id and here we are going to get get cities by state id and the input parameter will be state id so we all will take this countries variable and put it here and if we see we have created a instance of variable of db context so we are going to use this db context to query our database so db context dot we have countries dot to list so we'll be pulling all the countries and similarly for states equal to db context dot states dot where country id equal to country id so what we are going to do is here is like we are going to pull the states based on the country id similarly similarly we're going what we are going to write the same query for our cities so here city is equal to where state id equal to state id so we have this all three drop downs but if we see we are only calling this get countries on uh on the load of the screen love so whenever like the screen get this in index raiser page dot get initialized we are only calling this get countries we are not calling the other two methods so those two methods we are going to call on change event so for all these three drop downs we are going to create a on change event so for this country let's create the on change event so on this so let's first let's run how it looks so builder started okay so here we have the country we have all the three countries but we don't have the city nothing is happening even if we change anything in the country drop down nothing is happening in the state and city so that's because we have not added the on change event for all the three drop downs okay so let's add now three events we'll be creating for this uh country state and city so here in this code section we are going to add a on change event for country and this is like ddl drop down list country one change similarly we are going to add an empty for ddl state and same will be for ddl city so we have added three events ddl country ddl state and ddl city now let's bind all these three events on this drop down so here we have created at the rate on change at the rate ddl country underscore on change so similarly we are going to add another event for straight drop down so here we have the ddl straight on change and same way you're going to have for ddl city on change fine so we have created three events and we have binded all those three events to the three drop downs now on change of this of the country drop down what we are going to say is like we are going to set the selected state id equal to 0 and selected ctid equal to zero that means whatever selection was there for the state and city those two selection should change to the default one because there is a change in the country and we are going to make a new we are going to reinitialize this to uh states and city so states equal to new list of state and ct is equal to new list of sitting and here the start state state has changed and similarly for state change there will be change only in the city like we are resetting the city part now we have to add if clause if the selected value is greater than 0 then we have to call the we have to get the states for that country so here we have simply added a face of if clause if the event dot value is greater than zero then the selected country id will be that value and we have to give we have to call this method get trace states by country id and we have to pass the selected country id okay so this will pull on change of the that means like on change of a country we are pulling the for that second selected country id we are getting the states so similar similar condition we are going to add for states here and it will be selected state id and get the method will be this one get cities by state id and on drop down changes so let's run it once and see what happens so here we have country then on selection of a country if we see this query then we are pulling the on change of country we are pulling the states and on change of state we are pulling the cities now if i re-change the country to india then in that case this is set to zero because if you remember here we have added the select this line of code like reset the state and cities drop down and then again get the states so here if i change it again then this this will auto populate if i change it again then in these these two drop downs are reset so here if you see the city is not loaded yet because on change of the state we are going to load the city fine so this is good so far now like on change of this we want some text to be selected here like like whatever we have selected uh we are changing that should get displayed below okay so let's add that so here we are going to add a method probably to wild update selected text now in this update selected text we're going to add a simple piece of code so here if you see we have this text equal to empty and the selected country id is greater than zero then text equal to text plus country equal to and then we are getting this country equal to from the countries list we are getting the name of the selected country then if the state id is greater than zero then we are going straight state equal to then from the selected state from the states list we are getting the selected state id and from that we are getting the name so similarly for the selected con city id we are getting the name from the cities list okay and everything we are appending to this text variable okay so now we have to call this update selected update selected text method from all these three drop downs because on change of the drop down we want the text to be updated okay so for the city we're going to add this method and we're going to remove this so our city a drop down list change we are going to have selected city id fine now let's run this entire piece of code and see how it works so let's change the country so here you can see selected country equal to one because on change of this that method got executed okay so we have this now let's change to australia fine so whatever selected uh things we are selecting so that things are getting displayed in the text as what selection we did and apart from this like if we select it to come to the default select uh selection for the country drop down then all three get reset and this fine so this all looks fine so this was the tutorial about like cascading drop down list and we have used entity framework core and database first approach in this now this entire thing can be done in a different way so we are going to see that cascading drop down list and second approach how we can bind this entire thing so here if you see we have used this free drop down list and three on change variables to bind and three methods we have written get and get countries get states by country id and get cities by state id so we can use a different approach as well for this drop down so let's do that add a new laser or i'll simply copy this index dot raiser and paste it here and name it as index 2 dot razor so in this index two dot razor we are going to limit demo two or we can name it as index two so this index 2 is like the cascading drop down list second approach so in this second approach we are going to create a model now so in this blazer app we are going to add a new folder and we have named it as models inside this models folder will add a class and we'll name it as drop down model and inside this drop down models we are going to add few properties so here we have added id country id state identity now if we have open this index two dot razor what we are going to do is we are going to remove this three variables and we are going to remove these three methods also and we are going to remove this three on change methods also and this one also so we only have a on initialized method and we we're going to name it as get master data so we have a method public void get master data and in this we are going to add countries equal to context dot and similarly we are going to pull all the states all the cities so we are pulling all the data from the countries states and city now in this countries states and cities we're going to add a default value of select country so this option we are going to remove from the text select country also we are going to remove it from select state and also we have to remove from the select city so what we have did like we have to insert now zero new country id equal to zero name equal to select country so this record we have to insert at the beginning of the countries similarly before we have to do for state and similarly for the cities so here we're going to add select state select city so it will be new state new city so apart from here we are going to add country id equal to zero and state id equal to zero so these three records we have added over here now if you see we have to declare one more variable over here which will be a simple variable public drop down model okay so for that we have to include the namespace here first using models public drop down model drop down model equal to new drop down model so this drop down model we have to add at the beginning of this row at the written g if not equal to null if the drop-down model is not null then we can simply add it here so this entire thing this entire row we have moved inside this drop down model now instead of this selected by country id we have to use drop down model dot country id and similarly for state id we have to use drop down model dot state id and similarly for city we have to use drop down model dot city id and the other change what we are going to do is like in this states we are going to use the where clause because we are going to show all the countries so here we don't have to add any where clause and here on this states we are going to add dot where next dot country id equal to drop down model dot country id not to list and similarly the same approach we have to follow for the city drop down but here instead of country id we have to select state id okay now what we have did what we did is like we have removed this all these three on change events so we have to add a new unchanged event here so here in this country drop down you have to change the entire on change even and let's remove it from here and make it this way so here we have the on change event but now what we did is like now we have changed the on change even and here we have added the change event args and use the lambda expression and inside this html piece of code itself we have what we did is like drop down model dot country id equal to that value and here we are calling a new method my method and we are passing the drop down model and with the parameter as country id now similarly we have to do for just copy this entire thing and paste it for the c state one so for state also we have to do the same thing but here instead of country it will be state id and for city also we have to do the same thing instead of country it will be city id and here in this my method we have to pass state and here we have to pass city so let's create this method now my method so here in this what we did is like we only have now a get master data nothing else there's no unchanged event so let's create the my method so this my method is a simple method it will take the drop down model as a input parameter and the type if the type is country then this drop down model state id and city id will be set to zero if the type is straight then the city id will be type it's like a reset okay and on this change for the city id we don't have to call them my method fine so let's let's add a button also here we can leave the button let's run it and see how it works so this was like the first approach with three different on change events and three different variables and three different methods now let's call index2 so here if we see we have india okay then we have this so i think there's some mistake okay let's see what is the mistake get master data so here if you see we are not getting the default like select value so in this html part here we have to add one more condition x dot country id equal to equal to zero it can be the country id which is selected or the country id which is zero similarly for this state drop city drop down we have to add the state condition x dot state id equal to equal to 0 now let's run it let's go to index 2 now we have the default selection select state and select current city now let's select so here we have the different states here we have mumbai pune fine australia this is with this got reset and these are both empty so here what we did is instead of three variables we have used a single model class so a single class which is holding all the values okay and if we want we can add a button also here to get what is the selected value so we can add this update selected text so let's add a method here just below this my method so here similar to what we did in our first approach we have added this drop down model and countries we have the states we have the cities so it's a similar method if we go and see the first approach here also we have the same method like but here we are using the three different variables instead of three different variables we are using the single variable and single single model class for holding all the values let's run it again so here we have india and if i click on add then i get the selected value so i get the selected value so here in this video we have discussed two different approach of binding the cascading drop down list or also we can see like how we can bind a drop down list if you might want to bind a single drop down list also they can then also we can use this different two different approach so whatever approach you like you can use in your project so that was it in this video and if you really like this video please subscribe my channel if you have any doubt regarding this video submit a suggestion whatever you feel please let me know in the comments thanks for watching you

Channel: Coding Jackpot

Views: 2,716

Keywords:

Id: AQh1kW0W28w

Length: 49min 46sec (2986 seconds)

Published: Sun Jul 31 2022