前情提要:
上一节我们大致把MVC的主要结构和需要用到的知识罗列了一些。本节我们将对利用Razor语法来实现一个基本的表单静态显示,以初步了解MVC程序是如何运行的。
MVC的构建:
我们在写之前要了解我们具体实现的业务逻辑是一个表单提交,今天我们只讲前台显示不涉及后台数据处理。那就很简单了,前台显示首先我们需要用到JQuery库,BootStrap库,以及页面上所引用的Model数据模型,页面初始化Action。我们都需要有一个大致的轮廓。
Model数据模型:
如图所示,这是我们的Model的数据模型关系图。共有五个实体,每个实体有不同的字段。
Users(用户):【UserId(主键),UserName,UserPassword,UserDescription】
Roles(角色):【RoleId(主键),RoleId,RoleName,RoleNote】
Permission(权限):【PermissionId(主键),PermissionName,PermissionNote】
User_Role(用户角色关联):主要存储用户和角色的关联用户和角色是1对多关系。【UserRoleId,(Users)Users,(Roles)Roles】
Role_Permission(角色权限关联):主要存储角色和权限的关联角色和权限是1对多关系。
【RolePermissionId,RolePermissionNote, (Roles)Roles,(Permission)Permission】
五个实体将会完成账户权限模块的数据支持,这里封装数据就是为了易用,把相同属性的某一类集合放在同一实体防止数据被恶意或无意破坏。
在数据模型这一块还有一个重要的技术Entity Freamwork。三种驱动模式(CodeFirst,Database First,Model First)Code First就是以代码的方式建立数据模型关系,映射数据库自动创建DB。Database First已知数据库根据已知编写Model代码。Model First需要熟练掌握建模语言,以关系图来描绘数据关系,并且自动映射数据库和自创建Model对象。有兴趣可以了解一下,我是采用最笨的方法先在文档内设计数据模型,在数据库中搭建模型,在代码中创建相应的对象来进行开发。
View搭建:
上文构建了数据模型,在此我们回顾一下超文本标记语言就是HTML,HTML是一种文本标记语言有各种各样的标签,也是网页形成的基本形态,与CSS(样式表单)和Javascript(读写HTML元素)组成了网页的基本概念。也就是语义,表现和行为。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title></title>
</head>
<body>
</body>
</html>
如图所示这就是最基本的HTML方式。但是我们今天所要展示的是另外一种语法Razor,他可以直接绑定Model或者利用lamda表达式model => model.UserPassword给指定元素绑定Model。这是Razor语法最特别的地方。当然我们不想用Razor也可以他俩是可以互相嵌套的,而且即使采用纯HTML编写也不用担心数据绑定,现在涌现了一大堆第三方库,例如Knockout.js,Angular.js,以及可以写轻量级的Node.js编写简单的网站就不需要重量级语言(C#,JAVA)看场子。JS有欲称霸宇宙之势还不快去膜拜。
@model BBS.Show.Models.Users
@*
绑定Model实体类
*@
@{
ViewBag.Title = "test";
}
<!DOCTYPE html>
<html>
<head>
<title>登录验证</title>
</head>
<body>
<!--Html.BeginForm()等同于在html代码里写<form>.....</form>是一样的-->
@using (Html.BeginForm("Submit", "GUIHead"))
{
<div>
ID:
</div>
<div>
<!--创建用户名文本框,等同于<input type="text" />-->
@Html.TextBoxFor(model => model.UserId)
</div>
<div>
Name:
</div>
<div>
<!--创建用户名文本框,等同于<input type="text" />-->
@Html.TextBoxFor(model => model.UserName)
</div>
<div>
Password:
</div>
<div>
<!--创建用户密码文本框,等同于<input type="password" />-->
@Html.PasswordFor(model => model.UserPassword)
</div>
<div>
Role:
</div>
<div>
<!--创建用户名文本框,等同于<input type="password" />-->
@Html.DropDownListFor(model => model.Roles, ViewBag.Age as List<SelectListItem>)
@*Lambda表达式绑定model指向实体类属性Roles ViewBag和ViewData是MVC特有的前后台传值的方式之一。
var testList = new List<SelectListItem>();
View