CODEWITHSUNDEEP
c#asp.net-mvcentity-frameworkasp.net-mvc-4knockout.js
anchor
anchor

Reputation: 1885

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

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

Upvotes: 0

Views: 719

Answers (1)

Inspector Squirrel
Inspector Squirrel

Reputation: 2548

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

Upvotes: 5

Related Questions