在 webgrid 中实现 ajaxUpdateContainerId 的正确方法是什么？答案

【问题标题】：What is the right way to implement ajaxUpdateContainerId in webgrid?在 webgrid 中实现 ajaxUpdateContainerId 的正确方法是什么？
【发布时间】：2014-04-07 22:49:54
【问题描述】：

我已经阅读了一些关于如何通过 AJAX 实现 MVC webgrid 的教程，但我想了解幕后发生的事情，以及 ajaxUpdateContainerId 的正确实现。

示例 A：

@{   
  var grid = new WebGrid(Model, rowsPerPage: 10, ajaxUpdateContainerId: "result");

  @grid.GetHtml(htmlAttributes: new {  id = "result" }, tableStyle: "webgrid",
  grid.Columns(
  grid.Column(columnName: "ID", header: "ID", canSort: true),
  grid.Column(columnName: "Name", header: "Name", canSort: true)))
}

示例 B

 @{   
  var grid = new WebGrid(Model, rowsPerPage: 10, ajaxUpdateContainerId: "result");

 <div id="result">
  @grid.GetHtml( tableStyle: "webgrid",
  grid.Columns(
  grid.Column(columnName: "ID", header: "ID", canSort: true),
  grid.Column(columnName: "Name", header: "Name", canSort: true)))
 </div>
}

示例 C：

<div id="result">
 @{   
  var grid = new WebGrid(Model, rowsPerPage: 10, ajaxUpdateContainerId: "result");


  @grid.GetHtml(tableStyle: "webgrid",
  grid.Columns(
  grid.Column(columnName: "ID", header: "ID", canSort: true),
  grid.Column(columnName: "Name", header: "Name", canSort: true)))

 }
</div>

我知道您必须将内容绑定到网格，并且您必须只传递要在 webgrid 中显示的元素，但我正在尝试了解 ajaxUpdateContainerId 的工作原理，因此这个示例适用于这个目的。

以下哪个示例是更新内容的正确方法？为什么？

ajaxUpdateContainerId 是在做“更新”还是真的在做替换内容？

我希望有人可以帮助我，这对其他人有用。提前致谢。

【问题讨论】：

标签： asp.net-mvc webgrid

【解决方案1】：

经过大量测试，我得到了答案：

以下哪个示例是更新内容的正确方法？为什么？

这三个例子都是正确的并且可以工作，使用哪一个取决于你的需要，在我的具体情况下，我将使用 Example A 因为我只想更新表格的内容(WebGrid) 并非 div 内的所有内容，如果由于某种原因每次您对页面进行排序或更改时想要更新其他内容，您应该使用 Example C。

示例 B 与 示例 A 非常相似，但我不需要添加额外的 div。

ajaxUpdateContainerId 是在做“更新”还是真的在做替换内容？

它正在执行更新，并且在这种情况下只会更新具有指定 ID 的元素的内容 result。为了理解它在示例 A 中的工作原理，我这样做了：

@Html.Label("date", DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"))
@{   
  var grid = new WebGrid(Model, rowsPerPage: 10, ajaxUpdateContainerId: "result");

  @grid.GetHtml(htmlAttributes: new {  id = "result" }, tableStyle: "webgrid",
  grid.Columns(
  grid.Column(columnName: "ID", header: "ID", canSort: true),
  grid.Column(columnName: "Name", header: "Name", canSort: true)))
}

如果您在 webgrid 中分页/排序，则时间标签不会改变，这是预期的行为只有表格的内容会改变，如果您在 Example C 中执行相同操作并且每次页面/排序时所有内容都包含在 div 中，您将看到所有内容都将已更新，包括时间标签。

现在这看起来很合逻辑，但我很困惑它是如何工作的，所以我希望这对其他人有用。

注意：我有一个奇怪的行为，在分页和排序后，我得到一个带有网格内容的空页面，结果证明这是因为我使用的是 history.js，而我是推送包含我的部分视图的 div 的内容（对于示例 C 来说没问题），但我使用的是示例 A，我真正想要的是只推送我的 webgrid 的内容，而这正是正在发生变化的内容。

【讨论】：