从MVC实战学习网站编写（二）Model及View实现

最新推荐文章于 2022-03-14 21:20:25 发布

VIP文章璞瑜无文

最新推荐文章于 2022-03-14 21:20:25 发布

阅读量699

点赞数

分类专栏： C# MVC GUI

本文链接：https://blog.csdn.net/u010488290/article/details/52289383

版权

前情提要：

上一节我们大致把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

最低0.47元/天解锁文章

璞瑜无文

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从MVC实战学习网站编写（二）Model及View实现

前情提要：上一节我们大致把MVC的主要结构和需要用到的知识罗列了一些。本节我们将对利用Razor语法来实现一个基本的表单静态显示，以初步了解MVC程序是如何运行的。MVC的构建：我们在写之前要了解我们具体实现的业务逻辑是一个表单提交，今天我们只讲前台显示不涉及后台数据处理。那就很简单了，前台显示首先我们需要用到JQuery库，BootStrap库，以及页面上所引用的Model数据模型，
复制链接

扫一扫