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>

 

MVC之聯動學習