jquery MVC4 接收 JSON答案

【问题标题】：jquery MVC4 receive JSONjquery MVC4 接收 JSON
【发布时间】：2013-11-01 08:56:29
【问题描述】：

当特定操作发生时，我想将 json 数据从我的控制器发送到我的视图。

我在控制器上使用它来发送数据

[HttpGet] 
 public JsonResult JSONGetParking(int buildingID){

     return this.Json(
                          new
                          {
                              Result = (from obj in db.Parkings.Where(p => p.buildingID == buildingID) select new { ID = obj.ID, Name = obj.note })
                          }
                          , JsonRequestBehavior.AllowGet
                       );
}

效果很好

在我的脚本中我使用了这个：

FloorScript.js

$(document).ready(function () {
        $('#buildingID').change(function () {
            alert("what is not");
            $.getJSON('JSONGetParking?buildingID=' + $('#buildingID').val(), function (data) {
                alert("afd");
                var items = " ";
                $.each(data, function (obx, oby) {
                    items += "<option value='" + oby.ID + "'>" + oby.Name + "</option>";
                });
                $('#parkingID').html(items);
            });
        });
    });

我打开了谷歌浏览器，我可以看到这样的请求和响应：

我可以看到我提醒的两个文本

但是，在我的选择器上，我只看到 undefined value

HTML

<div id="editor-label">
        <select id="parkingID" name="parkingID"></select>
    </div>

我已经在这个中添加了 jquery

@section scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/Scripts/FloorScript.js");
}

【问题讨论】：

标签： javascript jquery asp.net-mvc json asp.net-mvc-4

【解决方案1】：

您没有在正确的变量上循环。

你这样做了：

$.each(data, function (obx, oby) {

而你应该这样做：

$.each(data.Result, function (obx, oby) {

这在您提供的 Google Chrome 屏幕截图中非常明显。如您所见，返回的 JSON 有一个名为 Result 的属性，它是集合，而您循环的是不是数组的 data 变量 - 它只是一个具有名为 Result 的属性的 JavaScript 对象，它是你想要循环的数组。

我也会替换：

$.getJSON('JSONGetParking?buildingID=' + $('#buildingID').val(), function (data) {

与：

$.getJSON('JSONGetParking', { buildingID: $('#buildingID').val() }, function (data) {

当然要摆脱这个硬编码的 url 并使用 url 助手来生成它，在下拉列表中作为 HTML5 data-* 属性：

@Html.DropDownListFor(
    x => x.BuildingId, 
    Model.Buildings, 
    new { 
        id = "buildingID", 
        data_url = Url.Action("JSONGetParking") 
    }
)

然后在更改事件中，您可以轻松检索此 url 并避免对其进行硬编码（当然，当您将代码部署在 IIS 中的虚拟目录中或只是更改应用程序的路由模式时，您会冒着破坏代码的风险):

$('#buildingID').change(function () {
    var url = $(this).data('url');
    $.getJSON(url, { buildingID: $('#buildingID').val() }, function (data) {

好的，现在开始的乱七八糟已经收拾好了。

【讨论】：

当我创建Result 时它可以工作，但是，我不能使用url.action，因为我希望在另一个下拉列表更改时调用 jquery 方法，对吗？
我接受了答案，但请您告诉我其他下拉操作吗？
这不会改变与data-url 属性相关的任何内容。这是您订阅更改事件的#buildingID 下拉列表，因此将 data-url 属性放在它上面是有意义的。正是这个下拉菜单进行 AJAX 调用。
哦，对不起，我明白你的意思了。在我的回答中，我将 data-url 放在了 #parkingID 下拉列表中。这是一个错误。您显然应该将其放在#buildingID 下拉列表中。我将更新我的答案以反映这一点。
你是我认识的最棒的人，非常非常非常非常非常感谢你

【解决方案2】：

在每个循环中使用 data.Result

$(document).ready(function () {
        $('#buildingID').change(function () {
            alert("what is not");
            $.getJSON('JSONGetParking?buildingID=' + $('#buildingID').val(), function (data) {
                alert("afd");
                var items = " ";
                $.each(data.Result, function (obx, oby) {
                    items += "<option value='" + oby.ID + "'>" + oby.Name + "</option>";
                });
                $('#parkingID').html(items);
            });
        });
    });

希望这会有所帮助...

【讨论】：