Asp.Net MVC 中的 Ajax 奇怪行为

Question

我的标记有一个div 和id= "divGrid" 和一个启用ajax 的表单在div 之外。表单包含两个文本输入和一个带有UpdateTargetId = "divGrid" 的提交按钮。它确实完美地更新了该网格，但在页面上添加了重复的启用 ajax 的表单。为什么这个？如何解决这个问题？

这是我的观点：

@model List<EF.Models.Data.Books>

@{
    ViewBag.Title = "CodeFirst";
    Layout = null;
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<div id="divGrid">

        @foreach (var item in Model)
        {
        <table>
            <tr>
                <td>@item.ID</td>
                <td>@item.Name</td>
                <td>@item.Price</td>
                </tr>
            </table>
            }
    </div>
    @using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divGrid", InsertionMode = InsertionMode.Replace }))
    {
        @Html.TextBox("name");
        <br />
        @Html.TextBox("price");
        <input type="submit" value="Insert" />    
    }

我的控制器操作：

[HttpPost]
    public ViewResult CodeFirst(FormCollection form)
    {
        book.Name = form["name"];
        book.Price = Convert.ToDecimal(form["price"]);
        context.Books.Add(book);
        context.SaveChanges();
        result = context.Books.ToList();
        return View(result);
    }

有趣的是，我渲染的标记类似于

<div id="divGrid">
    <div id="divGrid">
    <!-- Data display as expected -->
   </div>
   <!-- ajax enabled form, that is out side of this in source code -->
</div>
<!-- ajax enabled form, that is out side of this in source code -->

Answer 1

您的CodeFirst() 方法返回的是您最初呈现的相同视图，并且它被插入到<div id="divGrid"> 中，这就是您看到表单重复的原因。您需要返回一个仅包含表格的单独部分视图。创建一个单独的子方法来显示初始表

[ChildActionOnly]
public ActionResult BookTable()
{
  var model = context.Books; // no need for .ToList()
  return PartialView(model);
}

BookTable.cshtml

@model IEnumerable<EF.Models.Data.Books>
@foreach (var item in Model)
{
  <table>
    <tr>
      <td>@item.ID</td>
      <td>@item.Name</td>
      <td>@item.Price</td>
    </tr>
  </table>
}

然后创建用于添加新书的视图模型，以便您可以利用 MVC 功能，例如强类型绑定、客户端和服务器端验证等。

public class BookVM
{
  [Required]
  public string Name { get; set; }
  public decimal Price { get; set; }
}

你的控制器方法变成了

public ActionResult CodeFirst()
{
  BookVM model = new BookVM();
  return View(model);
}

[HttpPost]
public ViewResult CodeFirst(BookVM model)
{
    Book book = new Book(){ Name = model.Name, Price = model.Price };
    context.Books.Add(book);
    context.SaveChanges();
    result = context.Books();
    return PartialView("BookTable", result);
}

并将您的视图更改为

@model BookVM
....
<div id="divGrid">
  @Html.Action("BookTable");
</div>

@using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divGrid", InsertionMode = InsertionMode.Replace }))
{
  @Html.LabelFor(m => m.Name)
  @Html.TextBoxFor(m => m.Name)
  @Html.ValidationMessageFor(m => m.Name)
  .... // ditto for Price
  <input type="submit" value="Insert" />    
}

但是，这意味着您每次提交表单时都要为整个表格重新生成 html。通过仅使用 jquery 和 ajax 调用插入书籍并将其新 ID 作为 json 返回的方法，然后根据返回的 ID 和文本框中的值动态地向表中添加新行，您将获得更好的性能表格。