创建联动的 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; }
    }
}