当前位置：文档之家 › MVC 3.0 实例系列之创建数据表格 (14)

MVC 3.0 实例系列之创建数据表格 (14)

  • 格式：doc
  • 大小：485.50 KB
  • 文档页数：10

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

简介
在ASP.NET WebForms中微软为我们提供了GridView控件，而且控件中提供了一种快速简便的
方法来显示表格中的数据集，并提供排序，分页，编辑，删除等一些额外的功能。我们知道在ASP.NET
WebForms页面加载时，GridView会自动呈现为一个

元素，使我们不必编写任何html
标记，只专注于GridView中检索数据和绑定数据。然而，在ASP.NET MVC应用程序 ，开发人员
必须手动完成View视图标记，如果开发类似WebForms中的GridView表格，是不是感觉有点头
痛。

从这篇文章开始，我们就探讨如何在ASP.NET MVC应用程序中显示表格数据。然后我们逐渐扩张
一步一步完成表格中复杂的功能，包括排序，分页，筛选等增强型功能。

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

创建解决方案
新建一个基于MVC 3.0框架，名为MVC3.Grid的解决方案
2

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

解决方案创建成功
3

创建Model
对于Model，我们可以选择使用自定义的几条模拟数据，也可以选择数据库作为基础数据。
此时我们选择Linq to Sql 作为数据模型
鼠标右击Model文件夹--添加新项目
新建Linq to Sql数据模型

点击添加后，我们可以在服务器资源管理器中，新建与数据的连接
提供一下例子中Employee和Department两张表的设计
DepartmentID是个int型的自动增长列
4

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

注意：后面例子中界面上的属性只选取其中几个作为例子。
5
重新生成解决方案，看看我们的项目是否成功。
创建Controller
首先，我们为了能将数据重复使用，做一个简单的Controller基类，命名为BaseController
6

该基类里面，负责与数据库进行通讯。
这样做仅仅是为了做该例子时，获取数据方便，没有考虑其他因素，希望不要纠结与此，谢谢。
该基类的代码如下

public class BaseController : Controller
{
private ModelDataContext _DataContext = null;
protected ModelDataContext DataContext
{
get
{
if (_DataContext == null)
_DataContext = new ModelDataContext();

var options = new DataLoadOptions();
options.LoadWith(p => p.EmployeeNO);
_DataContext.LoadOptions = options;

return _DataContext;
}
}

}

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

创建成功后，控制器默认给出了Index方法
我们可以修改修改，让该Index方法返回一个List
代码如下：

public class EmployeeController : BaseController
{
//
// GET: /Employee/

public ActionResult Index()
{
var list = this.DataContext.Employee;
return View(list);
}

}

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

选择基于Razor引擎的视图，选择创建强类型视图
模型类为我们Linq to Sql 创建生成的Employee
8

点击添加
修改视图代码如下

@model IEnumerable
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}

成员列表


style="text-align:center;border-collapse:collapse">
9








@foreach (var item in Model)
{







}

编号 姓名 性别 生日 是否婚配
@item.EmployeeNO @item.EmployName @item.Sex @string.Format("{0:yyyy年MM月dd日}", item.Birthday)
@if (item.Marital == "1")
{
@:@("是")
}
@if(item.Marital!="1")
{
@:@("否")
}

修改Global.asax默认主页为Employee
点击运行
10

可以看到，目前为止，一个标准的表格已经完成。
总结
表格的呈现形式是在遍历list的时候，根据list集合的行数生成的table.tr，根据list中每一项的属
性来生成table.td

下节预告

合集下载

ASP.NETMVC3+EF4+Oracle入门实例（五）

ASP.NETMVC3+EF4+Oracle入门实例（五）

MVC3+EF4+Oracle⼊门实例（五）5.8 在Visual Studio中创建Oracle数据表Visual Studio中选择视图，然后点击“服务器资源管理器”，打开服务器资源管理⾯板。

然后右键选择“添加连接”：接下来就是如下界⾯（如果没有安装ODAC驱动，请先下载安装，否则⽆法继续）选择“Oracle Data Provider for .NET”，点击“确定”上⾯的信息你懂的，点击测试连接，如果没有下图的提⽰信息，请检查ODAC驱动是否安装好，并且Oracle数据库的监听服务已经开启。

点击“确定”我们就已经创建了Visual Studio和Oracle数据库的连接了，如下图所⽰：下⾯我们创建数据表Movie，右键上图中所⽰的表节点，选择“查询窗⼝”执⾏如下SQL语句，创建数据表（强烈建议创建主键，最好创建外键关联）CREATE TABLE "MOVIE" ("ID" NUMBER NOT NULL,"TITLE" NVARCHAR2(50) NOT NULL,"RELEASEDATE" DATE NOT NULL,"GENRE" NVARCHAR2(20) NOT NULL,"PRICE" NUMBER(16,2) NOT NULL,CONSTRAINT "PK_MOVICEID"PRIMARY KEY ( "ID")ENABLEVALIDATE);为了实现Movie表的主键字段⾃增，我们下⾯创建⼀个序列和⼀个触发器。

添加序列：修改名称为“SQE_Movie”，点击“保存”完成创建。

添加触发器（如果没有出现新创建的表，请右键刷新数据连接）：然后填写如下信息：点击“确定”，编写如下代码并右键选择“编译”：TRIGGER "MOVIE_TRI_ID"BEFOREINSERTON "MOVIE"FOR EACH ROWBEGINif(:new.ID is null) thenbeginselect SQE_MOVIE.nextval into :new.ID from dual;end;end if;END;最后数据连接⾯板如下图所⽰：接下来到了激动⼈⼼的时候了，创建实体模型，选择视图，点击“解决⽅案资源管理器“打开解决⽅案资源管理器⾯板，然后右键项⽬新建⼀个⽂件夹DAL⽤于存放我们的实体模型，如下图所⽰：右键新建的DAL⽂件夹，选择新建项：选择“实体模型”并改名为“MovieModel.edmx”，点击“添加”继续下⼀步：选择“从数据库⽣成”，点击“下⼀步”继续：填写如上信息，点击“下⼀步”继续：选择我们要创建模型的表，如果有视图和存储过程，也可以选择，点击“完成”，Visual Studio⾯板如下所⽰：到⽬前为⽌，我们已经完成了创建数据表，并且使⽤Entity FrameWrok从数据库⽣成了实体模型。

三层架构(MVC)

三层架构(MVC)


“三层结构”是什么？ 三层结构”是什么？
“三层结构”一词中的“三层”是指：“表现层”、“中间业务 三层结构”一词中的“三层”是指： 表现层” 层”、 数据访问层” “数据访问层”。 其中： 其中： 表现层：位于最外层（最上层），离用户最近。 ），离用户最近 表现层：位于最外层（最上层），离用户最近。用于显示数据和 接收用户输入的数据，为用户提供一种交互式操作的界面。 接收用户输入的数据，为用户提供一种交互式操作的界面。 中间业务层：负责处理用户输入的信息， 中间业务层：负责处理用户输入的信息，或者是将这些信息发送 给数据访问层进行保存， 给数据访问层进行保存，或者是调用数据访问层中的函数再次读 出这些数据.中间业务层也可以包括一些对“商业逻辑” 出这些数据.中间业务层也可以包括一些对“商业逻辑”描述代 码 在里面。 在里面。 数据访问层：仅实现对数据的保存和读取操作。数据访问， 数据访问层：仅实现对数据的保存和读取操作。数据访问，可以 访问数据库系统、二进制文件、文本文档或是XML文档。 XML文档 访问数据库系统、二进制文件、文本文档或是XML文档。
理解从界面到数据访问层流程。 理解所有层之间的项目依赖关系。 理解所以层之间的数据传递关系。 画出流程图总结。
ＭＶＣ设计模式的优点与缺点 ＭＶＣ设计模式的优点与缺点
综合案例练习
实现以下程序： 用MVC实现以下程序： 实现以下程序 留言簿的实现。 一． 留言簿的实现。 数据库查询数据。 二． Northwind数据库查询数据。 数据库查询数据 登陆/注册 存储过程）。 注册（ 三． 登陆 注册（存储过程）。
ＭＶＣ三层间的关系图 ＭＶＣ三层间的关系图
为什么需要 “三层结构”？ 三层结构”
一． 数据库无法更换． 数据库无法更换． 修改商业规则困难． 二． 修改商业规则困难． 数据访问代码能很好得到重用． 三． 数据访问代码能很好得到重用． 更容易团队协作开发． 四． 更容易团队协作开发．namespace DALFactory { public class DFactory { public object DataAccessFactory() { //反射对象实例代码 } } }
MVC3.0入门学习笔记-页面传值-TempData

MVC3.0入门学习笔记-页面传值-TempData

MVC3.0⼊门学习笔记-页⾯传值-TempData
TempData[]是⼀个可以跨Action的传递，且只传递⼀次.
TempData保存在Session中，Controller每次执⾏请求的时候，会从Session中先获取TempData，⽽后清除 Session，获取完TempData数据，虽然保存在内部字典对象中，但是其集合中的每个条⽬访问⼀次后就从字典表中删除。

具体代码层⾯，TempData获取过程是通过SessionStateTempDataProvider.LoadTempData⽅法从 ControllerContext的Session中读取数据，⽽后清除Session，故TempData只能跨Controller传递⼀次。

1.在HomeController.cs中创建字典：
public ActionResult Index()
{
TempData["str"] = "TempData传递⼀次字符串";
Response.Redirect("/home/about");//跳转到about页中
return View();
}
2.因为页⾯将跳转到about页，并希望该页接受到传值，所以定义应在About.cshtml中：
@TempData["strValue"];
我们已经可以看到我们传递的值了，但是刷新以后，将不会显⽰，因为该传值只能传递⼀次。

ASP.NETMVC3Beta初体验之超酷的Chart

ASP.NETMVC3Beta初体验之超酷的Chart

MVC3Beta初体验之超酷的Chart前⾯⼀篇⽂章：介绍了WebGrid控件的使⽤， MVC 3 Beta中才内置Chart的。

这篇⽂章中将介绍Chart的使⽤。

包括Chart数据源的配置、Chart的显⽰、Chart保存三个⽅⾯。

Chart是很多系统中使⽤，所以在 MVC 3 Beta初体验之中介绍它是很有必要的。

1、配置Chart的数据源给Chart配置数据源⼤概有三种⽅式。

第⼀种：使⽤数组⽰例：Controller代码：public ActionResult BasicChart(){return View();}BasicChart.cshtml代码：<p>@{var key =new Chart(width: 600, height: 400).AddTitle("⼈员流动情况").AddSeries(name: "Employee",xValue: new[] { "⼀⽉份", "⼆⽉份", "三⽉份", "四⽉份", "五⽉份", "六⽉份", "七⽉份", "⼋⽉份", "九⽉份"}, yValues: new[] { "2", "6", "4", "5", "3","4","9","2","5"}).Write();}</p>从上⾯代码可以看到，我给 Chart的xValue配置了⼀个数组，相应的yValue也配置了⼀个相应的数组。

运⾏效果：此时，我们发现这个图形是单独显⽰的，没有站点的样式和母版。