AspnetMvc实现无刷新省市联动功能

1、Control层

/// <summary> /// action方法根据省份编号返回json形式的城市信息 /// </summary> /// <param name="p">省份编号</param> /// <returns></returns> public ActionResult GetCityList(string p) { ; IList<City> cityModelList =//根据省份编号返回城市信息 var pList = new SelectList(cityModelList, "CityId", "CityName"); return Json(pList, JsonRequestBehavior.AllowGet); } //绑定省份信息 public void BindProvince(string defaultText = "请选择", string defaultValue = "") { var dt =// 省份信息 IList<SelectListItem> items = new List<SelectListItem>(); items.Add(new SelectListItem { Text = defaultText, Value = "", Selected = true }); foreach (var dr in dt) { items.Add(new SelectListItem { Text = dr.ProvinceName, Value = dr.ProvinceCode }); } this.controller.ViewData["Province"] = items; this.controller.ViewData["ddlProvince"] = defaultValue ?? string.Empty; } //绑定省市信息 public void BindCity(string provinceId, string defaultText = "请选择", string defaultValue = "") { IList<SelectListItem> items = new List<SelectListItem>(); if (provinceId == string.Empty) { items.Add(new SelectListItem { Text = defaultText, Value = defaultValue }); } else { var dt = //根据省份编号获取城市信息 foreach (var dr in dt) { items.Add(new SelectListItem { Text = dr.CityName, Value = dr.CityId }); } } this.controller.ViewData["City"] = items; this.controller.ViewData["ddlCity"] = defaultValue ?? string.Empty; }

2、View层
<script src="@Url.Content("~/Scripts/provinceCity.js")" type="text/javascript"></script>

<div class="editor-label">
            省份城市
        </div>
        <div>
            @Html.DropDownList("ddlProvince", ViewData["Province"] as IEnumerable<SelectListItem>)
            @Html.DropDownList("ddlCity", ViewData["City"] as IEnumerable<SelectListItem>)
            @Html.ValidationMessageFor(model => model.CityId)
        </div>


    //隐藏字段用于在js调用，设置url路径 
    @Html.Hidden("GetCityList", Url.Action("GetCityList", "Enterprise")) 
3、Js代码
     $(document).ready(function () {
 
    $("#ddlProvince").change(function () { getCity($(this).val()); });
 
    function getCity(provinveCode) {
        $("#ddlCity").html(""); //清空
 
        $.ajax({
            type: "GET",
            url: $("#GetCityList").val(),
            data: "p=" + provinveCode + "&date=" + new Date(),
            dataType: "json",
            success: function (json) {
                if (json.length > 0) {
                    for (var i = 0; i < json.length; i++) {
                        $("#ddlCity").append("<option value='" + json[i].Value + "'>" + json[i].Text + "</option>");
                    }
                } else {
                    $("#ddlCity").append("<option value=''>请选择</option>");
                }
            },
            error: function (data) {
                alert(data);
            }
 
        });
    }
});