[webgrid] – Ajax – (Reloading a Razor WebGrid after Ajax calls using a partial view)
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)的更多相关文章
- ASP.NET Core Razor中处理Ajax请求
如何ASP.NET Core Razor中处理Ajax请求 在ASP.NET Core Razor(以下简称Razor)刚出来的时候,看了一下官方的文档,一直没怎么用过.今天闲来无事,准备用Rozor ...
- .NET Core Razor Pages中ajax get和post的使用
ASP.NET Core Razor Pages Web项目大部分情况下使用继承与PageModel中的方法直接调用就可以(asp-page),但是有些时候需要使用ajax调用,更方便些.那么如何使用 ...
- 对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache
虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或 ...
- 原生态AJAX详解和jquery对AJAX的封装
AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...
- ajax学习笔记(原生js的ajax)
ajax是一个与服务器端语言无关的技术,可以使用在任何语言环境下的web项目(如JSP,PHP,ASP等). ajax优点: 1) 页面无刷新的动态数据交互 2) 局部刷新页面 3) 界面的美观 4) ...
- 来了解一下Ajax是什么?Ajax的原理?Ajax与传统Web比较?Ajax的优缺点?Ajax的Post与Get比较
一.什么是Ajax Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术,对于改善用户的体验和页面性能很有帮助.简单地说,在不需要重新刷新页面的情况下 ...
- Ajax轮询——“定时的通过Ajax查询服务端”
Ajax轮询——"定时的通过Ajax查询服务端". 概念: 轮询(polling):客户端按规定时间定时像服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接. 百闻 ...
- javascript AJAX简单原理及什么是ajax
AJAX简单原理供初学者理解 AJAX的原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其 ...
- 客户端调用服务器端方法——ASP.NET AJAX(Atlas)、Anthem.NET和Ajax.NET Professional实现之小小比较
前几天曾经发过一篇<ASP.NET AJAX(Atlas)和Anthem.NET——管中窥豹般小小比较>,Jeffrey Zhao说用ASP.NET AJAX中的UpdatePanel似乎 ...
随机推荐
- yii基础应用目录结构
basic/ 应用根目录 composer.json Composer 配置文件, 描述包信息 config/ 包含应用配置及其它配置 console.php 控制台应用配置信息 web.php We ...
- 用 unoconv 将 xls 转换成 csv
在 Linux 下,用 unoconv 将 xls 转换成 csv. unoconv -f csv -v input.xlsx
- CODE[VS] 1346 HelloWorld编译器
1346 HelloWorld编译器 时间限制: 1 s 空间限制: 1000 KB 题目等级 : 黄金 Gold 题目描述 Description 请编程判断一个负责打印HelloWo ...
- js-JavaScript高级程序设计学习笔记9
依然第十三章 事件 1.页面上的所有元素都支持鼠标事件,除了mouseenter和mouseleave,所有鼠标事件都会冒泡. 2.修改键:shift.ctrl.alt.meta.四个属性表示修改键的 ...
- Ubuntu下matlab快捷键设置
ubuntu15.04, matlab2016a 默认按键ctrl+s无法保存,ctrl+z无法撤销.因为用的是emacs的快捷键.emacs的快捷键不熟悉会觉得很复杂,果断改为windows风格的: ...
- 【BZOJ-1017】魔兽地图DotR 树形DP + 背包
1017: [JSOI2008]魔兽地图DotR Time Limit: 30 Sec Memory Limit: 162 MBSubmit: 1566 Solved: 705[Submit][S ...
- Maven配置不成功
配置了MAVEN_HOME,新建了java文件,在d:/java/MAVEN_HOME/apach....,path下输出%MAVEN_HOME%bin,为什么cmd下mvn不行呢?因为MAVEN_H ...
- 在打开vs解决方案时,怎样让所以打开的项目自动折叠
使用VS 2010中的扩展性,搜PowerCommands,PowerCommands扩展在Visual Studio 2010中添加了数十个有用的的命令, Collapse Projects(折叠项 ...
- 一、swoole安装
说明:swoole扩展需要安装php环境,这里就不说了. 1.有了PHP环境后,即可安装swoole扩展. swoole扩展下载地址:https://github.com/swoole/swoole- ...
- sed学习笔记
sed是一个文本处理工具,可以根据给出的条件,自动对文本进行处理.在使用之前,需要知道的有三点:1. sed是逐行进行处理:2. sed不对原文件进行修改:3. sed默认是将处理后的内容打印到标准输 ...