Converting MVC Model to Knockout JS ViewModel

Question

I am trying to convert my mvc model to knockout viewmodel here:

Model

public class MyModel
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    .
    .
    .
    public List<MyList1> MyListOne{ get; set; }
    public List<MyList2> MyListTwo{ get; set; }  
}

Controller

public ActionResult Index()
{
      MyModel myModel;

      var myServiceObject = myServiceManager.GetMyModelByUser(user);

      myModel = new MyModel
      {
        Id = myServiceObject.Id,
        .
        . 
        .
        .
      };

      return View(myModel);  
}

View Model

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

    ko.mapping.fromJS(data, {}, self);

};

Helper

public static string ToJson(this object obj)
        {
            JsonSerializerSettings serializerSettings = new JsonSerializerSettings
            {
                ContractResolver = new CamelCasePropertyNamesContractResolver()
            };

            return JsonConvert.SerializeObject(obj, Formatting.None, serializerSettings);
        }

View

<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script src="~/Scripts/knockout-3.2.0.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>

<script type="text/javascript">
    var viewModel;

    $(function () {
            var viewModel = new DynamicModelLoading(@Html.Raw(Model.ToJson()));            
            ko.applyBindings(viewModel);
   });
</script>

<div class="f_name" data-bind="text: FirstName"></div>
<div class="f_name" data-bind="text: LastName"></div>

ToJson() returns data. But while binding it I am not getting any error and no data either. I am missing something here but not sure what it is.

Answer

Here is the fix:

<div class="f_name" data-bind="text: firstName"></div>
<div class="f_name" data-bind="text: lastName"></div>

I was expecting the property name as same as my mvc model, but Json Serializer converts capitalized first letter to lower case by default.

hopefully something here will help stackoverflow.com/questions/11628938/… — Matt Bodily
– Matt Bodily, Commented Jan 29, 2015 at 20:23

Josh Taylor · Accepted Answer · 2015-01-29 20:26:51Z

1

The issue must have something to do with the JSON result coming from @Html.Raw(Model.ToJson()));

Just to play around with the code a little, I created this fiddle which seems to be mapping the data correctly, and successfully binding it to the view: http://jsfiddle.net/4Lu8fdx2/

Here is the JavaScript code:

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

    ko.mapping.fromJS(data, {}, self);
};

$(function () {
    var viewModel = new DynamicModelLoading({"testProperty":"testValue"});

    ko.applyBindings(viewModel);
});

This successfully binds the static JSON being passed in to "DynamicModelLoading()" to the HTML in the view. Here is the HTML:

<h4>Value For 'testProperty'</h4>
<span data-bind="text: testProperty"></span>

What happens when you log your viewModel to the console, just before calling 'applyBindings()'? Does it contain all of the properties from your original JSON object configured as observables (functions)? When I log the viewModel, this is what I get:

DynamicModelLoading {testProperty: function, __ko_mapping__: Object}

If the mapping is working successfully, you should get a similar result, but with all the properties from your object.

answered Jan 29, 2015 at 20:26

Josh Taylor

5322 silver badges8 bronze badges

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

1 Comment

Josh Taylor Over a year ago

No problem, hope it helped!

Ahmed Elbendary · Accepted Answer · 2019-01-28 15:30:30Z

0

var viewModel; $(function () { var viewModel = new DynamicModelLoading(JSON.parse('@Html.Raw(Json.Encode(Model))')); ko.applyBindings(viewModel); });

answered Jan 28, 2019 at 15:30

Ahmed Elbendary

3795 silver badges7 bronze badges

Collectives™ on Stack Overflow

Converting MVC Model to Knockout JS ViewModel

Model

Controller

View Model

Helper

View

Answer

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Model

Controller

View Model

Helper

View

Answer

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related