KnockoutJs & Asp.Net MVC 4 - multi model views Submit

Question

I am in a situation where I have 2 tabs and for each tab I have a partial views, I am using jquery UI to create my tabs.

I have two options for each user 1. to save, 2. to submit.

On save it will save for that particular tab ( where the tab contains model view 1) for the second the same ( where this tabe contains model view 2 )

How can I submit both models from both tabs with one click?

I have something like this in my save for tab 1 and tab 2.

My first view model.

       self.save = function() {
            $.ajax({
                url: "MyTabs",
                data: { data: ko.toJSON(self.firstVM) },
                type: "post", 
                contentType: "application/json",
                success: function(result) { alert(result); }
            });
        };

My second view Model.

         self.save = function() {
            $.ajax({
                url: "MyTabs",
                data: { data: ko.toJSON(self.secondVM) },
                type: "post", 
                contentType: "application/json",
                success: function(result) { alert(result); }
            });
         };

Do you want them to submitted to a single URL? or can they be submitted separately? What I mean is, do you have to make the same ajax calls or is it going to a completely different url which takes a different object? — Sujesh Arukil, Apr 01 '13 at 12:58
There are different approaches to this. 1. You need a parentViewModel which contains the two children. And then the submit would be in the parent that could take the values from the children. The other approach (much more decoupled approach), would be to use pub/sub. You create a viewmodel for doing the submit. The submit button when clicked will call the viewmodel to submit the data. The submit function sends out a call to send it all the data and subscribes to events which will be published by the two child view models. You can use amplify js to do pub/sub — Sujesh Arukil, Apr 01 '13 at 16:51

score 1 · Accepted Answer · answered Apr 01 '13 at 17:05

Following up on my comment. Here is a fiddle for the first approach.

http://jsfiddle.net/sujesharukil/FDPAn/

var child1ViewModel = function(){
    var x = ko.observable(1),
            y = ko.observable('child1'),
        getData = function(){
            return JSON.stringify({x: x(), y: y()});
           },
        save= function(){

            alert(getData());
            //some ajax call
        };


    return {
        x: x,
        y: y,
        save: save,
        getData: getData
    }
};

var child2ViewModel = function(){
    var x = ko.observable(2),
        y = ko.observable('child2'),
        getData = function(){
            return JSON.stringify({x: x(), y: y()});
        },
        save= function(){

            alert(getData());
            //some ajax call
        };

    return {
        x: x,
        y: y,
        save: save,
        getData: getData
    }
};

var parentViewModel = function(){
    var child1 = new child1ViewModel(),
        child2 = new child2ViewModel(),
        submit = function(){
            var data = {
                child1Data: child1.getData(),
                child2Data : child2.getData()
            };
            alert(JSON.stringify(data));
            //make ajax submit
        };

    return {
        child1: child1,
        child2: child2,
            submit: submit
    }
}

ko.applyBindings(new parentViewModel());

and the HTML would be

<form data-bind="submit: submit">
    <h1>Data from CHild 1</h1>
    x = <input data-bind="value: child1.x"/><br/>
    y = <input data-bind="value: child1.y"/><br/>
    <button type="button" data-bind="click: child1.save">Save Child1</button>
    <h1>Data from CHild 2</h1>
    x = <input data-bind="value: child2.x"/><br/>
    y = <input data-bind="value: child2.y"/><br/>
    <button type="button" data-bind="click: child2.save">Save Child2</button><br/>
    <button type="submit">Submit</button>
</form>

Hope that helps.

KnockoutJs & Asp.Net MVC 4 - multi model views Submit

1 Answers1