What is the right way to implement ajaxUpdateContainerId in webgrid?

Question

I had read some tutorials of how to implement a MVC webgrid through AJAX but I want to understand what's happening under the hood, and which is the correct implementation for ajaxUpdateContainerId.

Example 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)))
}

Example 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>
}

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

I know that you have to bind the content to the grid and that you have to pass only the elements that you are going to display in the webgrid, but I'm trying to understand how ajaxUpdateContainerId works, so this examples work for this purpose.

Which of this examples is the correct way to update the content and why?

ajaxUpdateContainerId is doing a "Update" or really is doing a Replace content?

I hope someone can help me with this and this can be useful to someone else. Thanks In advance.

Answer 1

After a lot of tests I get the answer for this:

Which of this examples is the correct way to update the content and why?

The three examples are correct and will work, which one to use will depend on your needs, in my specific case I will use the Example A because I only want to update the content of the table(WebGrid) not everything inside the div, if for some reason every time you sort or change page you want to update something else you should use Example C.

Example B is pretty much like Example A but I don't need to put an extra div.

ajaxUpdateContainerId is doing a "Update" or really is doing a Replace content?

It's doing a update and will only update the content of the element with the specified ID in this case result. And to understand how this works in Example A I did this:

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

If you page/sort in the webgrid the time label will not change and this is the expected behavior only the content of the table will change, if you do the same in the Example C and everything is wrapped inside the div every time you page/sort you will see that all the content will be updated including the time label.

This seems pretty logic now but I was confused how this works so I hope this can be useful to some one else.

Note: I was having a weird behavior where after paging and sorting I get an empty page with the content of the grid and it turns that it was because I was using history.js and I was pushing the content of the div that was wraping my partial view(which it's ok for Example C) but I was using Example A and really what I want is to push only the content of my webgrid wich is the one that was changing.