How to Bind data from Razor to Knockout?

Question

I am using KnockOut JS and MVC.

How do I bind the data from @ RAZOR view to my databind in KO.

I tried doing this but did not return anything at the CONTROLLER.

What I am trying to achieve here is that the Razorview renders the rows in Step3(View).I want to bind these rows to the KNOCKOUT so that I can pass this data to the Step4(View).

Is there a better way??

VIEW:

<tbody data-bind="foreach:ApprTable">
                @for (int i = 0; i < UserWRInfo.Count; i++)
                {
                    <tr>

                        <td style="text-align: center">
                            <button type="button" class="btn btn-primary" data-bind="click: $root.submit.bind($data,'@i')">Start</button>
                        </td>
                      <td style="text-align: center" data-bind="value: Appropriation">@UserWRInfo[i].AppropriationNumber</td>
                        <td style="text-align: center" data-bind="value: PriorityDate">@UserWRInfo[i].PriorityDate.ToString("MM/dd/yyyy")</td>
                        <td style="text-align: center" data-bind="value: Location">@UserWRInfo[i].Sect @UserWRInfo[i].Township @UserWRInfo[i].Range@UserWRInfo[i].RangeDirectionID</td>
                        <td style="text-align: center" data-bind="value: Source">@UserWRInfo[i].Source</td>
                        @if (UserWRInfo.Count == UserOwner.Count)
                        {
                            <td style="text-align: center" data-bind="value: Owner">@UserOwner[i].ToString()</td>
                        }
                        else
                        {
                            <td style="text-align: center" data-bind="value: Owner"></td>
                        }

                        <td style="text-align: center" data-bind="value: Use">@UserWRInfo[i].UseDescription</td>
                        <td style="text-align: center" data-bind="value: StartedBy"></td>
                        <td style="text-align: center" data-bind="value: RequiredReporting">@UserWRInfo[i].isAnnualReportRequired</td>
                    </tr>

                }

            </tbody>

JS:

function RowData(Appropriation, PriorityDate, Location, Source, Owner, Use, StartedBy, RequiredReporting) {
    var self = this;

    self.Appropriation = ko.observable(Appropriation);
    self.PriorityDate = ko.observable(PriorityDate);
    self.Location = ko.observable(Location);
    self.Source = ko.observable(Source);
    self.Owner = ko.observable(Owner);
    self.Use = ko.observable(Use);
    self.StartedBy = ko.observable(StartedBy);
    self.RequiredReporting = ko.observable(RequiredReporting);
}

function Step3ViewModel() {
    var self = this;

    self.ApprTable = ko.observableArray();
    self.ApprTable.push(RowData());
    self.submit = function (buttonid) {
        var ApprData = ko.toJSON(self.ApprTable());

        $.post("/Step/Step4", { "AD": ApprData }, function (data) {
        }, 'json');
    }

}

ko.applyBindings(new Step3ViewModel());

Answer 1

You are mixing the stuff. If you want to init the view from razor data, you can do it in two ways:

First, generate JSON in the controller and load it to knockout view model using "knockout-mapping" plugin, for example your view may contain:

<script>
    $(function () {
        ko.mapping.fromJS(@Html.Raw(ViewBag.jmodel), null, viewModel);
    });
</script>

of course you should prepare ViewBag.jmodel in your controller, like this:

JsonSerializer js = JsonSerializer.Create(new JsonSerializerSettings());
var jw = new StringWriter();
js.Serialize(jw, <your object here>);
ViewBag.jmodel = jw.ToString();

Other way is to generate code that will add data row by row like you attempted to do:

var viewModel=new Step3ViewModel();
ko.applyBindings(viewModel);

@for (int i = 0; i < UserWRInfo.Count; i++)
{
  viewModel.ApprTable.push(new RowData(@UserWRInfo[i].AppropriationNumber, /*other values here to create full row of data row*/)
}

This way will generate as many viewModel.ApprTable.push(...) lines as you have in your data set.

And of course, your table with data and knockout binding should NOT contain any razor code!!!

<tbody data-bind="foreach:ApprTable">
...
    <td style="text-align: center" data-bind="value: Appropriation"></td>
...
</tbody>

Answer 2

You're creating a single element observable array by calling the RowData constructor, but you're not passing any parameters in.

self.ApprTable = ko.observableArray([new RowData()]);

The function definition requires a lot of parameters

function RowData(Appropriation, PriorityDate, Location, Source, Owner, Use, StartedBy, RequiredReporting)

You're not actually putting any data into the observables.