An interactive study of MVC

First, database table design

CREATE TABLE [dbo]. [Hy_province] (    [id] [INT] NOT NULL,    [province] [NVARCHAR] (a) not null, CONSTRAINT [pk_hy_province] PRIMARY KEY CLUSTERED (    [id] ASC) with (pad_index  = off, statistics_norecompute  = off, Ignore_dup_key = O FF, Allow_row_locks  = on, allow_page_locks  = on ) on [PRIMARY]) on [Primary]go

CREATE TABLE [dbo]. [Hy_city] (    [id] [int] NOT NULL,    [city] [NVARCHAR] (a) not null,    [Provinceid] [int] is not NULL,    [ Companylevel] [INT] NULL, CONSTRAINT [pk_hy_city] PRIMARY KEY CLUSTERED (    [id] ASC) with (pad_index  = OFF, STA Tistics_norecompute  = off, Ignore_dup_key = off, allow_row_locks  = on, allow_page_locks  = on ) on [ PRIMARY]) on [Primary]go

Second, the code gets the data

        /// <summary>        ///Get Province/// </summary>         PublicJsonresult getprovincelist () {returnJson (Db.HY_Province.ToList (), jsonrequestbehavior.allowget); }        /// <summary>        ///get the city/// </summary>        /// <param name= "pid" ></param>        /// <returns></returns>         PublicJsonresult Getcitylist (intpid) {            varList = Db.HY_City.Where (c = C.provinceid = =pid).            ToList (); List<SelectListItem> item =NewList<selectlistitem>(); foreach(varCityinchlist) {Item. ADD (NewSelectListItem {Text = city.city, Value =City.id.ToString ()}); }            returnJson (item, jsonrequestbehavior.allowget); }

Third, the use of the pre-section JS to obtain data asynchronously

<script type="Text/javascript">$ (function () {getprovince ();//Loading Provinces$("#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>

Four, view page design

<select id="provinceid" name="provinceid" > </Select><Select"cityid" name="Cityid  "></Select>

An interactive study of MVC