MVC3 Razor JSon/Javascript --一个下拉框的内容取决于对另一个下拉框的选择

Question

我有一个问题，转换一个样本应用程序，我发现，工作，以满足我的需求。我还没能弄清楚我到底做错了什么。在转换后的应用程序中，我甚至没有从JSon调用返回到警报。首先，我将复制示例的模型、控制器和视图。然后我将复制转换后的应用程序的模型、控制器和视图。我在调用控制器时遇到了一个断点，看起来JSon对象中的SelectList数据被正确打包了。但我一定是做错了什么。任何帮助理解这个问题的人都将不胜感激。

---------------------------- Working Sample Model ------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace SimpleMVCJSONSample.Models
{
public class MyViewModel
{
    public int? Year { get; set; }
    public int? Month { get; set; }

    public IEnumerable<SelectListItem> Years
    {
        get
        {
            return Enumerable.Range(2000, 12).Select(x => new SelectListItem
            {
                Value = x.ToString(),
                Text = x.ToString()
            });
        }
    }
}
}

-------------------------- Working Sample Controller ------------------

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

using System.Web.Mvc;
using SimpleMVCJSONSample.Models;

namespace SimpleMVCJSONSample.Controllers
{

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel();
        return View(model);
    }

    public ActionResult Months(int year)
    {
        if (year == 2011)
        {
            var jsonRet1 = Json(
                Enumerable.Range(1, 3).Select(x => new { value = x, text = x }),
                JsonRequestBehavior.AllowGet
            );
            return jsonRet1;
        }
             var jsonRet2 = Json(
            Enumerable.Range(1, 12).Select(x => new { value = x, text = x }),
            JsonRequestBehavior.AllowGet
        );
        return jsonRet2;
    }
}
}

-------------------------- Working Sample View -----------------

@{
ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>

@model SimpleMVCJSONSample.Models.MyViewModel

@Html.DropDownListFor(
x => x.Year, 
new SelectList(Model.Years, "Value", "Text"),
"-- select year --"
)

@Html.DropDownListFor(
x => x.Month, 
Enumerable.Empty<SelectListItem>(),
"-- select month --"
)

<script type="text/javascript">
$('#Year').change(function () {
    var selectedYear = $(this).val();
    if (selectedYear != null && selectedYear != '') {
        $.getJSON('@Url.Action("Months")', { year: selectedYear }, function (months) {
            alert(months);
            var monthsSelect = $('#Month');
            monthsSelect.empty();
            $.each(months, function (index, month) {
                monthsSelect.append($('<option/>', {
                    value: month.value,
                    text: month.text
                }));
            });
        });
    }
});
</script>

---------------------------------END OF Working SAMPLE-----------------------

--------------------------My Converted Model ------------------------

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Microsoft.Practices.EnterpriseLibrary.ExceptionHandling;
using ONSM.Common.Logging;
using VW40.Data.Model;
using VW40.Services;

namespace VW40.Web.Models
{
public class CompanyPeopleViewModel
{
    private Log _log;
    private ExceptionManager _exceptionManager;
    private readonly ICompanyService _companyService;
    private readonly IPersonService _personService;

    public CompanyPeopleViewModel(Log log, ExceptionManager exceptionManager,     ICompanyService companyService, IPersonService personService)
    {

        _companyService = companyService;
        _personService = personService;
        _log = log;
        _exceptionManager = exceptionManager;
    } 

    public int Company { get; set; }
    public int Person { get; set; }

    public IEnumerable<SelectListItem> CompanySelectList
    {
        get
        {
            return _companyService.GetCompanies().OrderBy(x => x.CompanyName).Select(x => new SelectListItem
                    {
                        Value = x.CompanyID.ToString(),
                        Text = x.CompanyName

                    });
        }
    }
}
}

--------------------------- My Converted Controller ----------------

using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using Microsoft.Practices.EnterpriseLibrary.ExceptionHandling;
using ONSM.Common.Logging;
using VW40.Data.Model;
using VW40.MVC.Models;
using VW40.Services;
using VW40.Services.AccessControl;
using VW40.Web.Models;
using System.Web;


namespace VW40.MVC.Controllers
{
[Authorize(Roles = "Administrator")]
public class AccessControlController : MembershipAdministrationController_Base
{
    private Log _log; 
    private ExceptionManager _exceptionManager;
    private IAccessControlService _accessControlService;
    private IPersonService _personControlService;
    private ICompanyService _companyService;

    public AccessControlController(
        Log log,
        ExceptionManager ExceptionManager,
        IAccessControlService AccessControlService,
        IPersonService PersonService,
        ICompanyService CompanyService
        )
    {
        _log = log;
        _exceptionManager = ExceptionManager;
        _accessControlService = AccessControlService;
        _personControlService = PersonService;
        _companyService = CompanyService;
    }

    public ActionResult Json_CompanyPeopleSelectList(int CompanyID)
    {


        var companyPersonsList = _personControlService.GetPersonsByCompanyId(CompanyID).OrderBy(x => x.Lastname + x.Firstname);

        //IEnumerable<SelectListItem> myList = companyPersonsList.Select(x => new SelectListItem
        //                                                                        {
        //                                                                                Value = x.PersonID.ToString(),
        //                                                                            Text = x.Lastname
        //                                                                        }
            //);


        var jsonRet =
            Json(
                _personControlService.GetPersonsByCompanyId(CompanyID).OrderBy(x => x.Lastname + x.Firstname).Select
                    (x => new
                              {
                                  value = x.PersonID.ToString(),
                                  text = x.Lastname
                              }), JsonRequestBehavior.AllowGet);
        return jsonRet;
    }

@model VW40.Web.Models.CompanyPeopleViewModel
@{
Layout = "~/Views/Shared/SiteLayout.cshtml";
ViewBag.Title = "UserPermissions";
}

<h2>UserPermissions</h2>

@Html.DropDownListFor(
x => x.Company, 
new SelectList(Model.CompanySelectList, "Value", "Text"),
"Select Company"
)

@Html.DropDownListFor(
    x => x.Person,
    Enumerable.Empty<SelectListItem>(),
    "-- Select Person --"
)
<script type="text/javascript">
$('#Company').change(function () {
    var selectedCompany = $(this).val();
    if (selectedCompany != null && selectedCompany != '') {
        $.getJSON('@Url.Action("Json_CompanyPeopleSelectList")', { CompanyID:     selectedCompany }, function (listOfCompanyPeople) {
            alert(listOfCompanyPeople);
            var personSelect = $('#Person');
            personSelect.empty();
            $.each(listOfCompanyPeople, function (index, person) {
                personSelect.append($('<option/>', {
                    value: person.value,
                    text: person.text
                }));
            });
        });
    }
});
</script>

------------------------------ end of Conversion ----------------

Answer 1

您是否可以通过在浏览器中输入URL直接调用您的控制器，并查看它是否返回正确的JSON数据。getJSON中没有错误处理函数，因此无法看到服务器是否正确返回了JSON响应。

在http://jquery-load-json.googlecode.com/svn/trunk/categories-ajax.html上有一个类似的例子。在本例中，第一个category下拉列表使用一个调用加载，dependent下拉列表使用第二个Ajax调用加载。如果使用此示例，只需创建返回公司人员列表的控制器，并使用loadJSON用返回值填充子类别下拉列表。

Jovan