首页 > 代码库 > MVC之联动学习

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 =http://www.mamicode.com/ 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>

 

MVC之联动学习