cascading dropdownlist for country state city in asp.net mvc c# 4.6

[Music] hello friends welcome to my channel this is channel in this video I will show you how to implement cascading drop-down list control in MBC and here we got the final output we got the three drop-down list controls continent states and cities I'm selecting the country name India select States Telangana which is a heroin if I select yours here I'm selecting the states of USA Texas Austin is a capital of the Texas if you are a first-time visitor to my channel please subscribe to get the latest updates before writing the coding part in MVC first will created tables of countries state and capital which is a city I'm expanding the root folder of the SQL Server databases and expanding the one the sample DB is my user database I want to create the tables in this sample DB do this I'm expanding the sample DB as well as tables writing the sample DV database to create a table Nick well create table DB o dog country in this country table I'm creating two columns one is the country ID and the second one is a continuum CI laser which is integer datatype not now and I want to make this column as an auto Janette column I'm adding identity 1 comma 1 as well as I'm adding primary key for this column comma the second one is a country named cname that can handle let's copy this the second table I'm grading state a column name an atom as early which is a state ID and s name state name comma after that in the state table I'm adding the country ID which is a CID integer data type let's copy this one the last table is a city city ID city name and Here I am adding that stood idle let's create the tables execute and Megillah message command completed successfully erecting the tables refresh and here we got the country right-click the country name edit top 200 rolls let's add some records country ID which is the others in that column the first country name I had in India the second country name I'm adding yourself and the third country is Australia just for the demo purpose I'm adding only three continents let's add some street names in the state table likely the state added top 200 rows SL is the auto-generate column the s name is the India country ID is the one so the country IDs apartment state name is a karnataka country ally the one let's add the statements of australia queensland the country idea of the australia which is three Victoria entirely still Western Australia the country IDs and the last one well click the city elite top 200 rows the city ID is auto generate column and the city name city name for the tilling allow which is a capital had a bad and state ID is one and second city name is a cognate cow which is a bangalore city ID is two and the last city name i'm adding for the Australia Western Australia which is the state ID is chain that's it we have created the tables and we have inserted some country state and the city names now we'll read the coding part in a machine let's open Microsoft Visual Studio I'm creating a new project for this video tutorial go to file new project and I'm setting the asp.net web application and the dotnet framework is 4.6.1 the project name is Casco a missing okay and from the templates I'm choosing MVC fault okay and the project is created successfully let's close this window first in this project I'm adding these three tables using a Dior Dutton and little model open solution Explorer right click the project name add LD word dotnet entity data model click that one and the model name I'm given cascade him okay I'm choosing the model condenser first one EF designer from database click Next new connection I'm adding the server name of SQL server user after adding the server name I'm selecting the database name and here our database name is a sample DB you have created the tables in this sample DB only so I'm selecting the sample DB test connection okay okay and I want to sell this connection string in the web config file and the connection string name is a sample DB entities next from database objects on expanding the tables and expanding the DB o our table names are city country and state finish and here we got the three tables city country on stage after adding the models into the project next go to solution Explorer I minimizing the references including a new class in this models folder right-click the models folder add class and the class name I'm giving cascading class add and here we got the class now in this class I'm clearing the public properties public and CLE which is a country re get and set its copies one the second property is a straight Ally and the third one is a city ID city ID after adding the properties in the cascading class now I'm creating a controller open solution Explorer right-click the controllers add controller I'm choosing the MVC 4 controller empty the controller name is a gas now in this control era I'm adding the namespace of Morel using the project name is a cascading emissive dot morals try adding this namespace public list class now in this list class I'm adding the country table name which is debuted country which is country copy that one day soon you get country list the sample DB entities as DS equals to new sample DB entities list class again controlled and bellowing an object contains is equals to as the dot country's dot to list hello 10 countries now I'm adding this metal into this index action result sample DB entities as DS equals new sample DB entities view bad god country list is equals to new select list I am adding three parameters the first one is ax get country list method come and the first object selected is a CID which is a country ID and the next column name is a country name which is a cname this one up to now we have just finished the the fridge the country names into this index action result let's create a new view for this index but before creating a new view for this index action result we need to build this solution build build solution and here we got the output message bill succeeded let's close this output message we know I let the index right-click add view the view name for the action result is index only and the tablet I'm choosing empty without model and here we got the index few pairs the first thing I'm pairing de add modeled the product name is a cascading MVC got models dot our class name is a cascading class after adding this model class getting class I'm changing the header and we see cascade any drop-down list at if condition now in this if condition I'm adding the view back controllers copy this one and passenger is not equal to now now inside this if condition and adding the drop-down list control drop-down list father at HTML dot dropdownlist far m m dot I'm adding the country ID which is a CIT come on view back country list as select list comma I'm adding the default header which is a select country name , new at classes equals two from control that's it we have just binded the country names into this drop-down list father let's check the output but before run this application on the browser the main important thing is go to solution Explorer expand the app and ESCO start the road config dot see us open that one and notice here the control of name is a home which is a default one but our controller name is a cache controller just copy this callus delete the home and error control of name and the next one is the action which which is a view page our view pages are indexed earlier so I'm not changing anything switch back to the index dot CSS tml let's check the output the country name is binded to the drop-down list for are not Google Chrome and here we got the output the helding is an MVC cascading dollars and the select country name see we have banded the continents in near US and Australia will add the state names in the drop-down this control and stop debugging let's closes switch to the controller I'm glaring a new action result for the state list public action result get state list I am declaring a variable integer country araceae sample DB under this I am creating an object for the connection string as G's equals to new sample JB entities list list class in this list class I'm adding the table name state state level setup list zip code store as the dot starett's chart weird method I'm adding lambda expression X column dot CLE which is a country hiding a double equals to I am adding this variables here dot truelist method view back dot s list is equals to new select list now in the Select list method I'm adding the Select list object between these double quotes I am adding back as ID which is de state ID comma state name return here in the written I'm adding partial viewed between double code I'm adding the partial view name discipline steps bascopolous display stills which is a partial view name now it's time to create the partial view to create a partial view come to the bottom notice there is a shared folder right in the shared folder add view the view name I'm adding displaced tilts which is or partial view name and the tablet and selecting empty the morale class I'm selecting the state and the data contacts classes sample deviant assalam and the last one is very important notice in the options the create as a partial view is check and here we got the partial view of display states of shiny values equals to I am NOT adding any value select States at youth viewbag got us tensed copy the one is not equal to now for each loop variable item in viewbag dot s list option value is equals to at item dot value at item dark text that's it the cooling part in the partial view to display the states switch to the index dot CSS channel there's copies Monsieur select state name snack states and stuff CLE and dot society we don't require this one new circlets to bind the partial view display states into this drop down list for control we need to add the JavaScript script document god very function Dola between double chords I'm adding the CIA and I use a selector country ID I want to destroy the states of that country cid thought change I'm creating a function creating a variable country ID is equals to dollar this dot value debugger dalek dart ad Jax time which is opposed sucker , Your Honor Colin between double quotes the pattern adding between double chords the controller names here as copy this one question of the forward slash I am adding the action result page which is a get stateliest copy this one special question mark I am adding the theory which is a country idling is equals to class country ID comma content type it's diiemma I'm adding success attribute function response ta-dah once the user selects the country ID the states available of that country I want to display this function dollar between double chords hash here I'm adding a society which is a state highly dot empty method dollar between double calls [Music] as ID dot now in this append method I'm adding this response to display the state names into this drop-down list control but before on this application we need to add the jQuery referencia open solution Explorer notice that the scripts folder here expand that one and we need to drag jQuery one point funds it upon two dot min degeus into this index view page just highlight this one and drag and drop that's it now it's time to check the output on the browser Google Chrome and he'll got the odd board I'm slipping the country near India select states here we got Telangana if I select USA California Texas and New Jersey for Australia Queensland Victoria and Western Australia now the last one will add one more drop down list control to bind the cattle of the states which is a city names and stop debugging it's just to the controller let's add a new action result fire to get the city names copy this one this yeah I'm just changing and stuffs got stateless I'm adding your city and stuff CRE I'm adding a society which is a state ID here in the list class carry city which is a table named as the dots cities where TxDOT as I really this variable now view bad city lists now between these double cuts I'm adding the city ID which is this one city ID copy this one and paste in yeah sitting in the parcel view display cities let's look we have created a new action result for the cities but we need to create a partial view which is a dispersity is copy this one to create a partial view again go to solution Explorer come to the bottom in the shared folder right click that one and view the view name is a display series and the template empty the moral class this term here I am selecting the city did a context class which is a sample deviant Arizona and we must serve this grid as a partial view checkbox control and here we got the partial view for the displaced cities instead of writing the code again I'm just copying this display stairs code I'm deleting this view back as last I'm adding viewbag got city list copy this one this year and Percy selects chairs snacks it is but sit in the partial view to display the city names now switch to the index dot CSS tml copy this one and this drop down list for the cities so I'm deleting MDOT a salary which is now MDOT city ID cities let's copy this funshine nice to know instead of CID which is a country I am adding that state ID and the URL which is a cat city less copy this one Cosima state ID I'm changing the very straight Heidi I'm adding here this city that said we have done the complete coding part now it's time to check that result in the browser Google Chrome and here we got the final output we got the three drop-down list controls continent states and cities I'm selecting the country name India select states Palin Ghana which is a high rider if I select USA I'm selecting the states of USA XS Austin is a capital of the Texas that's it [Applause] [Music]

Channel: Haritha Computers & Technology

Views: 76,117

Keywords: mvc cascading, dropdownlist cascading, asp.net c# mvc dropdownlist

Id: y_lJf8SnZNo

Length: 31min 55sec (1915 seconds)

Published: Tue Jul 17 2018