asp.net-mvc - MVC 3 Ajax.beginform 提交 - 导致完全回发

Question

嗨，我正在尝试使用 mvc 3 来掌握 ajax.beginform。

我有 2 个表单，一个工作正常的 HTML.BeginForm 和一个部分 View 中的 Ajax.BeginForm。 ajax表单的post就是给模型添加注释。

问题是ajax提交正在提交整个页面，包括主视图中的HTML.BeginForm，并且不执行带有注释的异步发布。

有人能看出我做错了什么吗？

我查看了其他问题，并在 web.config 等中禁用了不显眼的 javascript。

查看:

<div id="maincontent">
@using (Html.BeginForm())
{
  @Html.ValidationSummary(true)
  <fieldset>
    <legend>Edit Franchise</legend>
    <div class="editor-label">
      @Html.LabelFor(model => model.Name)
    </div>
    <div class="editor-field">
      @Html.EditorFor(model => model.Name)
      @Html.ValidationMessageFor(model => model.Name)
    </div>
    <div class="editor-label">
      @Html.LabelFor(model => model.FirstLine)
    </div>
    <div class="editor-field">
      @Html.EditorFor(model => model.FirstLine)
      @Html.ValidationMessageFor(model => model.FirstLine)
    </div>
    <div class="editor-label">
      @Html.LabelFor(model => model.SecondLine)
    </div>
    <div class="editor-field">
      @Html.EditorFor(model => model.SecondLine)
      @Html.ValidationMessageFor(model => model.SecondLine)
    </div>
    <div class="editor-label">
      @Html.LabelFor(model => model.City)
    </div>
    <div class="editor-field">
      @Html.EditorFor(model => model.City)
      @Html.ValidationMessageFor(model => model.City)
    </div>
    <div class="editor-label">
      @Html.LabelFor(model => model.Postcode)
    </div>
    <div class="editor-field">
      @Html.EditorFor(model => model.Postcode)
      @Html.ValidationMessageFor(model => model.Postcode)
    </div>
    <div class="editor-label">
      @Html.LabelFor(model => model.Telephone)
    </div>
    <div class="editor-field">
      @Html.EditorFor(model => model.Telephone)
      @Html.ValidationMessageFor(model => model.Telephone)
    </div>
    <p class="clear">
      <input type="submit" value="Save" />
    </p>
  </fieldset>

  @Html.Partial("Partial/_AddNote", new Cash4Schools.Domain.Model.Note())

}

部分 View :

@model Cash4Schools.Domain.Model.Note
<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>  

@using (Ajax.BeginForm("AddNote", "Franchises", 
  new AjaxOptions {
     HttpMethod = "POST", 
     UpdateTargetId = "note" }, 
     new { id = "ajaxForm" })
     )
{
  @Html.ValidationSummary(true)
   <fieldset>
       <legend>Add a Note</legend>

      <div class="editor-label">
        @Html.LabelFor(model => model.Content)
      </div>
      <div class="editor-field">
        @Html.EditorFor(model => model.Content)
        @Html.ValidationMessageFor(model => model.Content)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.CreationDate)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.CreationDate)
        @Html.ValidationMessageFor(model => model.CreationDate)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.CreatedBy)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.CreatedBy)
        @Html.ValidationMessageFor(model => model.CreatedBy)
    </div>

    <p class="clear">
        <input type="submit" value="Add" />
    </p>
</fieldset>

}

Controller :

[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);
}

HTML 输出:

<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">    <fieldset>
    <legend>Add a Note</legend>
    <div class="editor-label">
        <label for="Content">Content</label>
    </div>
    <div class="editor-field">
        <input class="text-box single-line" id="Content" name="Content" type="text" value="" />
        <span class="field-validation-valid" data-valmsg-for="Content" data-valmsg-replace="true"></span>
    </div>
    <div class="editor-label">
        <label for="CreationDate">CreationDate</label>
    </div>
    <div class="editor-field">
        <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" />
        <span class="field-validation-valid" data-valmsg-for="CreationDate" data-valmsg-replace="true"></span>
    </div>
    <div class="editor-label">
        <label for="CreatedBy">CreatedBy</label>
    </div>
    <div class="editor-field">
        <input class="text-box single-line" id="CreatedBy" name="CreatedBy" type="text" value="" />
        <span class="field-validation-valid" data-valmsg-for="CreatedBy" data-valmsg-replace="true"></span>
    </div>

    <p class="clear">
        <input type="submit" value="Add" />
    </p>

</fieldset>
</form><div id="note"></div>

Answer 1

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>

    </fieldset>

    @Html.Partial("Partial/_AddNote", new Cash4Schools.Domain.Model.Note())
    --Partial call and therefore, the form within the partial, is embedded 
    --in the main form
}

修改为

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
    ....
    </fieldset>

}

@Html.Partial("Partial/_AddNote", new Cash4Schools.Domain.Model.Note())
--Partial call outside main form, no longer embedded. Works

表单中的嵌入表单会破坏工作。