title: ASP.NET MVC 5, Knockout.js and mapping: the right way?
body: <p>Questions about ASP.NET MVC, Knockout.js and the mapping plugin abound. I have the following (very simple "getting started") example, which works. However, I would like feedback on whether this is the recommended approach. Primarily, I am interested in future models being significantly more complex (children, dropdowns, etc.). I feel maintaining two sets of models is not justifiable, thus my desire to use the mapping plugin.</p>
  
  <p>PS: I wouldn't mind having the form submit, but I couldn't get that to work due to all different issues, apparently related to URL-encoding of string values with quotes by ko.utils.postJSON. Any updates on that would be appreciated also.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;h2&gt;Simple View&lt;/h2&gt;
  &lt;p&gt;A simple model with 2 properties&lt;/p&gt;
  &lt;p&gt;Model property "Name": &lt;span data-bind="text: Name"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;p&gt;Model property "Count" (just some integer): &lt;span data-bind="text: Count"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;form data-bind="submit: save"&gt;
      &lt;h3&gt;Editing&lt;/h3&gt;
      &lt;p&gt;Name: &lt;input type="text" data-bind="value: Name" /&gt;&lt;/p&gt;
      &lt;p&gt;Count: &lt;input type="text" data-bind="value: Count" /&gt;&lt;/p&gt;
      &lt;h3&gt;Posting Back&lt;/h3&gt;
      &lt;button type="submit"&gt;Update&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var KoViewModel;
      $(function () {
          KoViewModel = ko.mapping.fromJSON('@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model))');
          ko.applyBindings(KoViewModel);
      });
      var save = function () {
          $.ajax({
              url: location.href,
              type: 'POST',
              data: ko.mapping.toJSON(KoViewModel),
              contentType: 'application/json; charset=utf-8',
              success: function (data) {
                  ko.mapping.fromJSON(data, KoViewModel);
              }
          });
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Server-Side</p>
  
  <pre><code>public ActionResult Index()
  {
      Models.SimpleModel m = new Models.SimpleModel();
  
      m.Name = "Some name";
      m.Count = 1;
  
      return View(m);
  }
  
  [HttpPost]
  public JsonResult Index(Models.SimpleModel fc)
  {
      fc.Name += " (updated)";
      fc.Count++;
      return (new JsonResult() { Data = Newtonsoft.Json.JsonConvert.SerializeObject(fc) });
  }
  </code></pre>
  
  <p>Thanks for any insights!</p>