MVC二级联动使用$.getJSON方法

本篇使用jQuery的$.getJSON()实现二级联动。

 

□ View Models

namespace MvcApplication1.Models
{
    public class Province
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }

    public class City
    {
        public int ID { get; set; }
        public int ProvinceID { get; set; }
        public string Name { get; set; }
        public string ZipCode { get; set; }
    }
}

 

□ 模拟一个服务层获取数据

using System.Collections.Generic;
using System.Linq;
using MvcApplication1.Models;

namespace MvcApplication1
{
    public static class Service
    {
        public static List<Province> GetProvices()
        {
            List<Province> result = new List<Province>();
            result.Add(new Province(){ID = 1,Name = "山东省"});
            result.Add(new Province(){ID = 2,Name = "江苏省"});
            return result;
        }

        public static List<City> GetCitiesByProvince(int provinceId)
        {
            List<City> result = new List<City>();
            result.Add(new City(){ID=1,Name = "济南市",ProvinceID = 1,ZipCode = "001"});
            result.Add(new City() { ID = 2, Name = "青岛市", ProvinceID = 1, ZipCode = "002"});
            result.Add(new City() { ID = 3, Name = "南京市", ProvinceID = 2, ZipCode = "003" });
            result.Add(new City() { ID = 4, Name = "苏州市", ProvinceID = 2, ZipCode = "004" });

            return result.Where(r => r.ProvinceID == provinceId).ToList();
        }
    }
}

 

□ HomeController

遍历集合，以List<SelectListItem>返回给前台视图。

using System;
using System.Collections.Generic;
using System.Web.Mvc;
using MvcApplication1.Models;

namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public JsonResult GetProvinces()
        {
            List<SelectListItem> items = new List<SelectListItem>();
            var provinces = Service.GetProvices();
            foreach (Province p in provinces)
            {
                items.Add(new SelectListItem()
                {
                    Text = p.Name,
                    Value = Convert.ToString(p.ID)
                });
            }
            if (!items.Count.Equals(0))
            {
                items.Insert(0, new SelectListItem(){Text = "请选择",Value = ""});
            }
            return Json(items, JsonRequestBehavior.AllowGet);
        }

        public JsonResult GetCities(string id)
        {
            List<SelectListItem> items = new List<SelectListItem>();
            if (!string.IsNullOrEmpty(id))
            {
                var cities = Service.GetCitiesByProvince(int.Parse(id));
                foreach (City c in cities)
                {
                    items.Add(new SelectListItem()
                    {
                        Text = string.Concat(c.ZipCode, " ",c.Name),
                        Value = c.ID.ToString()
                    });
                }
                if (!items.Count.Equals(0))
                {
                    items.Insert(0, new SelectListItem(){Text = "请选择",Value = ""});
                }
            }
            return Json(items, JsonRequestBehavior.AllowGet);
        }

    }
}

 

□ Home/Index.cshtml视图

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

选择省：<select id="p"></select> <br/>
选择市：<select id="c"></select>

@section scripts
{
    <script type="text/javascript">
        $(function() {
            getProvince();

            $('#p').change(function() {
                changeCity();
            });
        });

        //加载省
        function getProvince() {
            $.getJSON('@Url.Action("GetProvinces","Home")', function (data) {
                $('#p').empty();
                $.each(data, function(i, item) {
                    $('#p').append($('<option></option>').val(item.Value).text(item.Text));
                });
            });
        }

        //设置城市清空
        function emptyCity() {
            $('#c').empty();
            $('#c').append($('<option></option>').val('').text('请选择'));
        }

        //根据省加载城市
        function changeCity() {
            var selectedProvinceId = $.trim($('#p option:selected').val());
            if (selectedProvinceId.length == 0) {
                emptyCity();
            } else {
                $.getJSON('@Url.Action("GetCities","Home")', { id: selectedProvinceId }, function (data) {
                    $('#c').empty();
                    $.each(data, function(i, item) {
                        $('#c').append($('<option></option>').val(item.Value).text(item.Text));
                    });
                });
            }
        }
    </script>
}

 

结果：

参考资料：
※ Kevin Tseng