[Webgrid]–ajax– (Reloading a Razor WebGrid after Ajax calls using a partial view)

reloading a Razor WebGrid after Ajax calls using a partial view

The

If you is using Razor and MVC probably make some use of the built in controls in System.Web.Helpers. WebGrid, located in the Helpers assembly, is created for WebMatrix's Razor Web Pages and landed itself nicely to Razor VI EWS in MVC.
WebGrid, much like ASP. NET ' s ListView control, is designed to display a data driven HTML table on the screen. It has support for paging, sorting and column customization.
In this article, we'll be taking a quick look at loading a WebGrid with data, both as a part of a page and as a Stan Dalone AJAX call. AJAX calls can occur after a page load or sort change and as a part of the the interaction of a user with the data on the grid .
Let's begin by making a view. The view would contain the body of the page rendered in the @RenderBody () section of the main layout. In we case the grid would reside in the index page and the index view would simply look like this:

@model ienumerable<deployments.models.deployment>@{viewbag.title = "Deployments";} 
The Model is the data we wish to display and html.partial adds a Partial view along with our grid.
We'll take a look at the data later. First let's display our grid. The grid resided in a partial view named Deploymentlist:
@model ienumerable<deployments.models.deployment> @{var grid = new WebGrid (null, RowsPerPage:ViewBag.PageSize,     Ajaxupdatecontainerid: "Deploymentsgrid", Cansort:false); Grid. Bind (Model, RowCount:ViewBag.TotalRecords, autosortandpage:false);}
 A key part of the grid is Ajaxupdatecontainerid. It signals the grid what container to update after a AJAX call. "Deploymentsgrid" is a div surrounding the partial view and containing the Grid and any helper functions that'll get upd Ated in AJAX calls. 
 Now after we declared the grid we can look at the controller. The grid sends some query string parameters for paging and sorting by default. Since Our grid have pagination enabled, our controller should is able to deal with an optional page parameter. 
Private Deploymentsentities context = new Deploymentsentities ();         private int pageSize = 10;         public actionresult Index (int page)  & nbsp;       {              Viewbag.message = "Deployments";             Viewbag.pagesize = pagesize;             Viewbag.totalrecords = context. Deployments.count (d = d.active = = True);              var model = context. deployments                . Include ("Website")                  . Include ("Environment") &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&Nbsp;          . OrderByDescending (d = d.deploymentid)                  . Where (d = = D.active = True)                  . Skip ((page. HasValue? Page. VALUE:1)-1) * pageSize)                  . Take (pageSize);             if ( Request.isajaxrequest ())                   return Partialview ("Deploymentlist", model);              else                  return View (model);        }
 As can see if our controllers are invoked by an AJAX request, we don't need to return the entire index view. We can simply return the partial view containing the grid. Retuning a partial view would make sure only the HTML we need to update are actually being generated. 
 This is the rest of the grid view: 
<div id= "Deploymentsgrid" >  @grid. Gethtml (         Columns:grid. Columns (                      grid. Column ("Website.websitename", Header: "Website"),                      grid. Column ("Environment.environmentname", Header: "from"),                      grid. Column ("Environment1.environmentname", Header: "to"),                      grid. Column ("Requestedby", Header: "Requested by"),                      grid. Column ("Requesteddate", Header: "Requested TIME "),                      grid. Column ("Executedby", Header: "Executed by"),                      grid. Column ("Executeddate", Header: "Executed time"),                      grid. Column ("Websitesync", Header: "Website", Format: (item) = (item). Websitesync)? Html.raw (" ")),                      grid. Column ("Databasesync", Header: "Database", Format: (item) = =(item. Databasesync)? Html.raw (" ")),                      grid. Column ("Comments", Header: "Comments"),                      grid. Column ("", Header: "Done", Format: (item) = = (string.) Isnullorwhitespace (item. Executedby))?                           @Ajax. ActionLink (' Done ', ' done ', new {id = Item. Deploymentid},                           new Ajaxoptions () {                              Confirm = "Did you check the your work?",                              HttpMethod = "Get",                               onsuccess = "UpdateGrid ()"                           }):                          Html.raw ("<a href=" + Item. Environment1.websiteurl + "' target= ' _new ' &Gt View</a> "))                          )                ) <script type= "Text/javascript" >     function UpdateGrid ( ) {         @Html. Raw (Httputility.htmldecode (grid. Getcontainerupdatescript ("/?page=" + (grid. PageIndex + 1)). ToString ()))     }</script></div>
If you read through the code, you probably noticed the @Ajax. ActionLink "Done". This was a simple GET call along with a parameter containing the ID of the record we wish to update. The interesting part on it is the onsuccess call. This was a JavaScript call and that's made when the ActionLink returns successfully.
Since Our update operation succeeded, we'll go ahead and update the grid:
@Html. Raw (Httputility.htmldecode (grid. Getcontainerupdatescript ("/?page=" + (grid. PageIndex + 1)). ToString ()))
Getcontainerupdatescript is built into the grid. If you view the source of the page, you'll probably find it in the JavaScript OnClick events of your pager. We is simply calling it again, along with the current grid page in order to update the container div.
As you can tell, WebGrid have some great Web 2.0 functionality out of the box and can help you speed up Razor development.
 [webgrid]–ajax– (Reloading a Razor WebGrid after Ajax calls using a partial view)