How to bind multiple view models to controller using knockout and asp.net mvc

Question

Iam using knockout , asp.net MVC , entity framework and I would like to know how I can go about saving all the info from my sub view models into one controller method

In my knockout I have multiple viewmodels which contain different info which is related to each other such that when I pass to the controller I have to pass info pertaining to all view models, such that when I save upon clciking the save button all the information is saved to the various "different tables at simultaneously I know how to pass one view model but I would like to know how to pass two models in one statement to the controller "two different methods in controller" my current structure is like this

function FullEmployeeProfile ()
 var fep = this 
{
      fep.ei.Name = ko.observable("");
      fep.ei.ID = ko.observable("");
      fep.ei.Gender = ko.observable("");
      fep.ei.address = ko.observable("") ; 
      fep.eh.CompanyName = ko.observable();
      fep.eh.Designation = ko.observable();
      fep.eh.StartDate = ko.observable();
      fep.eh.EndDate = ko.observable();

}

function employeeHistory() {
        var eh = this 

         var self = this;
        eh.CompanyName = ko.observable();
        eh.Designation = ko.observable();
        eh.StartDate = ko.observable();
        eh.EndDate = ko.observable();
}

function employeeEducation() {
    var ee = this;


        ee.Degree = ko.observable();
        ee.YearOfPassing = ko.observable();
        ee.Percentage = ko.observable();
        ee.Institute = ko.observable()


    ee.fullEmployeeDetails = new FullEmployeeProfile();

    ee.saveEmployeeDetails = function() {

        $.when(postSecureData("/api/EmployeeProfile/", ko.toJSON(ee.fullEmployeeDetails)))
        .done(function (empProfile) {
            if (response.ResponseRequired == false) {
            document.getElementById("save-empDetails-btn").innerHTML = "Saving...";
            setTimeout(function () { document.getElementById("save-empDetails-btn").innerHTML = "Save" }, 2500);
            $.msgGrowl({
                type: 'info',
                title: 'Employee information saved',
                text: 'Employee information details succesfully saved',
                position: 'bottom-right',
                lifetime: 3000
        }); }

        });
    };




}
function EmployeeInfo() {
    var ei = this;

     var ei = this;
        ei.Name = ko.observable("");
        ei.ID = ko.observable("");
        ei.Gender = ko.observable("");
        ei.address = ko.observable("") ;     
    }

Why not just create a view model that encapsulates both of these other view models? — DavidG
– DavidG, Commented Jul 17, 2015 at 10:52
How would I go about that would it be something like this? var masterVM = (function () { this.EducationalDetails = new EducationalDetails(), this.EmploymentHistory = new ModelEmploymentHistory(); }); — anchor
– anchor, Commented Jul 17, 2015 at 11:08
Yes, that would work, pass your masterVM to the controller and deal with the contained models individually. — Inspector Squirrel
– Inspector Squirrel, Commented Jul 17, 2015 at 11:14

Inspector Squirrel · Accepted Answer · 2015-07-17 11:10:54Z

5

As suggested by DavidG, an encapsulating model would be the approach to take. It seems like you're confusing the idea of view models and domain/data models, or at the very least your concept of view models is a little confused.

Your view model should be exactly, literally, what it sounds like. It is a model that contains all the information you need for the specific view. If you need to contain multiple views inside your main view, you also need to contain multiple view models inside your main view model. This is common practice.

For example:

function EmployeeProfileAndHistory() {
    var profile = new FullEmployeeProfile();
    var history = new employeeHistory();
}

Pass this to your API. (code could be wrong as not overly familiar with knockout, but the gist is the same.)

answered Jul 17, 2015 at 11:10

Inspector Squirrel

2,5462 gold badges29 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

anchor Over a year ago

ok so the pass to the API would then be

var fullEmployeeDetail = new EmployeeProfileAndHistory(); 	$.when(postSecureData("/api/EmployeeProfile/", ko.toJSON(ee.fullEmployeeDetails)))

Inspector Squirrel Over a year ago

Yeah if you use my version, that would be correct. Make sure your variable names match though ;)

DavidG Over a year ago

OMG stealing my ideas! :) But yeah, +1

Inspector Squirrel Over a year ago

You don't need no rep sir! ;D

Collectives™ on Stack Overflow

How to bind multiple view models to controller using knockout and asp.net mvc

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related