使用 MVC 和实体框架的 JSON 剔除下拉菜单

Question

对这个很陌生，所以请原谅我的无知。 . .

我有一个有效的 JSON 请求和绑定来显示记录。这很好用——我的模型有一个主数据表，其中包含一个静态数据表的外键。所以表访问包含用户的 int 外键，我的视图模型返回用户全名。

下一步是查看用户将如何更新查看记录，因此我需要返回用户全名作为选择下拉列表中的选定选项。我可以看到很多关于使用 JSON 调用填充下拉列表的文章，但它们似乎是孤立的，这对于“添加新”场景来说很好，但不适用于“编辑”场景。

所以这是我绑定的视图的作用；

  <tbody data-bind="foreach: visitsPast">

         <tr style="font-size:11px;" data-bind="click: $parent.selectItemP" class="rowlink" data-toggle="modal" data-target="#visitModal">         
             <td data-bind="text: $data.visitdate"></td>
             <td data-bind="text: $data.visitstarttime"></td>
             <td data-bind="text: $data.visitendtime"></td>
             <td data-bind="text: $data.schoolname"></td>
             <td data-bind="text: $data.username"></td>
         </tr>
    </tbody>

我的视图模型如下；

function visitPast(visitdate, visitstarttime, visitendtime, schoolname, username, visitoffsitetime) {
    var self = this;
    self.visitdate = ko.observable(visitdate);
    self.visitendtime = ko.observable(visitendtime);
    self.schoolname = ko.observable(schoolname);
    self.username = ko.observable(username);
    self.visitstarttime = ko.observable(visitstarttime);
    self.visitoffsitetime = ko.observable(visitoffsitetime);

}


function VisitPast() {
    var self = this;
    self.visitsPast = ko.observableArray([]);
    self.selectedItemP = ko.observable();
    self.selectItemP = function (item) {
        self.selectedItemP(item);
    }
    $('#loadingPast').show()
    $.getJSON( "/api/visits/UserId/past", function (data) {
        self.visitsPast.removeAll;
        $.each(data, function (key, val) {


            self.visitsPast.push(new visitPast(moment(val.visitdate).format('DD/MM/YYYY'), val.visitstarttime, val.visitendtime, val.schoolname, val.userfullname, val.visitoffsitetime));

        });

        $('#loadingPast').hide()
    });

}

$(document).ready(function () {
    var oVisitPast = new VisitPast();
    ko.applyBindings(oVisitPast, document.getElementById('visitPast'));

    function onLoopPast() {
        var self = oVisitPast;
        $.getJSON("/api/visits/UserId/past", function (data) {
            self.visitsPast.removeAll();
            $.each(data, function (key, val) {

                self.visitsPast.push(new visitPast(moment(val.visitdate).format('DD/MM/YYYY'), val.visitstarttime, val.visitendtime, val.schoolname, val.userfullname, val.visitoffsitetime));

            });
        });
    }
    onLoopPast;
    setInterval(onLoopPast, 30000);
});

提前致谢

Answer 1

好的，所以我解决了我的问题.....学习过程继续。

这是我重新编写的代码；

查看；

         <tbody data-bind="foreach: vp.visitsPast">

         <tr style="font-size:11px;" data-bind="click: $parent.vp.selectItemP" class="rowlink" data-toggle="modal" data-target="#visitModal">


             <td data-bind="text: visitdate"></td>

             <td data-bind="text: visitstarttime"></td>
             <td data-bind="text: visitendtime"></td>
             <td data-bind="text: schoolname"></td>
             <td data-bind="text: username"></td>


         </tr>
    </tbody>
</table>
<!-- Modal for Visit -->
<div id="visitModal" data-bind="with: $root.vp.selectedItemP" role="dialog" class="modal fade" tabindex="-1" aria-labelledby="visitModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

                <h4 id="visitModalLabel">Visit Details</h4>

            </div>


            <div class="modal-body">                    
                <div class="row">
                    <div class="col-md-4">
                         <div class="form-group">
                             <div class='input-group' id="worker">
                                 <span class="input-group-addon">
                                     Worker
                                 </span>
                                 <select data-bind="options: $root.ae.visitsEPS, optionsText: 'userfullname', optionsValue: 'user_id', value:$root.vp.selectedItemP.visitep"></select>

查看模型；

function visitEPS(user_id, userfullname) {
    var self = this;

    self.user_id = ko.observable(user_id);
    self.userfullname = ko.observable(userfullname);

}


function VisitEPS() {
    var self = this;

    self.visitsEPS = ko.observableArray([]);

    $.getJSON( "/api/users/activeeps", function (data) {
        self.visitsEPS.removeAll;
        $.each(data, function (key, val) {
               self.visitsEPS.push(new visitEPS( val.user_id,  val.userfullname));
        });

    });

}

function visitPast(visitdate, visitstarttime, visitendtime, schoolname, username, visitoffsitetime, visitep) {
    var self = this;

    self.visitdate = ko.observable(visitdate);
    self.visitendtime = ko.observable(visitendtime);
    self.schoolname = ko.observable(schoolname);
    self.username = ko.observable(username);
    self.visitstarttime = ko.observable(visitstarttime);
    self.visitoffsitetime = ko.observable(visitoffsitetime);
    self.visitep = ko.observable(visitep);

}


function VisitPast() {
    var self = this;

    self.visitsPast = ko.observableArray([]);
    self.selectedItemP = ko.observable();
    self.selectItemP = function (item) {
        self.selectedItemP(item);
    }

    $.getJSON("/api/visits/UserId/past", function (data) {
        self.visitsPast.removeAll;
        $.each(data, function (key, val) {


            self.visitsPast.push(new visitPast(moment(val.visitdate).format('DD/MM/YYYY'), val.visitstarttime, val.visitendtime, val.schoolname, val.userfullname, val.visitoffsitetime, val.visitep));

        });
    });

}

$(document).ready(function () {
    //$('#loadingPast').show()
    $('#datetimepicker3').datetimepicker();
    var oVisitPast = new VisitPast();
    var oVisitEPS = new VisitEPS();

    var MasterViewModel = {
        vp: oVisitPast,
        ae: oVisitEPS
    };
    ko.applyBindings(MasterViewModel, document.getElementById('visitPast'));

    function onLoopPast() {

        var self = oVisitPast;
        $.getJSON("/api/visits/UserId/past", function (data) {
            self.vp.visitsPast.removeAll();
            $.each(data, function (key, val) {

                self.visitsPast.push(new visitPast(moment(val.visitdate).format('DD/MM/YYYY'), val.visitstarttime, val.visitendtime, val.schoolname, val.userfullname, val.visitoffsitetime, val.visitep));

            });
        });

        var self = oVisitEPS;
        $.getJSON("/api/users/activeeps", function (data) {
            self.ae.visitsEPS.removeAll;
            $.each(data, function (key, val) {
                self.visitsEPS.push(new visitEPS(val.user_id, val.userfullname));
            });

        });

  //      ko.applyBindings(MasterViewModel, document.getElementById('visitPast'));

    }
    $('#loadingPast').hide()
    onLoopPast;
    setInterval(onLoopPast, 30000);
});