Question

我已经阅读了一些如何通过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正在进行“更新”还是真的在做替换内容？

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

Answer 1

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

以下哪个示例是更新内容的正确方法及其原因？

这三个例子是正确的并且可以使用，哪一个使用将取决于您的需求，在我的具体情况下我将使用示例A ，因为我只想更新表的内容（WebGrid）不是div中的所有内容，如果由于某种原因每次排序或更改页面时你想要更新其他内容你应该使用示例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中进行分页/排序，则时间标签不会更改，这是预期的行为只有表格的内容会改变，如果你在示例C 中做同样的事情，并且每次页面/排序时所有内容都包含在div中，你将看到所有内容都将是更新，包括时间标签。

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

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

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

1 个答案: