需要幫助來解決-Uncaught ReferenceError：數據未定義

Question

我知道該主題有很多問題/教程，但不能解決我的問題。 我必須尋求您的幫助。 第二天無法找到解決這個簡單問題的方法。

我正在按照本教程中的方法進行嘗試-http: //www.c-sharpcorner.com/UploadFile/abhikumarvatsa/cascading-dropdownlist-in-Asp-Net-mvc/效果很好，但是一旦我從DB嘗試過，我就是收到錯誤“ 未捕獲的ReferenceError：未定義數據 ”

這是我的網頁

@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對ac＃類一無所知）

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另一個屬性-即其Id （或DistrictId ？）屬性。

Answer 2

也許您應該使用匿名函數來處理回調函數，如下所示：

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

Answer 3

您要將getDistricts的返回值getDistricts給$.getJSON的回調變量。

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

您需要像這樣傳遞函數引用

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