How to Create Cascading Dropdown List | Country, State and City Cascading Example in ASP.NET CORE

Hello friends welcome to my channel in today's session we are going to discuss about cascading drop down list in asp.net core by using Entity framework and jQuery with Ajax calls so this is the final output of this session so we are going to design one form like this and we are going to bind country state and city here so these drop downs are interdependent so country is the parent for State based on the country selection States will be loaded based on the state selection cities will be loaded suppose if I select default value as select country so we will get alert stating them we have to select the country so until unless we are selecting proper country it will not be displayed based on the country selection States will be loaded based on the state selection cities will be loaded if there is no City with this country and state then city is not available like this we are going to display the message and we are going to disable this drop down because there is no cities so we now need to enable this drop down suppose if I change any other state so here we have City that time only we are enabling all the validations are implemented in this example and please watch this video till the end for better understanding before continuing with this session I would request you all please subscribe to my channel and click on Bell icon for notification alerts for this session we are going to use Visual Studio 2022 and database will be SQL Server 2019 I am going to use it if you have any other versions which supports for net core you can use it that first I am going to create a new project here we are going to create asp.net core web application with model view controller you select the asp.net core web app model view controller which language is eShop click on next here I'm going to provide project name giving project name here so I'm going to store in this location and here solution Name by default whatever the project name we provided the same name will be there if you want you can change it here I have.net 7 is the latest version I'm going to select the latest version click on create here we are going to configure https create our project has been created now so first we have to first we have to add Entity framework related packages for that right click on the project go to the manage nuget packages so here we are going to use Entity framework code first approach for this go to browse so I'm going to use synthetic framework core install it in previous sessions already we explained how to use Entity Framework with the DB first and code first approach and I am going to use SQL server for the database for that we have to install the Entity framework code or SQL Server also and also we need tools to use called first approach for that I am going to install entity code.tools so it's installed also we need bootstrap latest version so we are going to install bootstrap also select the latest table version and you can install it here it's installed now we are going to create three models for Country State and cities for that I am going to expand models right click on this models I am going to separate it for that I am going to create one folder called DB entities here I'll create our classes for Country State and City here we will create three classes country state City here we will add properties for each class here I want ID this will be its name that is continue code I'm going to use these properties for state and city also now we have to add the relation between all these three tables each country will be having multiple States so we have to relate with country here we have to add the relation between State and Country each state will be having multiple cities for that I'm going to add property here state so we have added the relation between State and country and city and state we have to add the appdb context to communicate with our SQL Server database for that right click here I am going to add new folder called Data access layer here I am going to create DB context class I will name it as my app DB context you can give any name here this will be inherited from DB context here we have to import the namespace of Entity framework core here select the DB context go to Quick actions click on generate Constructor for my appdb context so it will generate the Constructor for us here we will add our data set DB set first we will add country this will be country then we need State here City so this app DB context will communicate to SQL Server for that we have to add connection string we are going to Define our connection string in app settings.json here we are going to add connection string here we have to provide our connection string name I'll make it as default connection here we have to provide server name then we have to provide the database then here we have to provide if you are using Windows authentication then you have to provide us integrated security otherwise if you are using SQL Server authentication then you have to use the user ID password Here so here we have to provide server name so this is the this is my SQL Server where I have multiple SQL instances so this is my PC name and this will be my SQL Server instance this is the instance I am going to use it and I am going to use Windows authentication click on connect it's connected to my database server this is my server name and database name I'm going to provide as demo and I am going to use Windows authentication for that I'm making as Integrated Security as true you can migrate our DB entities to SQL server for that go to package manager console if you don't have package manager console here you can go to tools you get package manager you can select the package manager console from here to migrate the entities add migration here we have to provide the name of migration so I am giving as initial you can give any name here so before that just build the application so that if any errors are there we can fix it so there is no error we can go to pack as manager console and add the migration so this is our migration name enter foreign so here we are facing one error card unable to create an object of type my appdb context because we have to before migrating we have to register in our program.cs here we have not register here we have to register this so this is our dependence injection I am going to add Builder dot services at DB context here we have to provide our DB context name this is our DB context options so we are going to we are going to use SQL Server here we have to pause our connection string get connection string so here we can provide connection string name this is our default connection is our connection string name you can pause it here now we will go to package manager console again we will execute our add migration I think this time there should not be negative so now our migration is successfully completed now we have to update the migration to database for that update database now we have to fix this SSL related error because while creating project we have selected the https that's why this SSL Error is coming I will tell you how to fix This Ss layer two ways to fix this first one is so while creating the project click on create a new project so you this is the first way here I am going to select MVC so I am selecting by default asp.net core web application model view controller click on next so I am giving just one project name here click on next so here while creating the project we have selected as configure for https whenever you are configuring https that time that certificate will be added to your project that is the error related to https to avoid that error you can uncheck this configure for https error and you can create the project this is one way and another way I will tell you how to fix that one of our subscriber also reported the same error three weeks ago the same error related to the SSL so already I suggested here how to fix we have to add this trust server certificate to true in app setting.json file same thing we are going to do it now just copy this so this is the error we are facing open the app setting.json here we are using Windows authentication along with that we have to use the trusted server certificate true whenever you are using https that time only this error will come and you have to use this trusted server certificate as true now we'll go to package manager console again now we will try to update the database this time we will not get any SSL related error update the database so there is no error now so we can fix this SSL Error in these two ways so first one you have to exclude the https checkbox and second one you have to use this server certificate to true so anyone you can use it whatever you are comfortable expand the database here so all our table has been created so you can check the columns this is State table foreign key reference added to Country and City table foreign key reference added to state you have to add some dumb entries to these three tables for testing purpose so I have SQL script I am going to open this first I am going to execute countries table then I'm going to run data Force state finally I am going to execute cities we'll check the data once country States and cities so we have all the data snow now we will create a controller here go to controllers I'm going to create One controller here so we are going to create empty controller so I'll name it as cascading controller cascading ddl this is my controller name first we have to initialize our database context my app DB context select the context go to pick actions generate constrictor it will generate the Constructor for us so now we can access all our Tables by using this database context first I'll create a ction method to get the countries which will return Json result so it will return Json results foreign context Dot country so we have to put the order also order by country name we will add it finally we have to convert into the list so these countries we have to assign to these Json results next we have to read the state data here we have to pass ID that is country ID we will pause it here again it will return Json result here we have to read States from our database here we have to check where x dot country Dot ID we have to check the country ID which is passed by user from here we have to put the order by now we have to assign these states to Json results first we are checking the states whatever the ID passed by the user from the drop down so we have to filter that then we have to apply the order by state name like this we are going to create one more action method for cities here in this case we will get the state ID it is going to return again Json result here we have to put the order finally assign this it is to Json result that's it from our controller set we have created three action methods to get the countries states and cities now we have to create a view for this I am going to create one index view right click add View raise your view I'm selecting empty view we are going to design our View click on ADD here I am going to add title for our form this is our title here I am going to create one h2 tag to display this title I'll add one horizontal row next to title I'll take one container I'm adding bootstrap classes here I will take one card will give the Border as primary we'll give the header this is going to be called header and I will make it as bold and for this also I will make border primary this is a subtitle for chord we are giving the header then I will make it then I'll create another leave for row inside this div I am taking form I'll add margin bottom to here I am taking one label this will be country then I will take one drop down item select list country class I will assign form control same thing I will duplicate it here for state and city this will be our state this is going to be City so we will run the application once and we will see the output here we will use our controller name so this is our controller so our design is perfect now we have to bind the data by using jQuery ajax calls here we have two ways to implement Ajax calls inside our index.cs HTML we can write all our jQuery scripts here or we can create one new Javascript file inside our root folder from there we can link it to our index.cs HTML so I will go with second option I am going to create one Javascript file here right click on the JS add so here I'm going to create one new item say Javascript file so I'll name it as cascading drop down list so we are going to write all our jQuery functionality here so we are going to link this document to our index.cs HTML so it will looks nice so here I am going to write document.ready function document dot ready here I am going to write by default all the three drop downs will be disabled for that I am going to make it as disabled because there will not be any day we should not allow user to select any item for that I am going to disable it here so here we can disable by using attribute also here we have to pause true so we are making as disabled true so like this state and city also we are going to disable by default this is the ID which we are taking from here this is country state City by using these IDs we are taking that controls based on these ID values we are applying the attribute as disabled whenever our form is loaded so by default we have to load the countries for that I am going to create one function here load countries this is my function name so if any countries are available I am going to make it as empty first I'll take this ID value dot empty here we are going to use Ajax curl to read the data Rejects we have to pass the URL here our URL will be controller name this is our controller name then we have to pause our action method that is get countries so this is our URL if it is success then I have to create a function for this we will get response from here you can make it as response or result whatever you want you can provide this one this is not mandated like you have to add like response okay so here we will get the response otherwise we will get the error here we will get error so this error will be displayed in the outlet so if it is Success we have to validate the data response not equal to null we have to check whether it's null or not then we have to check whether it's undefined or not then also we will get response we have to check the length of the response if it is greater than 0 then only we have to bind the data otherwise we have to disable the drop down items again here if we have any countries in the database then response.length will be greater than 0 that time we will get the data so we have to enable our drop down our terms so we have to enable drop down items here that's why I am making s attribute as enabled so initially we disabled now I am enabling then we have to append the data here I'm going to add append default item I'll add it here option select country I'm going to add one default value to this drop down item option so like that we have to add this default values to state this should be CT so this will be select state this I am making a city then finally we have to use each to bind the data so response and I am going to call function here this will be data and here we have to append the data by using each Loop first we have to assign the value value we will get it from data dot ID then we have to assign the name here we have to close the option option should be in single quote so whenever we are getting success response we have to check whether it's a null or not and undefined or not and we have to check whether length is greater than at zero suppose if it is greater than zero then only we will be having more than one country then we have to bind it otherwise it will come to L spot so now if we don't have any data if any one condition is failed then it will come to else block here again I am going to disable all this drop down items because if countries are not there then we no need to enable states and cities so that's why I am disabling again here and also this default values I am going to change it here so instead of showing countries select country and show it as countries not available same thing we will use it for other two States not available if countries data is not there then we now need to display these states and cities by default it will be disabled here now this will be called from here when document.ready function is executed this lower countries will be called first we will check whether countries are binding properly or not for that we have to add two scripts here one is jQuery which is available in the lib jQuery so from here I am going to add jquery.min this is not required and another one cascading drop down list also required run the application now once countries are binding perfectly then we can go with state and city all countries are loading perfectly there is no issues so now we can Implement for state and city so also we will create one hyperlink for cascading drop down inside our layout page here I am going to add one now bar item this will be cascading drop down list and this will be index so this navbar item will be displayed in our layout so now we will go to cascading drop down list here we have to add another two functions for loading state load States in this case I no need to make it empty for Country here I will make it as state also City these two drop downs I'll make it as empty because while loading these states we have to clear existing data and then we have to load the fresh datas and also I am going to disable CT so whenever states are loading that time cities states and empty will be removed and then we are going to disable City when state is change that time only we have to validate the data if any cities are available then we have to enable the city drop down here we have to add trades action method and again here we will get the response we are validating here this country is not required here instead of country we have to enable State drop down so this is the HTML attribute so we are making us disabled true or false here once data is available we have to make it as disabled false then only the drop down item will be enabled so then select state will be added City will be added here and here we have to pause data to state so here we are working with state suppose we don't have any data in the state table that time it will comes to else block then here state will be disabled City will be disabled and default message will be displayed as States not available and CT is not available for this we have to pause the ID here country ID is required here we are going to assign ID equal to country ID this country ID we have to fetch from document.ready function so whenever there is a change in the country drop down that time we have to fetch this ID and we have to load the states like this we are going to create another function for load cities and finally we will work on how to get these IDs load cities so now state is not required and this one also we can remove it and we have to get the gets it is action method from controller this is ID and here we will get the state ID from the drop down so here we have to enable City drop down and this is not required only we are going to work with City so now we have to get country ID and state ID to fetch the data for that we will go to document.ready function here we have to check country dot change whenever country is changed we have to create a function here where country ID is this dot value so here we will get the ID of country if country ID is greater than zero then only we have to call the States load States and we have to assign this country ID here suppose if user is selected default value like select country that time we don't need to hit our database so here we can show that message to user stating that select the country alert select country if user is not selected the valid country then we have to disable these two drop downs state and city also we have to assign this values so like this we have to get for State change also whenever state is changed we will get the state ID here state ID is greater than zero then I have to call load cities if user is not selected valid State then we have to display select state and this will be disabled here also here we can make it as empty because whenever they have selected invalid country that time we have to clear State and city data we no need to display same thing I have to do it for City also now run the application click on this cascading drop down list so all our countries are loaded I am selecting one of the country here based on the country selection States will be loaded here based on the city based on the state selection City should be loaded so for this state we do not have any cities that's why it is showing cities it is not available I will select some other state so we have the data now suppose I'll change this country to default one so it will display the messages select country so everything will be disabled so all these states will be cleared and by default it will be disabled and select the valid country States will be loaded here and City will be displayed I'll select some other one here again I'm changing into default one so it will say select country and everything will be cleared and it will be disabled so like this we can create cascading drop down list in asp.net core by using Entity framework core and jQuery with Ajax calls so that's it for today if you like this video please like And subscribe to my channel thanks for watching foreign

Channel: CodeWithGopi

Views: 3,581

Keywords: .net core, ajax, asp.net core, asp.net mvc, cascading dropdown, cascading dropdown list in asp.net core, cascading dropdownlist in mvc using ajax, codewithgopi, jquery, jquery unobtrusive ajax in asp.net core, mvc, mvc tutorial, asp.net, .net, sql, ASPNETCore, CascadingDropdownList, MVC, AJAX, JavaScript, JQuery, EntityFrameworkCore, WebAPI, JSON, Code, Programming, VisualStudio, Database, SQLServer, asp.net core tutorial, asp.net core mvc, entity framework core, code with gopi, cascading, dot net core

Id: 6g6ZNvX4aXM

Length: 43min 6sec (2586 seconds)

Published: Tue Dec 13 2022