效果图：
主要文件有Index.cshtml ,ErJLDController.cs ，还有数据库文件 。
1、首先在数据库中创建省级、城市的表，我的表如下：我用了一张表放下了省级、城市的数据，用level划分省份和城市，parentId表示该城市所在省份的id
1 namespace Mvcproject.Controllers
2 {
3 //二级联动
4 public class ErJLDController : Controller
5 {
6
7 ZjbEntities db = new ZjbEntities();
8 //
9 // GET: /Test/
10
11 public ActionResult Index()
12 {
13 //pro_city province=new pro_city();
14
15 return View();
16 }
17
18 public JsonResult getProvince() {
19
20 List<pro_city> provinceList = (from p in db.pro_city where p.level == 1 select p).ToList();
21
22
23 JsonResult Jprovince = new JsonResult();
24 Jprovince.Data = provinceList;
25 Jprovince.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
26 return Jprovince;
27
28 }
29
30 public JsonResult getCity(string pName)
31 {
32
33 //string pid = (from p in db.pro_city where p.areaValue == pName select p.id).ToString();
34 //int id = int.Parse(pid);
35 int id = int.Parse(pName);
36
37 List<pro_city> cityList = (from p in db.pro_city where p.parentId == id select p).ToList();
38
39 JsonResult Jcity = new JsonResult();
40 Jcity.Data = cityList;
41 Jcity.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
42 return Jcity;
43
44 }
45
46 }
47 }
ErJLDController.cs
1 <body>
2 <div>
3 <select id="provinceId" >
4 <option> 请选择省份</option>
5 </select>
6 <select id="cityId">
7 <option>请选择市区</option>
8 </select>
9 </div>
10
11 <script type="text/javascript">
12
13
14
15 //用json从数据库里取一级列表的参数
16 $(function () {
17
18 $.getJSON("ErJLD/getProvince/", function (obj) {
19 $.each(obj, function (i, p) {
20 $("#provinceId").append("<option value=‘"+p.id+"‘>" + p.areaValue + "</option>");
21 });
22
23 $("#provinceId").change(function () {
24 //用attr（）方法获取当前选择的option的value值（即p.id ,数据库里的id值，
25 //虽然在TestController中的getCity方法中传入的是string类型的形参，但是后来需要变换成int类型, 所以value值应该为数字）
26 var pName = $("#provinceId").attr("value");
27 $.getJSON("ErJLD/getCity?pName=" + pName, getcity);
28 });
29 });
30 });
31
32
33
34
35 function getcity(obj) {
36 $("#cityId").empty();
37 $.each(obj, function (m, v) {
38 $("#cityId").append("<option >" + v.areaValue + "</option>");
39 });
40
41 };
42
43
44
45
46 </script>
47 </body>
Index.cshtml
Asp.net MVC4 下二级联动
时间： 2024-12-29 07:48:03