title: MVC 3 Ajax.beginform submit - causes full postback
body: <p>Hi i am trying to get to grips with ajax.beginform using mvc 3.</p>
  
  <p>I have 2 forms, a HTML.BeginForm which works fine and a Ajax.BeginForm in a partial view. The post of the ajax form is to add notes to the model.</p>
  
  <p>The problem is the ajax submit is submitting the whole page including the HTML.BeginForm at in the main view and not performing the asynchronous post with the note.</p>
  
  <p>Can anyone see what im doing wrong?</p>
  
  <p>Ive look at other questions and have disabled the unobtrusive javascript in web.config etc.</p>
  
  <p>View:</p>
  
  <pre><code>&lt;div id="maincontent"&gt;
  @using (Html.BeginForm())
  {
    @Html.ValidationSummary(true)
    &lt;fieldset&gt;
      &lt;legend&gt;Edit Franchise&lt;/legend&gt;
      &lt;div class="editor-label"&gt;
        @Html.LabelFor(model =&gt; model.Name)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
        @Html.EditorFor(model =&gt; model.Name)
        @Html.ValidationMessageFor(model =&gt; model.Name)
      &lt;/div&gt;
      &lt;div class="editor-label"&gt;
        @Html.LabelFor(model =&gt; model.FirstLine)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
        @Html.EditorFor(model =&gt; model.FirstLine)
        @Html.ValidationMessageFor(model =&gt; model.FirstLine)
      &lt;/div&gt;
      &lt;div class="editor-label"&gt;
        @Html.LabelFor(model =&gt; model.SecondLine)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
        @Html.EditorFor(model =&gt; model.SecondLine)
        @Html.ValidationMessageFor(model =&gt; model.SecondLine)
      &lt;/div&gt;
      &lt;div class="editor-label"&gt;
        @Html.LabelFor(model =&gt; model.City)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
        @Html.EditorFor(model =&gt; model.City)
        @Html.ValidationMessageFor(model =&gt; model.City)
      &lt;/div&gt;
      &lt;div class="editor-label"&gt;
        @Html.LabelFor(model =&gt; model.Postcode)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
        @Html.EditorFor(model =&gt; model.Postcode)
        @Html.ValidationMessageFor(model =&gt; model.Postcode)
      &lt;/div&gt;
      &lt;div class="editor-label"&gt;
        @Html.LabelFor(model =&gt; model.Telephone)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
        @Html.EditorFor(model =&gt; model.Telephone)
        @Html.ValidationMessageFor(model =&gt; model.Telephone)
      &lt;/div&gt;
      &lt;p class="clear"&gt;
        &lt;input type="submit" value="Save" /&gt;
      &lt;/p&gt;
    &lt;/fieldset&gt;
  
    @Html.Partial("Partial/_AddNote", new Cash4Schools.Domain.Model.Note())
  
  }
  </code></pre>
  
  <p></p>
  
  <p>Partial View:</p>
  
  <pre><code>@model Cash4Schools.Domain.Model.Note
  &lt;script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"&gt;&lt;/script&gt;  
  
  @using (Ajax.BeginForm("AddNote", "Franchises", 
    new AjaxOptions {
       HttpMethod = "POST", 
       UpdateTargetId = "note" }, 
       new { id = "ajaxForm" })
       )
  {
    @Html.ValidationSummary(true)
     &lt;fieldset&gt;
         &lt;legend&gt;Add a Note&lt;/legend&gt;
  
        &lt;div class="editor-label"&gt;
          @Html.LabelFor(model =&gt; model.Content)
        &lt;/div&gt;
        &lt;div class="editor-field"&gt;
          @Html.EditorFor(model =&gt; model.Content)
          @Html.ValidationMessageFor(model =&gt; model.Content)
      &lt;/div&gt;
  
      &lt;div class="editor-label"&gt;
          @Html.LabelFor(model =&gt; model.CreationDate)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.EditorFor(model =&gt; model.CreationDate)
          @Html.ValidationMessageFor(model =&gt; model.CreationDate)
      &lt;/div&gt;
  
      &lt;div class="editor-label"&gt;
          @Html.LabelFor(model =&gt; model.CreatedBy)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.EditorFor(model =&gt; model.CreatedBy)
          @Html.ValidationMessageFor(model =&gt; model.CreatedBy)
      &lt;/div&gt;
  
      &lt;p class="clear"&gt;
          &lt;input type="submit" value="Add" /&gt;
      &lt;/p&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>}</p>
  
  
  
  <p>Controller:</p>
  
  <pre><code>[HttpPost]
  public ActionResult AddNote(Note model)
  {
    var franchise = _franchiseRepository.FindById(model.Id);
  
    franchise.Notes.Add(
      new Note {
        Content = model.Content,
        CreationDate = DateTime.Now,
        CreatedBy = model.CreatedBy,
        Type = NoteType.Franchise
      }
    );
  
    _franchiseRepository.Save(franchise);
  
    return PartialView(franchise.Notes);
  }
  </code></pre>
  
  <p>HTML Output:</p>
  
  <pre><code>&lt;form action="/Franchises/AddNote?Length=10" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#note" id="ajaxForm" method="post"&gt;    &lt;fieldset&gt;
      &lt;legend&gt;Add a Note&lt;/legend&gt;
      &lt;div class="editor-label"&gt;
          &lt;label for="Content"&gt;Content&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          &lt;input class="text-box single-line" id="Content" name="Content" type="text" value="" /&gt;
          &lt;span class="field-validation-valid" data-valmsg-for="Content" data-valmsg-replace="true"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="editor-label"&gt;
          &lt;label for="CreationDate"&gt;CreationDate&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          &lt;input class="text-box single-line" data-val="true" data-val-required="The CreationDate field is required." id="CreationDate" name="CreationDate" type="text" value="01/01/0001 00:00:00" /&gt;
          &lt;span class="field-validation-valid" data-valmsg-for="CreationDate" data-valmsg-replace="true"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="editor-label"&gt;
          &lt;label for="CreatedBy"&gt;CreatedBy&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          &lt;input class="text-box single-line" id="CreatedBy" name="CreatedBy" type="text" value="" /&gt;
          &lt;span class="field-validation-valid" data-valmsg-for="CreatedBy" data-valmsg-replace="true"&gt;&lt;/span&gt;
      &lt;/div&gt;
  
      &lt;p class="clear"&gt;
          &lt;input type="submit" value="Add" /&gt;
      &lt;/p&gt;
  
  &lt;/fieldset&gt;
  &lt;/form&gt;&lt;div id="note"&gt;&lt;/div&gt;
  </code></pre>