JSON knockout dropdown using MVC & entitiy Framework

0
votes

Pretty new to this, so please bear with my ignorance . . .

I have a working JSON request and binding to display a record. This works fine - my model has a main data table which contains a foreign key to a static data table. So table Visit contains the int foreign Key to Users and my view model returns the User Full Name.

The next step is to look at how the user will update the view record, so I need to return the user Full Name as the selected option in a select drop down list. I can see plenty of articles about populating the dropdown list using JSON calls, but they seem to be in isolation, which would be fine for an "Add New" scenario, but not for an "Edit" scenario.

So here is the ection of the view to which I am binding;

  <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>

My View Model is as follows;

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);
});

Thanks in advance

1
jsonasp.net-mvcknockout.js
I don't understand your question. What do you want to do? - Fabio Luz
Fabio - I want to be able to display the visit record for editing. This is fine for text inputs, but for the username field I want to return a list of all users as a drop down with the correct currently selected user. - John Millward

1 Answers

0
votes

Ok, so I resolved my issue.....the learning process continues.

Here's my re-worked code;

View;

         <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>

View Model;

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);
});