创建联动的 DropdownList in ASP.net MVC 3 and jQuery (2)

1. AjaxBindDropdownlistController.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MvcAppEntities;

namespace MvcAppDemoCly.Controllers

{

    public class AjaxBindDropdownlistController : Controller

    {

        public ActionResult LoadProvince()

        {

            var provinces = Province.GetProvinces();

            return Json(new SelectList(provinces, "Id", "Name"), JsonRequestBehavior.AllowGet);

        }

        public ActionResult LoadCity()

        {

            //string testuservalue = Request.Params["nouservar"];

            int provinceId = -1;

            Int32.TryParse(Request.Params["provinceid"], out provinceId);

            var cities = City.GetCitiesByProvinceId(provinceId);

            //return Json(new SelectList(cities,"Id","Name"), JsonRequestBehavior.AllowGet);

            return Json(cities, JsonRequestBehavior.AllowGet);

        }

        //

        // GET: /AjaxBindDropdownlist/

        public ActionResult Index()

        {

            return View();

        }

        //

        // GET: /AjaxBindDropdownlist/Details/5

        public ActionResult Details(int id)

        {

            return View();

        }

        //

        // GET: /AjaxBindDropdownlist/Create

        public ActionResult CreateProvince()

        {

            return View();

        }

        //

        // POST: /AjaxBindDropdownlist/Create

        [HttpPost]

        public ActionResult CreateProvince(Province p)

        {

            try

            {

                if (!this.ModelState.IsValid)

                {

                    return View();

                }

                if (p != null)

                {

                    // TODO: Add insert logic here

                    Province.InsertProvince(p);

                    return RedirectToAction("Index");

                }

                ViewData["CreateResult"] = "Created Failed!";

                return View();

            }

            catch

            {

                ViewData["CreateResult"] = "Created Failed!";

                return View();

            }

        }

        //

        // GET: /AjaxBindDropdownlist/Create

        public ActionResult CreateCity()

        {

            var provinceList = Province.GetProvinces();

            ViewData["Provinces"] = new SelectList(provinceList, "Id", "Name");

            return View();

        }

        //

        // POST: /AjaxBindDropdownlist/Create

        [HttpPost]

        public ActionResult CreateCity(City c)

        {

            var provinceList = Province.GetProvinces();

            ViewData["Provinces"] = new SelectList(provinceList, "Id", "Name");

            try

            {

                if (!this.ModelState.IsValid)

                {

                    return View();

                }

                if (c != null)

                {

                    // TODO: Add insert logic here

                    City.InsertCity(c);

                    return RedirectToAction("Index");

                }

                ViewData["CreateResult"] = "Created Failed!";

                return View();

            }

            catch

            {

                ViewData["CreateResult"] = "Created Failed!";

                return View();

            }

        }

        //

        // GET: /AjaxBindDropdownlist/Edit/5

        public ActionResult Edit(int id)

        {

            return View();

        }

        //

        // POST: /AjaxBindDropdownlist/Edit/5

        [HttpPost]

        public ActionResult Edit(int id, FormCollection collection)

        {

            try

            {

                // TODO: Add update logic here

                return RedirectToAction("Index");

            }

            catch

            {

                return View();

            }

        }

        //

        // GET: /AjaxBindDropdownlist/Delete/5

        public ActionResult Delete(int id)

        {

            return View();

        }

        //

        // POST: /AjaxBindDropdownlist/Delete/5

        [HttpPost]

        public ActionResult Delete(int id, FormCollection collection)

        {

            try

            {

                // TODO: Add delete logic here

                return RedirectToAction("Index");

            }

            catch

            {

                return View();

            }

        }

    }

}

2. Index.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

    Index

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <script src="../../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">

        function json2string(strObject) {

            var c, i, l, s = '', v, p;

            switch (typeof strObject) {

                case 'object':

                    if (strObject) {

                        if (strObject.length && typeof strObject.length == 'number') {

                            for (i = 0; i < strObject.length; ++i) {

                                v = json2string(strObject[i]);

                                if (s) {

                                    s += ',';

                                }

                                s += v;

                            }

                            return '[' + s + ']';

                        } else if (typeof strObject.toString != 'undefined') {

                            for (i in strObject) {

                                v = strObject[i];

                                if (typeof v != 'undefined' && typeof v != 'function') {

                                    v = json2string(v);

                                    if (s) {

                                        s += ',';

                                    }

                                    s += json2string(i) + ':' + v;

                                }

                            }

                            return '{' + s + '}';

                        }

                    }

                    return 'null';

                case 'number':

                    return isFinite(strObject) ? String(strObject) : 'null'; case 'string': l = strObject.length; s = '"';

                    for (i = 0; i < l; i += 1) {

                        c = strObject.charAt(i);

                        if (c >= ' ') {

                            if (c == '\\' || c == '"') {

                                s += '\\';

                            }

                            s += c;

                        } else {

                            switch (c) {

                                case '\b': s += '\\b'; break;

                                case '\f': s += '\\f'; break;

                                case '\n': s += '\\n'; break;

                                case '\r': s += '\\r'; break;

                                case '\t': s += '\\t'; break;

                                default: c = c.charCodeAt(); s += '\\u00' + Math.floor(c / 16).toString(16) + (c % 16).toString(16);

                            }

                        }

                    }

                    return s + '"';

                case 'boolean': return String(strObject);

                default: return 'null';

            }

        }

        $(document).ready(function () {

            LoadProvince();

            $("#city").append("<option value='-1'>" + "Please select…" + "</option>");

            $("#province").change(function () {//chang事件

                $("#city").empty();

                var provinceid = $("#province").val();

                LoadCity(provinceid);

            });

        });

        function LoadProvince() {//load province

            $.ajax({

                type: "get",

                dataType: "json",

                url: "/AjaxBindDropdownlist/LoadProvince",

                success: function (msg) {

                    var data = msg;

                    $("#province").append("<option value='-1'>" + "Please select…" + "</option>");

                    //alert(json2string(data));

                    //alert(data[0].Text);

                    for (var i = 0; i < data.length; i++) {

                        $("#province").append("<option value='" + data[i].Value + "'>" + data[i].Text + "</option>");

                    }

                }

            });

        }

        function LoadCity(provinceid) {//LoadCity

            $.ajax({

                type: "get",

                dataType: "json",

                url: "/AjaxBindDropdownlist/LoadCity",

                data: { provinceid: provinceid, nouservar: "testvalue" },

                success: function (msg) {

                    var data = msg;

                    //alert(json2string(data));

                    //alert(data[0].Name);

                    for (var i = 0; i < data.length; i++) {

                        $("#city").append("<option value='" + data[i].Id + "'>" + data[i].Name + "</option>");

                    }

                }

            });

        }

    </script>

    <h2>

        Index</h2>

    <%: Html.ActionLink("Create Province","CreateProvince") %>

    <%: Html.ActionLink("Create City","CreateCity") %>

    <br />

    <br />

    <br />

    <div id="SelectTest">

        Province:<select id="province" name="D1">

        </select><br />

        City:

        <select id="city" name="D2">

        </select>

    </div>

</asp:Content>

3. Models

a) ProvinceModel.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.ComponentModel;

using System.ComponentModel.DataAnnotations;

namespace MvcAppDemoCly.Models

{

    public class Province

    {

        public int Id { get; set; }

        [Required]

        [DisplayName("Province Name")]

        public string Name { get; set; }

        [DisplayName("Description")]

        public string Description { get; set; }

    }

}

b) CityModel.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.ComponentModel;

using System.ComponentModel.DataAnnotations;

namespace MvcAppDemoCly.Models

{

    public class City

    {

        public int Id { get; set; }

        [Required]

        [DisplayName("Province Name")]

        public string Name { get; set; }

        [DisplayName("Description")]

        public string Description { get; set; }

        public int ProvinceId { get; set; }

    }

}