2

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

我有 2 个表单，一个工作正常的 HTML.BeginForm 和一个在局部视图中的 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())

}

局部视图：

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

2 回答 2

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

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

于 2011-06-18T15:59:51.663 回答
1

删除您对那里的 Microsoft 库的引用并仅使用 jQuery ......无论如何，这就是现在在幕后使用的东西。启用不显眼的 JavaScript 并包含我的博客文章中的库，它应该适合你。

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

于 2011-06-18T15:11:23.073 回答