WebGrid控件的使用

之前只是记录了MVC+EF在数据库进行简单的增删改查，但是实际项目却要用到很多控件，这里先记录下WebGrid控件的简单使用。

首先将我们之前用的Index视图代码修改成如下：

@model IEnumerable<FirstMvcWithEF.Entities.Iphones>@{ViewBag.Title = "Index";
}<h2>Index</h2><p>@Html.ActionLink("Create New", "Create")
</p>
<div id="grid">
@{ var grid = new WebGrid(source: Model,
defaultSort: "price",
rowsPerPage: 10);
}
@grid.GetHtml(tableStyle: "table",headerStyle: "gridhead",alternatingRowStyle: "rowStyle",columns: grid.Columns(grid.Column("type","type",null,null,false),grid.Column("color","color"),grid.Column("price","price"),grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.ID })),grid.Column(format: (item) => Html.ActionLink("Delete", "Delete", new { id=item.ID})))
)
</div>

主要就是控件自身的一个GetHtml方法，这是它的本身定义：

public IHtmlString GetHtml(string tableStyle = null, string headerStyle = null, string footerStyle = null, string rowStyle = null, string alternatingRowStyle = null, string selectedRowStyle = null, string caption = null, bool displayHeader = true, bool fillEmptyRows = false, string emptyRowCellValue = null, IEnumerable<WebGridColumn> columns = null, IEnumerable<string> exclusions = null, WebGridPagerModes mode = WebGridPagerModes.Numeric | WebGridPagerModes.NextPrevious, string firstText = null, string previousText = null, string nextText = null, string lastText = null, int numericLinksCount = 5, object htmlAttributes = null);

可以看到，有许多参数都是允许为空的，比如这里我就已经省略了很多。只用了tableStyle,headerStyle,alternatingRowStyle以及columns这四个参数。

四个参数中稍微要注意的就是columns这个参数，从介绍里可以看出，它是一个

IEnumerable<WebGridColumn>

所以我们可以指定很多列，这里使用的是grid的一个Columns方法，它返回一个WebGridColumn数组：

public WebGridColumn[] Columns(params WebGridColumn[] columnSet);

从参数类型可以看出，该方法的参数个数不固定且决定着列的个数，所以我们要几列就指定几个参数，这里使用Column方法指定每一列：

public WebGridColumn Column(string columnName = null, string header = null, Func<dynamic, object> format = null, string style = null, bool canSort = true);

我把第一列设置了canSort=false,所以就不能按“type”排序了，只能按color,price排序。

附上效果图，：

其实在实例化WebGrid的时候，可以使用构造函数的某些参数，如rowsPerPage表示每页行数（即通常所说的分页）：

 var grid = new WebGrid(source: Model,
defaultSort: "price",
rowsPerPage: 10);

这里表示我每页最多显示10行，并且默认按price排序。

由于这边数据都是手工创建的，没有几条数据，所以看不出分页效果，我将rowsPerPage属性值改成5，F6编译运行，F5刷新网页看看：

运行效果，可以看到将上面仅有的10条数据分成了两页：

忘记给出css代码了：

/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body {background-color: #5c87b2;font-size: .85em;font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;margin: 0;padding: 0;color: #696969;
}a:link {color: #034af3;text-decoration: underline;
}a:visited {color: #505abc;
}a:hover {color: #1d60ff;text-decoration: none;
}a:active {color: #12eb87;
}p, ul {margin-bottom: 20px;line-height: 1.6em;
}header,
footer,
nav,
section {display: block;
}/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {font-size: 1.5em;color: #000;
}h1 {font-size: 2em;padding-bottom: 0;margin-bottom: 0;
}h2 {padding: 0 0 10px 0;
}h3 {font-size: 1.2em;
}h4 {font-size: 1.1em;
}h5, h6 {font-size: 1em;
}/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*//* you can specify a greater or lesser percentage for the
page width. Or, you can specify an exact pixel width. */
.page {width: 90%;margin-left: auto;margin-right: auto;
}header, #header {position: relative;margin-bottom: 0px;color: #000;padding: 0;
}header h1, #header h1 {font-weight: bold;padding: 5px 0;margin: 0;color: #fff;border: none;line-height: 2em;font-size: 32px !important;text-shadow: 1px 1px 2px #111;
}#main {padding: 30px 30px 15px 30px;background-color: #fff;-webkit-border-radius: 4px 0 0 0;-moz-border-radius: 4px 0 0 0;border-radius: 4px 0 0 0;
}footer,
#footer {background-color: #fff;color: #999;padding: 10px 0;text-align: center;line-height: normal;margin: 0 0 30px 0;font-size: .9em;-webkit-border-radius: 0 0 4px 4px;-moz-border-radius: 0 0 4px 4px;border-radius: 0 0 4px 4px;
}/* TAB MENU
----------------------------------------------------------*/
ul#menu {border-bottom: 1px #5C87B2 solid;padding: 0 0 2px;position: relative;margin: 0;text-align: right;
}ul#menu li {display: inline;list-style: none;
}ul#menu li#greeting {padding: 10px 20px;font-weight: bold;text-decoration: none;line-height: 2.8em;color: #fff;
}ul#menu li a {padding: 10px 20px;font-weight: bold;text-decoration: none;line-height: 2.8em;background-color: #e8eef4;color: #034af3;-webkit-border-radius: 4px 4px 0 0;-moz-border-radius: 4px 4px 0 0;border-radius: 4px 4px 0 0;
}ul#menu li a:hover {background-color: #fff;text-decoration: none;
}ul#menu li a:active {background-color: #a6e2a6;text-decoration: none;
}ul#menu li.selected a {background-color: #fff;color: #000;
}/* FORM LAYOUT ELEMENTS
----------------------------------------------------------*/fieldset {border: 1px solid #ddd;padding: 0 1.4em 1.4em 1.4em;margin: 0 0 1.5em 0;
}legend {font-size: 1.2em;font-weight: bold;
}textarea {min-height: 75px;
}input[type="text"],
input[type="password"] {border: 1px solid #ccc;padding: 2px;font-size: 1.2em;color: #444;width: 200px;
}select {border: 1px solid #ccc;padding: 2px;font-size: 1.2em;color: #444;
}input[type="submit"] {font-size: 1.2em;padding: 5px;
}/* TABLE
----------------------------------------------------------*/table {border: solid 1px #e8eef4;border-collapse: collapse;
}table td {padding: 5px;border: solid 1px #e8eef4;width:100px;text-align:center
}table th {padding: 6px 5px;text-align:center;background-color:#CC99CC;border: solid 1px #e8eef4;
}/* MISC
----------------------------------------------------------*/
.clear {clear: both;
}.error {color: Red;
}nav,
#menucontainer {margin-top: 40px;
}div#title {display: block;float: left;text-align: left;
}#logindisplay {font-size: 1.1em;display: block;text-align: right;margin: 10px;color: White;
}#logindisplay a:link {color: white;text-decoration: underline;
}#logindisplay a:visited {color: white;text-decoration: underline;
}#logindisplay a:hover {color: white;text-decoration: none;
}/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {color: #ff0000;
}.field-validation-valid {display: none;
}.input-validation-error {border: 1px solid #ff0000;background-color: #ffeeee;
}.validation-summary-errors {font-weight: bold;color: #ff0000;
}.validation-summary-valid {display: none;
}/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label,
.editor-label {margin: 1em 0 0 0;
}.display-field,
.editor-field {margin: 0.5em 0 0 0;
}.text-box {width: 30em;
}.text-box.multi-line {height: 6.5em;
}.tri-state {width: 6em;
}.rowStyle
{background-color: #E8E8E8;color: #000;
}.gridhead {background-color:yellow;font-weight:bold;text-align:center;
}

记得在_Layout.cshtml文件中引用css，我的css是在项目的Content文件夹下所以引用为：

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

OK。

MVC学习笔记三：WebGrid控件的简单使用相关推荐

vs2010 学习Silverlight学习笔记(7)：控件样式与模板
概要: 终于知道Silverlight--App.xaml是干什么用的了,不仅可以用来封装样式(类似css),还可以制定控件模版...好强大的功能啊. 封装: 继续学习<一步一步学Silverl ...
kendo treeview 修改节点显示值_VBA学习笔记60-1: Treeview控件
学习资源:<Excel VBA从入门到进阶>第60集 by兰色幻想本节讲Treeview控件. TreeView控件是以树形结构显示数据的控件.利用TreeView控件,可以设计出树形结 ...
vb.net listview 删除选定行_VBA学习笔记59-1: listview控件
学习资源:<Excel VBA从入门到进阶>第59集 by兰色幻想本节学习Listview控件,它可以用多种视图方式显示项目的控件.由于其外形美观而且非常实用,所以使用频率很高. Lis ...
Qt学习笔记之常用控件QlistWidget
一.QListWidget Class The QListWidget class provides an item-based list widget. More... Header: #inclu ...
JavaFX 学习笔记——窗口与控件
前言如今比较流行的桌面gui框架有WPF.WinForm.Qt.javafx等.其中WPF和WinForm目前还只能在运行Winsows上.Qt(widget)是一个很强大的跨平台C++框架(不只是 ...
【MFC】学习笔记：常用控件之组合框（Combo Box）
01.目录目录 01.目录 02.控件介绍 03.控件的消息通知函数 04.创建组合框控件及成员函数介绍 4.1 组合框的创建 4.2 CComboBox类的主要成员函数 05.应用实例 06.总结 ...
ASP.NET 学习笔记_01 广告控件的使用
广告控件的使用: 广告文件是一个XML文件,广告文件中所有的标签属性被分析后放到adProperties字典中,用以属性编辑. ads.xml 1 <?xml version="1.0 ...
Android开发学习笔记-自定义组合控件
为了能让代码能够更多的复用,故使用组合控件.下面是我正在写的项目中用到的方法. 1.先写要组合的一些需要的控件,将其封装到一个布局xml布局文件中. <?xml version="1. ...
LVGL v8学习笔记 | 06 - label控件的使用方法
文章目录一.label控件 1. 创建label对象 2. 设置label的文本 3. 获取label文本 4. label的大小 5. label的样式 6. label的事件二.label控件 ...
Win32 学习笔记_列表控件(ListBox)
ListBox控件 1. 创建控件 // 创建ListBox控件 HWND hListBox = CreateWindowEx(0, TEXT("ListBox"), NULL, ...

MVC学习笔记三：WebGrid控件的简单使用

WebGrid控件的使用

MVC学习笔记三：WebGrid控件的简单使用相关推荐

最新文章

热门文章