使用下拉列表 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; }
}

工厂控制器

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 中渲染局部视图

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

_Factory创建局部视图

@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" })

局部视图中的 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);
}

国家/地区下拉列表有效。 但城市 DDL 不起作用。数据没有被绑定。 当CountryId 被更改时，它涉及到 jquery 脚本。我可以使用警报识别它。但是在脚本中的 URL 属性之后它不起作用。

Success 方法没有被执行。我认为问题在于我呈现网址的方式。我尝试了不同的方法。但还是没能解决。这些视图和控制器位于一个区域中。

请帮助我。提前致谢！

Answer 1

您没有将第一个下拉列表的选定值传递给您的控制器方法，因此它会引发异常（country 是 typeof int 并且不能是 null）。你的脚本应该是（注意它不清楚为什么你会通过使用new { id="CountryId" } 将id 属性从id="Country" 更改为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 方法中返回视图，则不会填充城市下拉列表，从而迫使用户重新选择它。建议您开始使用视图模型并查看此DotNetFiddle中的代码