


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:
public class DP_Provice
{
public int proviceID { get; set; }
public string ProviceName { get; set; }
public int ProviceNode { get; set; }
public virtual List
}
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:
public static class DPDataSource
{
public static List
{
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;
public ActionResult Index()
{
return View("DPShow");
}
List
public JsonResult GetProvinceSource()
{
if ( source == null || source.Count < 0)
{
source = DPDataSource.InitalData();
}
return Json(source, JsonRequestBehavior.AllowGet);
}
public JsonResult GetCitySource(string proviceName)
{
source = DPDataSource.InitalData();
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:
@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.

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Replace String Characters in JavaScript

HTTP Debugging with Node and http-console

Custom Google Search API Setup Tutorial
