Question

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

我有两个表单，一个HTML.BeginForm工作正常，一个Ajax.BeginForm在局部视图中。 ajax表单的帖子是为模型添加注释。

问题是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())

}

部分视图：

@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>

}

控制器：

[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

表单中的嵌入表单正在破坏工作。

Answer 2

删除您对那里的Microsoft库的引用，并仅使用jQuery ...无论如何现在在幕后使用。启用不引人注目的JavaScript，并在我的博客文章中包含libs，它应该对你有用。

http://completedevelopment.blogspot.com/2011/02/unobstrusive-javascript-in-mvc-3-helps.html

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

2 个答案: