title: Mixing MVC Razor and Knockout
body: <p>Throughout my app, I'd like to use Razor for all functionality related to Reading, and leverage knockoutJS and AJAX for CUD operations.  </p>
  
  <p>In my profile view, I've done the following:</p>
  
  <pre><code>&lt;div&gt;
      &lt;h4&gt;About Me&lt;/h4&gt;
      &lt;!-- ko if: !isEditingAboutMe() --&gt;
      &lt;p&gt;@Model.User.AboutMe&lt;/p&gt;
      @if (Model.CurrentUserCanEdit)
      {
          &lt;a data-bind="click: editAboutMe"&gt;edit&lt;/a&gt;
      }
      &lt;!-- /ko --&gt;
      &lt;!-- ko if: isEditingAboutMe() --&gt;
      @Html.TextBoxFor(model =&gt; model.User.AboutMe, new { data_bind = "value: aboutMe" })
      &lt;a data-bind="click: saveAboutMe"&gt;save&lt;/a&gt;
      &lt;a data-bind="click: cancelAboutMe"&gt;cancel&lt;/a&gt;
      &lt;!-- /ko --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This way search engines can at least crawl the content, and users with javascript enabled can perform CUD operations.  </p>
  
  <p>My problem above is that - using AJAX, if I click "save", how to I bind the new value to the Razor model (fourth line down)? </p>
  
  <p>Corresponding JS: </p>
  
  <pre><code>function ProfileVm() {
      var self = this;
  
      self.aboutMe = ko.observable();
  
      self.saveAboutMe = function() {
          // AJAX call, after success close the field
          self.isEditingAboutMe(false);
      };
  
      self.cancelAboutMe = function() {
          // just for testing, would revert the value in practice
          self.isEditingAboutMe(false);
      };
  
      self.isEditingAboutMe = ko.observable(false);
      self.editAboutMe = function() {
          self.isEditingAboutMe(true);
      };
  
  }
  
  $(document).ready(function () {
      ko.applyBindings(new ProfileVm());
  })
  </code></pre>
  
  <p>Also - feedback regarding the "properness" of this approach is welcome.</p>