1. Add Province and City class
//Provinces Public classProvince { Public intId {Get;Set; } Public stringName {Get;Set; } } //City Public classCity { Public intId {Get;Set; } Public stringName {Get;Set;} Public intProvinceid {Get;Set; } }
2. Add Controller
usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingsystem.web;usingSYSTEM.WEB.MVC;usingSupermarketmanagement.models;namespacesupermarketmanagement.controllers{ Public classLinkagecontroller:controller {List<Province> provincelist =NewList<province>(); List<City> citylist =NewList<city>(); //Initialize City Data Private voidinitprovince () {Provincelist.add (NewProvince {Id =1, Name ="Hebei province" }); Provincelist.add (NewProvince {Id =2, Name ="Henan Province" }); Provincelist.add (NewProvince {Id =3, Name ="Guangdong province" }); Citylist.add (NewCity {Id =4, Name ="Shijiazhuang", Provinceid =1 }); Citylist.add (NewCity {Id =5, Name ="Xingtai", Provinceid =1 }); Citylist.add (NewCity {Id =6, Name ="Baoding", Provinceid =1 }); Citylist.add (NewCity {Id =7, Name ="Zhengzhou", Provinceid =2 }); Citylist.add (NewCity {Id =8, Name ="Anyang", Provinceid =2 }); Citylist.add (NewCity {Id =9, Name ="Luoyang", Provinceid =2 }); Citylist.add (NewCity {Id =Ten, Name ="Guangzhou", Provinceid =3 }); Citylist.add (NewCity {Id = One, Name ="Zhongshan", Provinceid =3 }); Citylist.add (NewCity {Id = A, Name ="Foshan", Provinceid =3 }); } //Bound Provinces PublicActionResult Index () {initprovince (); varpenumrable = Provincelist.select (p =NewSelectListItem {Value = p.id.tostring (), Text =p.name}); Viewbag.province=penumrable; returnView (); } //get the city PublicActionResult Showcity (intProvinceid) {initprovince (); List<City> cList =NewList<city>(); CList= Citylist.where (c = C.provinceid = =Provinceid). ToList (); returnJson (cList, jsonrequestbehavior.allowget); } }}
3. Add HTML
<!DOCTYPE HTML><HTML><Head> <Metaname= "Viewport"content= "Width=device-width" /> <title>Index</title> <Scriptsrc= "~/content/jquery-1.8.3.min.js"></Script> <Script> $(function () { $("#Province"). Bind (" Change", function () { varselectprovince= $( This). Val (); //except the first one is removed $("#City Option:not (: first)"). Remove (); $.getjson ("@Url. Action ("showcity","Linkage")", {provinceid:selectprovince},function(data) {$.each (data),function(I, Item) {$ ("#City"). Append ("<option value= '"+item. Id+"' >"+item. Name+"</option>"); }); }); }); }); </Script></Head><Body>province: @Html. DropDownList ("province", "please select Province")<BR/>City:<SelectID= "City"> <optionvalue="">Please select a city</option> </Select><BR/></Body></HTML>
MVC4 DropDownList provinces and cities linkage