title: Single page app submit binding on form tag not working
body: <p>I've been working on a single page app based on Knockoutjs' excellent <a href="http://learn.knockoutjs.com/#/?tutorial=webmail" rel="nofollow">mail example</a> of creating a 'single page app'.  Steve Sanderson's example uses jQuery templates that reside in the page for all the forms in the example.</p>
  
  <p>I'm trying to incorporate an .ascx into this scenario: the user clicks on a row from the listing which brings up the record by .load-ing the .ascx.  On submit the form data successfully goes to the controller but the return doesn't hit the success, failure or even completed methods of the .ajax call.  Instead the browser alerts the user to download the response.  </p>
  
  <p>I've been steadily working on this and found some additonal info that might shed some more light. The submit button does not run to the <code>viewModel.updateWorksheet</code> method.  It submits the form directly to the controller.  Am I doing something wrong with the knockoutjs <code>data-bind="submit: provViewModel.updateWorksheet"</code> attribute on the form tag?</p>
  
  <p>The controller receives the json in the following method:</p>
  
  <pre class="lang-csharp prettyprint-override"><code>public JsonResult WorksheetUpdateAjax( WorksheetDTO worksheetDTO)
  {
    //(some code here)
  
    try
    {
      _wksRepos.Update();
    }
    catch (Exception e)
    {
      return Json(e.Message, JsonRequestBehavior.AllowGet);
    }
    return Json("Successfully updated", JsonRequestBehavior.AllowGet);
  }
  </code></pre>
  
  <p>The form tag and Submit button look like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form name="wokrsheetAddOrEdit" 
        class="ui-widget" 
        data-bind="submit: viewModel.updateWorksheet" action="/WorksheetUpdateAjax"&gt;
      &lt;br /&gt;&lt;br /&gt;
      (html here)&lt;br /&gt;&lt;br /&gt;
      &lt;button type="submit"&gt;Update&lt;/button&gt;
      &lt;br /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here's the viewModel declaration (lots left out)</p>
  
  <pre><code>viewModel = {
      updateWorksheet: function () {
          $.validator.unobtrusive.parse("#worksheetForm");
          if (!$('#worksheetForm').valid()) {
              return false;
          }
          var worksheetJson = ko.toJSON({
              worksheetDTO: provViewModel.selectedWorksheet
          });
  
          //ko.utils.postJson($("form").wokrsheetAddOrEdit, worksheetJson); -- tried this but does the same
          $.ajax({
              url: $("form").worksheetAddOrEdit,
              type: "POST",
              data: worksheetJson,
              dataType: "json",
              success: function (data) {
                  // here I'd like to return to the app
              },
              failure: function (data) {
                  alert(data);
                  return false;
              }
          });
      }
  }
  </code></pre>