How to use render partial with webgrid?

Question

I understand how to execute the render partial but how to refresh a webgrid with the new data Razor syntax please.

$.get( '@Url.Action("details","user", new { id = Model.ID } )',
   function(data) {     $('#detailsDiv').replaceWith(data); });

where the user controller has an action named details that does:

public ActionResult Details( int id ) {    
 var model = ...get user from db using id...     
 return Partial( "UserDetails", model ); } 

End result should be something like this

Like var grid = new WebGrid(source:Model.UserDetails,....

Answer 1

in your partialView Change your grid declaration to something like :

var grid = new WebGrid(source: Model,
//defaultSort: "DataId",
ajaxUpdateCallback: "GridUpdate",
ajaxUpdateContainerId: "grid"
rowsPerPage: 50); 

ensure that your .GetHtml method has :

@grid.GetHtml(
htmlAttributes: new { id = "grid" }, 

//.. rest of the options here ) and add the below to your Index.cshtml

<script type="text/javascript">
function GridUpdate(data) {
    $('#gridview').html(data);
}
</script>

remember to put

@{ Layout = null; }

in your parial to get only the webgrid (without the whole template)