Implementing drop-down list linkage based on MVC3 method (JQuery)_jquery

In the last project, I encountered an operation that required the linkage of multiple drop-down lists. I have time today to sort out the implementation method for future reference.
The effect to be achieved is that when you click on one drop-down box, the value of the other drop-down box will change accordingly. For example, if you select China, each province in China will be displayed in another drop-down box.
The traditional HTML method is relatively simple, and in fact the implementation method based on MVC is also similar.

Add the code directly:

Copy the code The code is as follows:

public class DP_Provice
{
public int proviceID { get; set; }
public string ProviceName { get; set; }
public int ProviceNode { get; set; }
public virtual List citySource { get; set; }
}

public class DP_City
{
public int CityNode { get; set; }
public string CityName { get; set; }
public string ProviceNode { get; set; }
}

Assign values ​​to the entity classes involved above, and temporarily use a static class to initialize simple data:

Copy code The code is as follows:

public static class DPDataSource
{
public static List InitalData()
{
List source = new List
{
new DP_Provice{ ProviceNode=1, ProviceName="Beijing", citySource=new List{
new DP_City{
CityNode=11, CityName="Beijing Haidian"
},
new DP_City{
CityNode=12,CityName="Beijing Xicheng"
}
}},
new DP_Provice{ ProviceNode=2, ProviceName="Shandong", citySource=new List{
new DP_City{
CityNode=21, CityName="Jinan"
},
new DP_City{
CityNode=22,CityName="Dezhou"
}
}},
new DP_Provice{ ProviceNode=3, ProviceName="Hebei", citySource=new List{
>new DP_City{
CityNode=31, CityName="Shijiazhuang"
},
new DP_City{
CityNode=32,CityName="Hengshui"
}
}}
};

return source;
}
}

The specific call in Controller uses the AJAX method in JQuery, so the result type returned For Json;

Copy code The code is as follows:

public ActionResult Index()
{
return View("DPShow");
}
List source = DPDataSource.InitalData();

public JsonResult GetProvinceSource()
{
if ( source == null || source.Count {
source = DPDataSource.InitalData();
}
return Json(source, JsonRequestBehavior.AllowGet);
}
public JsonResult GetCitySource(string proviceName)
{
source = DPDataSource.InitalData();
List citySource = new List();
citySource = source.Where( a => a.ProviceNode.ToString().Contains(proviceName)).First().citySource;
return Json(citySource, JsonRequestBehavior.AllowGet);
}

The data is prepared. At this time, it needs to be bound and displayed in the Razor view. The code is as follows:

Copy the code The code is as follows:

@model MvcApplication.Models.DP_Provice
@{
ViewBag.Title = "DPShow";
Layout = "~/Views/Shared/_Layout.cshtml";
}

Drop-down list linkage

Description:
General Generally speaking, there are many ways to use MVC to implement drop-down list binding. The main data binding method can be the Ajax method in JQuery, and you can also use the customized MVC-based Url.Acion method. Personally, it is recommended to use the MVC-based method. Url.Acion.
Firstly, the support method is relatively flexible. If the data type is complex, it can be customized to implement data encapsulation;
Secondly, the URL in JQuery needs to be formatted when passing parameters, otherwise the specified URL will not be found. Action.
If anyone has any objections to the above statement or a better implementation plan, please provide corrections or explanations, thank you.