Best practice on passing Mvc Model to KnockoutJS

Best practice on passing Mvc Model to KnockoutJS

Asked on November 27, 2018 in knockout js.
Add Comment


  • 3 Answer(s)

       By razor view,It is possible to script the JavaScript ViewModel object as same as the other HTML, Including the Model elements is useful. The truth is that Razor and JS don’t play well together with Visual Studio and Intellisense, but even with more red squigglies the resulting code works good.

    <script type="text/javascript">
    var data = [
      @for (int i=0; i < Model.Packages.Count; i++)
    {
        var package = Model.Packages[i];
        <text>{Id: ko.observable(package.Id),
          Name: ko.observable(package.Name)
        }</text>
      }
      var viewModel =
    {
        var packages = ko.observableArray(data);
        // more code
        }
      ko.applyBindings(viewModel);
    </script>
    

       This code handling is depend on the Model. Serialize the model object into JSON using Html . Raw(). For that model, Use this to build the Knockout ViewModel using the KO Mapping library:

    <script type="text/javascript">
      var data = @Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model));
      var viewModel = ko.mapping.fromJS(data);
      ko.applyBindings(viewModel);
    </script>
    

       This isn’t as kludgy as the 1st one, But more control is given up in this way. This refers to KO ViewModel is well jointed to the structure of the MVC ViewModel, which is wanted probably.For this, JS should be in cshtml. Finally, these 2 approaches are full and full server side. For more responsive web pages, like SPIs, Do more on the client side.

       Use the $.getJSON calls client side from the JavaScript itself. At that point, process the return data into the ViewModel, either hand rolling or using the mapping library. When we are calling back to actions in MVC controller, Then we have the action return a JsonResult type , During use the new MVC4 WebAPI, those controllers will give back the JSON by default.

    Answered on November 27, 2018.
    Add Comment

       Using this @Html.Raw is good because there’s no useful the user can do on the page till the Knockout UI is generated anyway, and any potential vital time delay due to the more initial download from writing the JSON into the page is offset by the user is not visible this before the UI is built. JSON used to build the initial view model being directly in the page.

       It is plus to retrieving any reusable reference data for things like select options in a separate dynamic script download from an MVC controller, which then gets arrested by the browser. That way they can be reused across view models and the view models only need to store the selected item value.

    Answered on November 27, 2018.
    Add Comment

      The best practice on passing Mvc Model is depend on the requirement basis.

       During the “one page application”, More $.get and $.ajax calls should do, if just a single page is provided, it might be fast to put the model in the Html, saving the more request to the server.

       It also depends on the amount of code used on the server-side, if the applications want an API anyway, then reusing the API and do $.get and $.ajax calls, if not, Put the model in the Html.

    Answered on November 27, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.