Reloading a Razor WebGrid after Ajax calls using a partial view

If you are using Razor and MVC you probably make some use of the built in controls in System.Web.Helpers. WebGrid, located in the Helpers assembly, was created for WebMatrix’s Razor Web Pages and landed itself nicely to Razor views 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 will be taking a quick look at loading a WebGrid with data, both as a part of a page and as a standalone AJAX call. AJAX calls can occur after a page load or sort change and as a part of the interaction of a user with the data on the grid.
Let’s begin by making a view. The view will contain the body of the page rendered in the @RenderBody() section of the main layout. In our case the grid will reside in the index page and the index view will simply look like this:

@model IEnumerable<Deployments.Models.Deployment>
@{     ViewBag.Title = "Deployments";
} <h2>@ViewBag.Message</h2>
<p>     @Html.ActionLink("Request Deployment", "CreateDeployment")
</p>
@Html.Partial("DeploymentList", Model)

The Model is the data we wish to display and Html.Partial adds a partial view along with our grid.
We will 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 an AJAX call. “deploymentsGrid” is a div surrounding the partial view and containing the Grid and any helper functions that will get updated 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 has pagination enabled, our controller should be able to deal with an optional page parameter.

private DeploymentsEntities context = new DeploymentsEntities();         private int pageSize = 10;         public ActionResult Index(int? page)         {             ViewBag.Message = "Deployments";             ViewBag.PageSize = pageSize;             ViewBag.TotalRecords = context.Deployments.Count(d => d.Active == true);             var model = context.Deployments                 .Include("Website")                 .Include("Environment")                 .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 you can see, when our controller is invoked by an AJAX request, we do not need to return the entire index view. We can simply return the partial view containing the grid. Retuning a partial view will make sure only the HTML we need to update is 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("<img src='/images/active.png' />") :                         Html.Raw("<img src='/images/inactive.png' />")),                     grid.Column("DatabaseSync", header: "Database", format: (item) => (item.DatabaseSync) ? Html.Raw("<img src='/images/active.png' />") :                         Html.Raw("<img src='/images/inactive.png' />")),                     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 your work?",                             HttpMethod = "Get",                             OnSuccess = "updateGrid()"                         }) :                         Html.Raw("<a href='" + item.Environment1.WebsiteURL + "' target='_new'>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 is a simple GET call along with a parameter containing the ID of the record we wish to update. The interesting part about it is the OnSuccess call. This is a JavaScript call that is made when the ActionLink returns successfully.
Since our update operation succeeded, we will 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 will probably find it in the JavaScript onClick events of your pager. We are simply calling it again, along with the current grid page in order to update the container div.
As you can tell, WebGrid has 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)的更多相关文章

  1. ASP.NET Core Razor中处理Ajax请求

    如何ASP.NET Core Razor中处理Ajax请求 在ASP.NET Core Razor(以下简称Razor)刚出来的时候,看了一下官方的文档,一直没怎么用过.今天闲来无事,准备用Rozor ...

  2. .NET Core Razor Pages中ajax get和post的使用

    ASP.NET Core Razor Pages Web项目大部分情况下使用继承与PageModel中的方法直接调用就可以(asp-page),但是有些时候需要使用ajax调用,更方便些.那么如何使用 ...

  3. 对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache

    虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或 ...

  4. 原生态AJAX详解和jquery对AJAX的封装

    AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript    JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...

  5. ajax学习笔记(原生js的ajax)

    ajax是一个与服务器端语言无关的技术,可以使用在任何语言环境下的web项目(如JSP,PHP,ASP等). ajax优点: 1) 页面无刷新的动态数据交互 2) 局部刷新页面 3) 界面的美观 4) ...

  6. 来了解一下Ajax是什么?Ajax的原理?Ajax与传统Web比较?Ajax的优缺点?Ajax的Post与Get比较

    一.什么是Ajax Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术,对于改善用户的体验和页面性能很有帮助.简单地说,在不需要重新刷新页面的情况下 ...

  7. Ajax轮询——“定时的通过Ajax查询服务端”

    Ajax轮询——"定时的通过Ajax查询服务端". 概念: 轮询(polling):客户端按规定时间定时像服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接. 百闻 ...

  8. javascript AJAX简单原理及什么是ajax

    AJAX简单原理供初学者理解 AJAX的原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其 ...

  9. 客户端调用服务器端方法——ASP.NET AJAX(Atlas)、Anthem.NET和Ajax.NET Professional实现之小小比较

    前几天曾经发过一篇<ASP.NET AJAX(Atlas)和Anthem.NET——管中窥豹般小小比较>,Jeffrey Zhao说用ASP.NET AJAX中的UpdatePanel似乎 ...

随机推荐

  1. Android任务和返回栈完全解析,细数那些你所不知道的细节

    附:Android  task详解 出处:http://blog.csdn.net/guolin_blog/article/details/41087993 原文: http://developer. ...

  2. composer更新不成功,启用国内镜像网站的配置更改办法

    通过 composer config -l -g 命令可以列出 composer 的全局配置信息 [home] 配置项就是 composer 的主目录 修改config.json { "co ...

  3. 【LintCode】转换字符串到整数

    问题描述: 实现atoi这个函数,将一个字符串转换为整数.如果没有合法的整数,返回0.如果整数超出了32位整数的范围,返回INT_MAX(2147483647)如果是正整数,或者INT_MIN(-21 ...

  4. 【转】Apache的Order Allow,Deny 详解

    Apache的Order Allow,Deny 详解   Allow和Deny可以用于apache的conf文件或者.htaccess文件中(配合Directory, Location, Files等 ...

  5. Win7下完全卸载Oracle 11g的步骤

    1 右击“计算机”-->管理-->服务和应用程序-->服务,停掉所有Oracle相关的服务(以Oracle打头的,比如OracleDBConsoleorcl). 2 开始--> ...

  6. 【BZOJ-1179】Atm Tarjan + SPFA

    1179: [Apio2009]Atm Time Limit: 15 Sec  Memory Limit: 162 MBSubmit: 2407  Solved: 993[Submit][Status ...

  7. 数论专项测试——约数个数和(lucas的数论)

    #include <iostream> #include <cstdio> #include <cstring> #include <cmath> #i ...

  8. css后代选择器(div.class中间不带空格)

    如果我要查找<div>上用了.class的元素,查找方法:div.class:中间是不空格的. 以上这种形式为css后代选择器 参考:http://www.w3school.com.cn/ ...

  9. 洛谷P1808 单词分类

    题目描述 Oliver为了学好英语决定苦背单词,但很快他发现要直接记住杂乱无章的单词非常困难,他决定对单词进行分类. 两个单词可以分为一类当且仅当组成这两个单词的各个字母的数量均相等. 例如“AABA ...

  10. FT232RL变砖之后

    FT232RL是个是神奇的片子,说万能可能有些夸张,但是...总之就是FTDIChip这个神奇的公司基于类似的技术,做了很多好用的产品,包括转IIC啦,转SPI啦,密码狗啦之类的.是个很有用的工具就对 ...