ASP.NET MVC 的 WebGrid 的 6 个重要技巧 【已翻译100%】
ASP.NET MVC 中 WebGrid 的 6 个重要技巧
https://www.oschina.net/translate/webgrid-in-asp-net-mvc-important-tips
介绍
当一个 Webform 开发者转做 MVC 开发的时候, 他会发现, 许多自己喜欢的东东不见了. 没有代码隐藏模型(behind code), 没有 view state, 没有页面生命周期(page life cycle), 没有服务端控件(server control). 你可以看这篇文章, 里头有讲 MVC 比 ASP.NET Webform少了哪些东西.
没有了这些易用的服务端控件, 相信许多人都会伤心欲绝. 最令人怀念的, 恐怕要属 gridview / datagrid 控件. 作为一个 ASP.NET Webform 开发者, 我能理解, 这种将 GridView 控件拖放到 form 里头, 然后给它绑定数据, 一会的功夫, 就能看到数据在表格中显示的开发过程, 有多爽, 多让人着迷.
MVC 用 “WebGrid” 类代替 GridView . 这是个类, 再说一次, 这是个类. 别指望它能像, 有可视化快速开发工具支持的 gridview / data grid 控件那么好用. 不过要比用 HTML 的表格好的多, 起码省时间. 如果你想知道, 我们为什么不做可视化快速开发工具支持 MVC, 读下这篇文章 ASP.NET Webform 对比 ASP.NET MVC.
本文通过六个重要技巧, 教你如何更有效的使用 WebGrid。

一个简单的 MVC WebGrid 例子
“WebGrid” 的用途是, 显示集合(collection )中的数据. 集合可能是强类型列表(strong typed list), 也可能是泛型, 或其他类型. 我们先来看一个简单的例子. 这个例子将强类型对象添加到一个集合中, 然后用 “WebGrid” 显示出来.
下列代码创建一个名叫 “Custs” 列表, 然后把 “Customer” 类的 对象加进去.
@{
List<Customer> Custs = new List<Customer>();
Custs.Add(new Customer { CustomerCode = "1001", CustomerName = "Shiv" });
Custs.Add(new Customer { CustomerCode = "1002", CustomerName = "Shiv1" });
要在 MVC 的视图(View) 中显示集合的内容, 我们先创建一个 “WebGrid” 对象, 传给 "WebGrid" 构造函数的变量 ”Custs” 是上面代码创建的 "Customer" 对象列表 .
接下来, 调用 “GetHtml()” 函数, 以 HTML 表格形式显示集合中的内容.
@{
WebGrid obj = new WebGrid(Custs);
}
@obj.GetHtml();
运行上面的代码, 就能看到下面图片中的内容. 不错吧 .

技巧1 : 在 MVC WebGrid 中排序
用表格显示数据,首先要说的是排序。“WebGrid” 在默认情况下, 通过点列的标题来排序. 如果你仔细看, 会发现列的标题, 其实是个超链接。
如果你想关闭排序功能, 就像下面的代码那样, 把 “canSort” 设为 “false” 。
WebGrid obj = new WebGrid(Custs, canSort:false);
如果你想设置默认排序, 就把列名赋给 “defaultsort” 。
WebGrid obj = new WebGrid(Custs,defaultSort:"CustomerCode");

技巧 2 :MVC WebGrid 的分页
要启用 MVC WebGrid 的分页功能,只要设置每页行数 “rowsPerPage” 这个属性就可以了。 代码如下:
WebGrid obj = new WebGrid(Custs,rowsPerPage:3);
分页的数字也是以超链接的形式显示出来的。
技巧 3 : 只显示需要显示的 MVC WebGrid 列
经常会有这种情况, 集合里面有 10 列, 但你只想显示其中的 5 列。 要做到这种效果, 你只要把要显示的列名传给参数 “ColumnNames” 就可以了。
WebGrid obj = new WebGrid(Custs,columnNames: new[] { "CustomerCode"});
代码的运行效果如下图,只有 “CustomerCode” 显示出来, “CustomerName” 已经看不到了.

技巧 4 : 自定义 MVC WebGrid 的列标题
我们经常会发现, 集合中的列名不是那么友好。 比如,集合中有一列叫 “CCode”,但是我们想在表格中显示出来的是 “CustomerCode”.
那就把要显示出来的列标题传给 “GetHtml” 函数的参数 “columns”。 下面的代码, 把 “CustomerCode” 显示成 “Code”, “CustomerName” 显示成 “Name”。
@{
WebGrid obj = new WebGrid(Custs);
} @obj.GetHtml(columns: obj.Columns(
obj.Column("CustomerCode", header: "Code"),
obj.Column("CustomerName", header: "Name")
));
运行结果如下图.

技巧 5 : 给 MVC WebGrid 添加样式
改变表格的外观,是开发中最常见的问题之一. 我们可以用 CSS 给 MVC Webgrid 设置样式.
你可以给 WebGrid 各个部分设置样式。如: 表头, 表尾, 行等。
就像平时写的 CSS 样式那样, 你可以设置 “webGrid” 的边距, 边框等。具体如下:
<style type="text/css">
.webGrid {
margin: 4px;
border-collapse: collapse;
width: 500px;
background-color: #B4CFC3;
}
把上面的样式名称传给 “GetHtml” 函数的参数 “tableStyle” 。
@{
WebGrid obj = new WebGrid(Custs);
}
@obj.GetHtml(tableStyle:"webGrid");
运行的时候, 就能在浏览器中看到下面的效果:

技巧 6: 实现 Ajax 调用 WebGrid
基本上现在的网站都离不开 Ajax 。 如果你想在 Ajax 代码中调用 WebGrid, 就按下面的步骤做。 首先, 把调用 “GetHtml” 的代码放到 div 标志中, 就像下面的代码那样写。其次, 给 div 设置一个 id , 并把这个 id 传给参数 “ajaxUpdateContainerId” 。
<div id="div1">
@{
WebGrid obj = new WebGrid(Custs, ajaxUpdateContainerId: "div1");
}
@obj.GetHtml();
</div>
如果你没学过 ASP.NET MVC , 可以到这里看下视频 www.questpond.com,两天学会 MVC (共 16 小时).

ASP.NET MVC 的 WebGrid 的 6 个重要技巧 【已翻译100%】的更多相关文章
- [webgrid] – selecterow - (Get Selected Row from ASP.NET MVC 3 WebGrid)
Get Selected Row from ASP.NET MVC 3 WebGrid Abstract: The following article demonstrates how to get ...
- asp.net mvc 学习资料
ASP.NET MVC 的 WebGrid 的 6 个重要技巧 http://www.oschina.net/translate/webgrid-in-asp-net-mvc-important-ti ...
- Asp.net mvc 中的 Controller 的激活
Controller 激活是指根据路由系统解析出来的 Controller 的名称创建 控制器(Controller)的过程,这里的控制器泛指实现了 IController 接口的类型 激活过程中的核 ...
- 在 ASP.NET MVC 中使用异步控制器
线程池 一直想把项目改写成异步,但是ASP.NETMVC3下写的过于繁琐,.NET 4.5与ASP.NET MVC下代码写起来就比较简单了, MS好像也一直喜欢这样搞,每一个成熟的东西,都要演变好几个 ...
- 在 ASP.NET MVC 中充分利用 WebGrid (microsoft 官方示例)
在 ASP.NET MVC 中充分利用 WebGrid https://msdn.microsoft.com/zh-cn/magazine/hh288075.aspx Stuart Leeks 下载代 ...
- ASP.NET MVC WebGrid – Performing true AJAX pagination and sorting 【转】
ASP.NET MVC WebGrid – Performing true AJAX pagination and sorting FEBRUARY 27, 2012 14 COMMENTS WebG ...
- Asp.Net MVC EF各版本区别
2009年發行ASP.NET MVC 1.0版 2010年發行ASP.NET MVC 2.0版,VS2010 2011年發行ASP.NET MVC 3.0版+EF4,需要.Net4.0支持,VS2 ...
- 返璞归真 asp.net mvc (9) - asp.net mvc 3.0 新特性之 View(Razor)
原文:返璞归真 asp.net mvc (9) - asp.net mvc 3.0 新特性之 View(Razor) [索引页][源码下载] 返璞归真 asp.net mvc (9) - asp.ne ...
- [转帖]Asp.Net MVC EF各版本区别
Asp.Net MVC EF各版本区别 https://www.cnblogs.com/liangxiaofeng/p/5840754.html 2009年發行ASP.NET MVC 1.0版 201 ...
随机推荐
- @Async in Spring--转
原文地址:http://www.baeldung.com/spring-async 1. Overview In this article we’ll explore the asynchronous ...
- Blob初探
简介 Blob在js中意味着二进制大数据.实现该接口的对象有3个属性,分别是type(MIME),size(byte)和 一个切割方法:slice(在大文件分片上传可能用到).另外,File实现了Bl ...
- 搞懂$.each和$(selector).each
$.each:该方法用于遍历任何集合,包括数组和对象 $(selector).each:该方法用于遍历Jquery对象 语法:$.each(obj,callback,args) ①遍历数组 var a ...
- java多线程--信号量Semaphore的使用
Semaphore可以控制某个共享资源可被同时访问的次数,即可以维护当前访问某一共享资源的线程个数,并提供了同步机制.例如控制某一个文件允许的并发访问的数量. 例如网吧里有100台机器,那么最多只能提 ...
- JavaScript基础深入研究
一.DOM事件 1.事件阻止API preventDefault() — 阻止浏览器默认 stopPropagation() — 阻止事件流冒泡 stopImmediatePropagation() ...
- SQL Server里的文件和文件组
在今天的文章里,我想谈下SQL Server里非常重要的话题:SQL Server如何处理文件的文件组.当你用CREATE DATABASE命令创建一个简单的数据库时,SQL Server为你创建2个 ...
- CSS垂直居中和水平居中
前言 CSS居中一直是一个比较敏感的话题,为了以后开发的方便,楼主觉得确实需要总结一下了,总的来说,居中问题分为垂直居中和水平居中,实际上水平居中是很简单的,但垂直居中的方式和方法就千奇百怪了. 内联 ...
- QT QTableView用法小结
QTableView常用于实现数据的表格显示.下面我们如何按步骤实现学生信息表格: 一 添加表头 //准备数据模型 QStandardItemModel *student_model = new QS ...
- [Asp.net 5] Logging-其他日志系统的实现
Microsoft.Framework.Logging.NLog 使用Nlog扩展日志系统:按照我们上节说的,对于扩展的日志系统都要实现俩个接口ILogger.ILoggerProvider.所以在当 ...
- C#开发微信门户及应用(44)--微信H5页面开发的经验总结
在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...