MVC 30 实例系列之创建数据表格 14.docx

MVC 30 实例系列之创建数据表格 14.docx

《MVC 30 实例系列之创建数据表格 14.docx》由会员分享，可在线阅读，更多相关《MVC 30 实例系列之创建数据表格 14.docx（9页珍藏版）》请在冰豆网上搜索。

MVC30实例系列之创建数据表格14

我要学ASP.NETMVC3.0（十四）：

MVC3.0实例系列之创建数据表格

概述

在ASP.NETMVC里面微软并没有给我们提供像GridView表格之类的控件，但是作为web开发人员表格数据显示是我们面临的常见任务之一，从这节开始我们就一步一步学习如何在基于Razor引擎的ASP.NETMVC页面中实现像GridView一样的表格，并且实现表格中的排序、分页、筛选等功能，便于我们更好的理解和使用ASP.NETMVC。

简介

在ASP.NETWebForms中微软为我们提供了GridView控件，而且控件中提供了一种快速简便的方法来显示表格中的数据集，并提供排序，分页，编辑，删除等一些额外的功能。

我们知道在ASP.NETWebForms页面加载时，GridView会自动呈现为一个

然而，在ASP.NETMVC应用程序，开发人员必须手动完成View视图标记，如果开发类似WebForms中的GridView表格，是不是感觉有点头痛。

从这篇文章开始，我们就探讨如何在ASP.NETMVC应用程序中显示表格数据。

然后我们逐渐扩张一步一步完成表格中复杂的功能，包括排序，分页，筛选等增强型功能。

废话不多说了，让我们创建一个ASP.NETMVC应用程序，看看如何在一个网页中以表格的形式显示数据库记录。

创建解决方案

新建一个基于MVC3.0框架，名为MVC3.Grid的解决方案

选择空白解决方案，视图引擎选择Razor引擎，暂时不生成测试框架。

解决方案创建成功

创建Model

对于Model，我们可以选择使用自定义的几条模拟数据，也可以选择数据库作为基础数据。

此时我们选择LinqtoSql作为数据模型

鼠标右击Model文件夹--添加新项目

新建LinqtoSql数据模型

点击添加后，我们可以在服务器资源管理器中，新建与数据的连接

提供一下例子中Employee和Department两张表的设计

DepartmentID是个int型的自动增长列

DepartmentID是外键

拖拽出两张表，此处我们主要以Employee和Department两张表作为例子，这两张表以DepartmentID作为外键连接

注意：

后面例子中界面上的属性只选取其中几个作为例子。

重新生成解决方案，看看我们的项目是否成功。

创建Controller

首先，我们为了能将数据重复使用，做一个简单的Controller基类，命名为BaseController

该基类里面，负责与数据库进行通讯。

这样做仅仅是为了做该例子时，获取数据方便，没有考虑其他因素，希望不要纠结与此，谢谢。

该基类的代码如下

publicclassBaseController:

Controller

{

privateModelDataContext_DataContext=null;

protectedModelDataContextDataContext

{

get

{

if（_DataContext==null）

_DataContext=newModelDataContext（）;

varoptions=newDataLoadOptions（）;

options.LoadWith（p=>p.EmployeeNO）;

_DataContext.LoadOptions=options;

return_DataContext;

}

}

}

继续创建一个名为EmployeeController的控制器，该控制器继承于上面的BaseController基类

创建成功后，控制器默认给出了Index方法

我们可以修改修改，让该Index方法返回一个List

代码如下：

publicclassEmployeeController:

BaseController

{

//

//GET:

/Employee/

publicActionResultIndex（）

{

varlist=this.DataContext.Employee;

returnView（list）;

}

}

创建视图View

我们针对于Index方法创建视图

选择基于Razor引擎的视图，选择创建强类型视图

模型类为我们LinqtoSql创建生成的Employee

点击添加

修改视图代码如下

@modelIEnumerable

@{

ViewBag.Title="Index";

Layout="~/Views/Shared/_Layout.cshtml";

}

成员列表

center;border-collapse:

collapse">

@foreach（variteminModel）

{

}

修改Global.asax默认主页为Employee

点击运行

可以看到，目前为止，一个标准的表格已经完成。

总结

表格的呈现形式是在遍历list的时候，根据list集合的行数生成的table.tr，根据list中每一项的属性来生成table.td

下节预告