将对象的异步列表返回为 Json MVC + Knockout

Question

以下代码是常规控制器的一部分（不使用 API），我需要将多个值返回到 knockout.js 文件。问题是，文件正在等待接收 Json，当我发送列表时，我收到一条消息“SyntaxError：位置 0 的 JSON 中的意外令牌 S”，但是如果我更改签名并将对象转换为 JSON，那么异步的 linq 没有运行。

我的问题是，我怎样才能使用异步获取列表（因此它可以在淘汰赛中工作）并且仍然以 JSON 形式发送？或者我应该走哪条路？

public async Task<List<InsDetDTO>> LoadInsDet(int id)
    {
        var ins = await db.INSPECTIONDETAILS
            .Select(t =>
            new InsDetDTO()
            {
                Id = t.ID,
                AreaEquipment = t.AreaEquipment,
                InspectionID = t.InspectionID
            }).Where(t => t.InspectionID == id).ToListAsync();
        return ins;
    }

旁注，这是我第一次尝试使用淘汰赛，感谢任何信息，是的，我已经在谷歌上搜索了一段时间。

KO

var ViewModel = function () {
var self = this;
//inspection
self.inspections = ko.observableArray();
self.error = ko.observable();

//details
self.detail = ko.observableArray();

var inspUri = '/INSPECTIONs/LoadIns';
var insDetUri = '/INSPECTIONs/LoadInsDet/';

//function ajaxHelper(uri, method, data) {
function ajaxHelper(uri, method, data) {
    self.error(''); // Clear error message
    return $.ajax({
        type: method,
        //url: uri,
        url: uri,
        //async: false,
        dataType: 'json',
        contentType: 'application/json',
        data: data ? JSON.stringify(data) : null
    }).fail(function (jqXHR, textStatus, errorThrown) {
        self.error(errorThrown);
    });
}

function getAllInspections() {
    ajaxHelper(inspUri, 'GET').done(function (data) {
        self.inspections(data);
    });
}

self.getInspectionDetails = function (item) {
    ajaxHelper(insDetUri + item.Id, 'GET').done(function (data) {
        self.detail(data);
    });
}

// Fetch the initial data.
getAllInspections();
};

ko.applyBindings(new ViewModel());

查看 检查

细节

        <!-- ko if:detail() -->

        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2 class="panel-title">Detail</h2>
                </div>
                <table class="table">
                    <tr><td>AreaEquipment</td><td data-bind="text: detail().AreaEquipment"></td></tr>
                    <tr><td>InspectionID</td><td data-bind="text: detail().InspectionID"></td></tr>
                </table>
            </div>
        </div>

        <!-- /ko -->

Answer 1

玩了一点之后，我发现了我的问题，在控制器中，如果我先将结果更改为列表，然后当我转换为 JSON 时更容易在视图中捕获它们，这些是我的更改，希望是这样会帮助别人。

查看请注意，点击：$parent.getInspectionDetails 会填充 KO 代码中的详细信息，因此我可以使用 foreach 获取所有详细信息

<div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2 class="panel-title">Inspections</h2>
                </div>
                <div class="panel-body">
                    <ul class="list-unstyled" data-bind="foreach: inspections">
                        <li>
                            <strong><span data-bind="text: Id"></span></strong>
                            <span data-bind="text: date"></span>
                            <strong><span data-bind="text: labDesc"></span></strong>
                            <span data-bind="text: username"></span>
                            <small><a href="#" data-bind="click: $parent.getInspectionDetails">Details</a></small>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="alert alert-danger" data-bind="visible: error"><p data-bind="text: error"></p></div>
        </div>
<!-- ko if:detail() -->
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2 class="panel-title">Detail</h2>
                </div>
                <table class="table">
                    <tr class="list-unstyled" data-bind="foreach: detail">
                        <td>AreaEquipment</td><td data-bind="text: AreaEquip"></td>
                        <td>InspectionID</td><td data-bind="text: Inspectionid"></td>
                    </tr>
                </table>
            </div>
        </div>

控制器（注意 ToList()）

public JsonResult LoadInsDet(int id)
    {
        var ins = from t in db.INSPECTIONDETAILS.Where(t=>t.InspectionID==id).ToList()
                  //where t.InspectionID == id 
                  select new InsDetDTO()
                  {
                      Id = t.ID,
                      AreaEquip = t.AreaEquipment,
                      Inspectionid = t.InspectionID
                  };
        return Json(ins, JsonRequestBehavior.AllowGet);
    }