Knockout viewmodel: retrieving data from .Net Core controller

Question

How do I update the Knockout viewmodel with data from my Razor model? My Razor page is generated from a simple GET Action in a .NET Core MVC project. The simple view is:

@model Birder2.ViewModels.SalesOrderViewModel
@using Newtonsoft.Json

@{ string data = JsonConvert.SerializeObject(Model); }
<script src="~/js/salesorderviewmodel.js"></script>

<script type='text/javascript' src="~/js/knockout-3.4.2.js"></script>
<script type='text/javascript'>
    var salesOrderViewModel = new SalesOrderViewModel(@Html.Raw(data));
    ko.applyBindings(salesOrderViewModel);
</script>

<p data-bind="text: MessageToClient"></p>

<div>
    <div>
       <label>Customer Name</label>
       <span data-bind="text: CustomerName"></span>
   </div>
<div>
    <label>PO No.</label>
    <span data-bind="text: PONumber"></span>
</div>

I have the following Knockout viewmodel, which is referenced above:

SalesOrderItemViewModel = function (data) {
var self = this;
ko.mapping.fromJS(data, {}, self);

The controller is here:

        public async Task<IActionResult> Details(int? id)
        SalesOrderViewModel salesOrderViewModel = new SalesOrderViewModel()
        {
            SalesOrderId = salesOrder.SalesOrderId,
            CustomerName = salesOrder.CustomerName,
            PONumber = salesOrder.PONumber
        };
        salesOrderViewModel.MessageToClient = "I originated from the viewmodel, rather than the model.";

        return View(salesOrderViewModel);

I am very new to Knockout. Unfortunately I cannot find any effective documentation specific to .NET Core. The problem seems to be updating the Knockout viewmodel. The view is rendered with empty data fields.

Can anyone help identify the issue?

AlbertK AlbertK · Accepted Answer · 2018-02-16T14:09:12

Everything looks correct. The only thing you should try is to place your script with ko.applyBindings(salesOrderViewModel) below your html with databinds

Alternatively you can use window.onload:

window.onload = function() {
    var salesOrderViewModel = new SalesOrderViewModel(@Html.Raw(data));
    ko.applyBindings(salesOrderViewModel);
};

Knockout viewmodel: retrieving data from .Net Core controller

1 Answers