Binding Asp.Net MVC json result to knockout.js observable Array

Question

I have some hardcoded values in my asp.net mvc controller. The GetPlanList() returns a JsonResult which is supposed to be read in by the viewmodel.js file and assign it to the ko.observableArray() and then data bind it to the table.

The problem I am having is how do i get the results from the mvc controller and assign it to the knockout variables?

MVC Controller:

    public JsonResult GetPlanList()
    {

        List<PlanVm> PlanList = GetPlansListData();
        return Json(PlanList, JsonRequestBehavior.AllowGet);
    }

    public List<PlanVm> GetPlansListData()
    {
        return new List<PlanVm>()
        {
            new PlanVm() { PlanName = "706-1", ActiveParticipants = 414, TotalOfAllParticipantShares = 1.22},
            new PlanVm() { PlanName = "706-2", ActiveParticipants = 23423, TotalOfAllParticipantShares = 4.00}, 
            new PlanVm() { PlanName = "706-3", ActiveParticipants = 3, TotalOfAllParticipantShares = 564.00}, 
            new PlanVm() { PlanName = "706-4", ActiveParticipants = 123, TotalOfAllParticipantShares = 0.00}
        };
    }

viewmodel.js file:

function IssuePlansViewModel() {
    var self = this;

    self.planName = ko.observable("");
    self.numberOfParticipants = ko.observable("");
    self.totalShares = ko.observable("");
    self.result = ko.observableArray();

    return self;
}

return IssuePlansViewModel;

HTML:

<table class="table">
    <thead>
        <tr>
            <td>Plan Name</td>
            <td class="hide-mobile txt-right">Number of Participants</td>
            <td class="txt-right">Total Shares</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-bind="text: planName"></td>
            <td class="hide-mobile txt-right" data-bind="text: numberOfParticipants"></td>
            <td class="txt-right" data-bind="text: totalShares"></td>
        </tr>
    </tbody>
</table>

Azadrum · Accepted Answer · 2015-08-28 14:31:50Z

3

Use an ajax method to get the json list from server and bind the results in success callback of ajax method.

But you should have a list of plans in your root ViewModel,

var IssuePlansViewModel = function(data) {
    var self = this;

    self.planName = ko.observable(data.planName);
    self.numberOfParticipants = ko.observable(data.numberOfParticipants);
    self.totalShares = ko.observable(data.totalShares);
    self.result = ko.observableArray(data.result);

    return self;
}

function mainViewModel() {
    var self = this;

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

        $.ajax({
            type: 'GET',
            url: "GetPlanList",
            dataType: "json",
            contentType: 'application/json; charset=utf-8',
            traditional: true, //// traditional option to true
            success: function(result) {
                ko.utils.arrayForEach(jsonResult, function(data) {
                    self.plans.push(new IssuePlansViewModel(data));
                });
            }
        });
}

and bind mainViewModel to your html.

Oh, and in your html you may want to use a foreach loop to list plans,

<tbody data-bind="foreach: plans">
    <tr>
        <td data-bind="text: planName"></td>
        <td class="hide-mobile txt-right" data-bind="text: numberOfParticipants"></td>
        <td class="txt-right" data-bind="text: totalShares"></td>
    </tr>
</tbody>

edited Aug 28, 2015 at 14:31

answered Aug 28, 2015 at 14:25

Azadrum

7466 silver badges26 bronze badges

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

1 Comment

laskdjf Over a year ago

Had to make some minor changes, but got it working. Thanks.

Collectives™ on Stack Overflow

Binding Asp.Net MVC json result to knockout.js observable Array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related