Country, State and City Cascading Example in ASP.NET CORE

hello everyone welcome on my channel asp.net core today I'm going to show you cascading so I have an example like country state and city so just you can see so first of all run the project and you will see cascading so before show the cascading just add some data in the database so first of all add country that is the USA and UK and after that you have to add States I mean to say that capitals so so there is home and state index and here we have States to their respective country so ABC inside USA there is so you have to just pass in the back button you have to just have to click on the back button for the state index so here we have country IDs third and abc2 again inside in USA and USA is created just go to the back and that the third thing is ABC third inside UK so in USA we have two capitals States you can say and UK here we have only one and just add city so city index name of the city is injured YX in state that is ABC and that ABC include in USA so the proper cascading will show in this example and how to do perform the cascading into your projects so just to show cascading so home cascade list so first of all select country that is USA and select a state under the USA that is the ABC and ABC - and here we have two city in the ABC - we have only one city ASD so in the UK state UK country only we have only one state and there is no country so that is the example and what you do for creating gasketing an example of country states and city so first of all create model for the country state and city so just go to the section of the model and you know very well a country have multiple states so public integer ID public string name and KY collection state and States and state have multiple cities but a single property how or you can say the dependent property of the country and the city have have a dependent property of states okay so country state and city model prepared after that you have just passed in the application dbcontext so just add country state and city inside the DB context and just after that you have to show your home controller section or you can say controller section their country states and city card operation will be there ok so just open home controller and in the home controller we have the first action method is index where all countries are there so index a list of countries will show and after that you have to get section of the create and the post section of create for the country so context dot countries note add that is the simple called operations you can do for the country and the state index is show all list of states and the create state as well as the post section of the create will show to save the states in the database table and in the create state we have only dependent property of the country so just under the Select list and the view back countries so create state is post clear similarly we have to City index and the create city in the gate section of the create city we have view back object for the States because in the city we have need single States so new select list contacts wrote state dot ID and names in the HTTP POST section of the create city is there and in the cascading list you can see a view bag of countries only one countries will list of countries will show first of all and when we select any countries then we'll show States and then we'll show cities so first of all just pass to the view as a country so that two things is returned Jessen result that is the load state and load city that is partially loaded from the view section so variable state context go to state dot where odd country ID is goes to ID door to list there is an return jason as in the form of the select list also for the load city is the similar there is the select list item to return cities okay so the man think you can do using jQuery in your cascading list dot CSS table file so to understand how this work so the first select list is the control lists and the control lists will bind and the viewbag object and that there is view back dot countries we are new select list contains four countries ID and the name okay so the properly controlled list will bind with the Select list with the proper options when any changes in the control list occurs then jQuery function will call partially call action method that is the load state and both lists that is the state list and the city list will empty so and dollar sign as X type GATT and URL action is load state and data type is jason and the URL parameter is the country list dot value i mean to say that ID property of the country list will pass in the parameter that is the load state and here ID is the country ID actually okay so there is a foreign key of the table so after that we have list of state will cat so the state list first of all add a state list as in the in the form of append so option - 1 that is the null and select state and after that list of states iterate in the list in the form of select list so there that so these states will iterate by using jQuery so dollar sign dot each state's function ie states and stateless not append option value when value is the state dot value and also we have stated no text so thank you guys and similarly you can do with the cities so thank you very much for watching this

Channel: ASP.NET MVC

Views: 26,925

Keywords: Cascading Example, Country State City Cascading, ASP.NET CORE Cascading, ASP.NET CORE Example of Cascading

Id: PnLMRQK80UA

Length: 8min 30sec (510 seconds)

Published: Sun Jun 21 2020