Question

我知道这个主题有很多问题/教程，但无法解决我的问题。我得请你帮忙。第二天无法找到解决这个简单问题的方法。

我正在尝试本教程 - http://www.c-sharpcorner.com/UploadFile/abhikumarvatsa/cascading-dropdownlist-in-Asp-Net-mvc/ 这工作正常，但是一旦我尝试使用DB，我就会收到错误＆＃34; 未捕获的ReferenceError：未定义数据＆＃34;

这是我的网页

@model testEmpty.Models.Address

@{
    ViewBag.Title = "Create";
}

@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/myScripts/myScripts.js"></script>

<h2>Create</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Address</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
 <div class="form-group col-md-10">
            @Html.Label("Zone")
            @Html.DropDownList("ZoneId", ViewBag.ZoneName as SelectList, "--Select a Zone--", new { id = "ZoneId" })
            @Html.ValidationMessage("Zone", "*")
        </div>

            <div class="form-group">
                <div class="col-md-10">
                    @Html.Label("Districts of SZ")
                    <select id="DistrictSZ" name="DistrictSZ"></select>
                </div>
            </div>
<div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>
        </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

控制器

private myContext db = new myContext();

// GET: Addresses
public ActionResult Index()
{
    var zones = db.Addresses.Include(a => a.Zone);

    ViewBag.ZoneName = new SelectList(zones, "Value", "Text");

    return View(zones.ToList());
}

public JsonResult DistrictList(int id)
{
    var district = from s in db.Districts
                   where s.ZoneId == id
                   select s;

    return Json(new SelectList(district.ToArray(), "ZoneId", "Name"), JsonRequestBehavior.AllowGet);
}

脚本

$(function () {
    $('#ZoneId').change(function () {
        $.getJSON('DistrictList/' + $('#ZoneId').val(), getDistricts (data));
    });
});

function getDistricts(data) {
    var items = '<option>Select a District</option>';
    $.each(data, function (i, district) {
        items += "<option value='" + district.Value + "'>" + district.Text + "</option>";
    });
    $('#DistrictSZ').html(items);
}

据我了解，我的问题是JSON。我做错了什么？

Answer 1

首先，您不需要返回SelectList（javascript对c＃类一无所知）

public JsonResult DistrictList(int id)
{
  var district = db.Districts.Where(d => d.ZoneId == id).Select(d => new
  {
    Value = d.ZoneId, // this look wrong - see note below
    Text = d.Name
  });
  return Json(district, JsonRequestBehavior.AllowGet);
}

然后在你的脚本中

var url = '@Url.Action("DistrictList")'; // ensure your url's are properly generated
var districts = $('#DistrictSZ'); // cache it
$('#ZoneId').change(function () {
  $.getJSON(url, { id: $(this).val() }, function (data) {
    districts.empty(); // remove existing options
    districts.append($('</option>').val('').text('Select a District'));
    $.each(data, function (i, district) {
      districts.append($('</option>').val(district.Value).text(district.Text));
    });
  });
});

事实上，由于ZoneId始终相同，您只需返回Name值的集合

 var district = db.Districts.Where(d => d.ZoneId == id).Select(d => d.Name);

和

$('#ZoneId').change(function () {
  var zoneID = $(this).val();
  $.getJSON(url, { id: zoneID }, function(data) {
    districts.empty(); // remove existing options
    districts.append($('</option>').val('').text('Select a District'));
    $.each(data, function (i, district) {
      districts.append($('</option>').val(zoneID).text(district));
    });
  });
});

但是你的代码生成的所有选项都具有相同的值（ZoneId）并没有多大意义，所以我怀疑你真的想要使用District的另一个属性 - 即它的{{1 （或Id？）属性。

Answer 2

也许你应该用这样的匿名函数来处理你的回调函数：

$.getJSON('DistrictList/' + $('#ZoneId').val(), success(data){
    getDistricts(data);
})

Answer 3

您将getDistricts的返回值传递给$.getJSON的回调变量。

$.getJSON('DistrictList/' + $('#ZoneId').val(), getDistricts (data));

您需要像这样传递函数引用

$.getJSON('DistrictList/' + $('#ZoneId').val(), getDistricts);

需要帮助才能解决 - 未捕获的ReferenceError：未定义数据

3 个答案: