使用 dropdownlist mvc 无法准确调用 JQuery 脚本

Question

这是我第一次在这里发布问题。我是 mvc 新手。我想开发两个级联下拉列表。我用的是mvc4。这是我所做的。

工厂类

public class Factory
{
    [Key]
    public int FactoryId { get; set; }

    [Required(ErrorMessage = "Required")]
    public string FactoryCode { get; set; }

    [Required(ErrorMessage = "Required")]
    public string FactoryName { get; set; }

    public int City { get; set; }

    public int Country { get; set; }

我分别有具有外键关系的 Country 和 City 类

城市类

public  class City
{

   [Key]
   public int CityId { get; set; }

   [Required(ErrorMessage = "Required")]
   public string CityCode { get; set; }

   [Required(ErrorMessage = "Required")]
   public string CityName { get; set; }

   [ForeignKey("Country")]
   public int CountryId { get; set; }
   public virtual Country Country { get; set; }
}

国家级

public class Country
{
    [Key]
    public int CountryId { get; set; }

    [Required(ErrorMessage = "Required")]
    public string CountryCode { get; set; }

    [Required(ErrorMessage = "Required")]
    public string CountryName { get; set; }

    public virtual List<City> cities { get; set; }
}

工厂 Controller

public ActionResult FactoryIndex(string A, int? Id, string sortOrder, string currentFilter, string searchString, int? page)
    {
        var objContext = new KnittingdbContext();

        if (A == "New")
        {
            var model = new Factory();
            ViewData["mdl"] = model;
            ViewBag.CountryList = objContext.Countries;
            ViewBag.Module = A;


        }
.....................

在 IndexView 中渲染局部 View

@if (ViewBag.Module != null)
    {
        if (ViewBag.Module == "New")
        {
            Html.RenderPartial("~/Areas/Masters/Views/Factory/_FactoryCreate.cshtml", ViewData["mdl"]);
        }

_Factory创建部分 View

@Html.DropDownListFor(a=>a.Country,new SelectList(ViewBag.CountryList, "CountryId", "CountryName"), "Select country", new {id="CountryId", @class = "form-control"})

@Html.DropDownListFor(a => a.City; a.City, new SelectList(Enumerable.Empty<SelectListItem>(), "CityId", "CityName"), "Select city", new {@class = "form-control" })

部分 View 中的 jquery 脚本

$(function() {

            $('#CountryId').change(function () {
                $.ajax({
                    url: '/Factory/FillCity/',
                    type: "GET",
                    dataType: "JSON",
                    data: { Country: countryId },
                    success: function (cities) {
                        $("#City").html("");
                        $.each(cities, function (i, city) {
                            $("#City").append(
                                $('<option></option>').val(city.CityId).html(city.CityName));
                        });
                    }
                });
            })
        })

FactoryController 中的 ActionResult 获取相关城市数据

public ActionResult FillCity(int country)
{
    var db = new KnittingdbContext();
    var cities = db.Cities.Where(c =>c.CountryId == country);
    return Json(cities, JsonRequestBehavior.AllowGet);
}

国家/地区下拉列表正在运行。但 City DDL 不起作用。数据不会被绑定(bind)。当 CountryId 发生更改时，它会出现在 jquery 脚本中。我可以使用警报识别它。但是在脚本中的 URL 属性之后它不起作用。

成功方法没有被执行。我认为问题在于我呈现网址的方式。我用不同的方式尝试过。但还是没能解决。这些 View 和 Controller 位于一个区域中。

请帮助我。提前致谢!

Answer 1

您没有将第一个下拉列表的选定值传递给 Controller ​​方法，因此它会抛出异常(country 的类型为 int 并且不能为 null)。您的脚本应该是(请注意，不清楚为什么您要将 id 属性从 id="Country" 更改为 id="CountryId" 通过使用new { id="CountryId"} 因此此示例使用默认值

var cityDropdown = $("#City"); // cache it to avoid repeatedly searching the DOM
$('#Country').change(function () {
  $.ajax({
    url: '@Url.Action("FillCity", "Factory")', // dont hard code your url's
    type: "GET",
    dataType: "JSON",
    data: { Country: $(this).val() }, // pass the selected value
    success: function (cities) {
        cityDropdown.empty();
        $.each(cities, function (i, city) {
            cityDropdown.append($('<option></option>').val(city.CityId).html(city.CityName));
        });
    }
});

更简单

$.getJSON('@Url.Action("FillCity", "Factory")', { Country: $(this).val() }, function(cities){
    cityDropdown.empty();
    ... 
});

另请注意，您的方法正在序列化 typeof City 的所有属性，包括 CityCode、CountryId 和 Country (以及您从未使用过的所有属性(Country)，因此这是浪费带宽并且只会降低性能(并且有可能导致循环引用异常)。将您的方法更改为

public JsonResult FillCity(int country)
{
    var db = new KnittingdbContext();
    var cities = db.Cities.Where(c => c.CountryId == country).Select(c => new
    {
      CityId = c.CityId,
      CityName = c.CityName
    };
    return Json(cities, JsonRequestBehavior.AllowGet);
}

还请注意，您的代码还存在其他问题，例如，如果您出现验证错误并在 POST 方法中返回 View ，则不会填充城市下拉列表，从而迫使用户重新重新选择。建议您开始使用 View 模型并查看此 DotNetFiddle 中的代码