MVC之联动学习

一，数据库表设计

CREATE TABLE [dbo].[HY_Province](
    [id] [INT] NOT NULL,
    [province] [NVARCHAR](50) NOT NULL,
 CONSTRAINT [PK_HY_Province] PRIMARY KEY CLUSTERED 
(
    [id] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

 

 

CREATE TABLE [dbo].[HY_City](
    [id] [INT] NOT NULL,
    [city] [NVARCHAR](50) NOT NULL,
    [provinceID] [INT] NOT NULL,
    [companyLevel] [INT] NULL,
 CONSTRAINT [PK_HY_City] PRIMARY KEY CLUSTERED 
(
    [id] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

 

二，代码获取数据

        /// <summary>
        /// 获取省份
        /// </summary>
        public JsonResult GetProvincelist()
        {
            return Json(db.HY_Province.ToList(), JsonRequestBehavior.AllowGet);
        }
        /// <summary>
        /// 获取城市
        /// </summary>
        /// <param name="pid"></param>
        /// <returns></returns>
        public JsonResult GetCitylist(int pid)
        {
            var list = db.HY_City.Where(c => c.provinceID == pid).ToList();
            List<SelectListItem> item = new List<SelectListItem>();
            foreach (var City in list)
            {
                item.Add(new SelectListItem { Text = City.city, Value = City.id.ToString() });
            }
            return Json(item, JsonRequestBehavior.AllowGet);
        }

 

三，使用前段JS进行异步获取数据

<script type="text/javascript">
    $(function () {
        GetProvince(); //加载省份
        $("#ProvinceId").change(function () {
            GetCity();
        });
    });
    function GetProvince() {
        $.getJSON(
            "/Register/GetProvincelist",
            function (data) {
                $.each(data, function (i, item) {
                    alert(i);
                    alert(item);
                    $("<option></option>").val(item["id"]).text(item["province"]).appendTo($("#ProvinceId"));
                })
            });
                    GetCity();
    }
    function GetCity() {
        $("#CityId").empty();
        $.getJSON(
            "/Register/GetCitylist",
            { pid: $("#ProvinceId").val() },
            function (data) {
                $.each(data, function (i, item) {
                    $("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($("#CityId"));

                })
            });
    }
</script>

四，视图页面设计

<select id="ProvinceId" name="ProvinceId">
</select>
<select id = "CityId" name="CityId">
</select>