MVC5+EF6 入门完整教程五

上篇文章介绍了EF实现CRUD及一些基本的Html Helpers.

这次我们将会对之前的内容进行一些修改和重构:

  1. 引入Bootstrap样式,搭建几类共用的模板页,对UI进行一些改造
  2. 分类介绍Html Helpers
  3. 完善一些功能

文章提纲

  • 理论基础
  • UI改造详细步骤
  • 总结

理论基础 -- Bootstrap简介

以下摘自百度百科:

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。后面详细步骤会介绍如何使用。

理论基础 -- Html Helpers

主要分成输入类和显示类。

输入类:

TextArea, TextBox

Password

Hidden

DropDownList

ListBox (与DropDownList类似,生存可多选的下拉列表框)

RadioButton

CheckBox

显示类:

显示类 Helper可以在应用程序中生成指向其他资源的链接,也可以构建被称为部分视图的可重用UI片段。

ActionLink和RouteLink

URL (Url.Action, Url.Content)

Partial 和 RenderPartial

Action和RenderAction

这些具体的作用我就不介绍了,相信各位园友根据名字都可以猜出生成的大多数HTML标签。建议大家新建一个空白View,将所有的helper都放进去,生成页面后,右键查看源代码,这样可以比较清晰的了解这些标签和HTML的对应关系。

Note

有两个helper说明一下:

html.ActionLink生成一个<a href=".."></a>标记

Url.Action只返回一个url。
例如:
@Html.ActionLink("linkText","someaction","somecontroller",new { id = "123" },null)
生成结果:

<a href="/somecontroller/someaction/123">linkText</a>

@Url.Action( "someaction", "somecontroller", new { id = "123" }, null)
生成结果:
/somecontroller/someaction/123

另外,Partial和Action大家可能会比较陌生,这个后面文章讲分部视图(类似于原来web form中的用户控件)的时候介绍。

不知大家是否还记得我们前几篇文章用过的helper, 和这次介绍的有点不一样。

例如

这些helper的特征是名称后面加上了 For , 这些叫做强类型的辅助方法。

对于不适合使用字符串字面值从View数据中提取值的情况,可以使用强类型辅助方法, 通过传递一个lambda表达式来指定要渲染的模型属性。表达式的模型类型必须和为View指定的强类型一致。

主要的强类型辅助方法。

Html.TextBoxFor();

Html.TextAreaFor();

Html.DropDownListFor();

Html.CheckboxFor();

Html.RadioButtonFor();

Html.ListBoxFor();

Html.PasswordFor();

Html.HiddenFor();

Html.LabelFor();

Html.EditorFor();

Html.DisplayFor();

Html.DisplayTextFor();

Html.ValidtionMessageFor()

这些大都和前面普通的helper对应,大家可以自己试验。

UI改造详细步骤

下面我们对之前做的界面做一些改造。

下载相关文件

打开Bootstrap的Official Site

http://getbootstrap.com/

目前的版本是 v3.3.0, 我们直接下载 Source code

解压缩后文件结构:

我们实际要用的都放在dist文件夹内,展开dist文件夹

添加文件至项目

我们在项目中新增加几个文件夹OpenSource, Content, fonts

OpenSource中我们放一些第三方的源代码,Content中放实际使用的css文件, fonts放字体文件。

将解压缩后的文件夹bootstrap-3.3.0整体放入OpenSource文件夹内,方便以后查看用。

将bootstrap-3.3.0àdist 中的bootstrap.css和bootstrap-theme.css放入Content文件夹。

fonts文件夹先不用。

文件的准备工作就做好了,下面我们开始在做好的项目中使用bootstrap

打开ViewsàAccountàLogin.cshtml, 贴着title标签下面增加一行

<link href="~/Content/bootstrap.css" rel="stylesheet" />

打开这个页面查看下,发现已经应用上样式了。

下面我们就开始这个项目的UI改造工作。

定义模板页

定义两类模板分别对应着 用户(主页面),管理员

Note 注册登录页的样式因为很少被共有,就不用模板页了。

右键Views文件夹,新建文件夹Shared. 这个新建的文件夹主要用来放共用的模板文件。

右键Shared文件夹,新建布局页 _Layout.cshtml和 _LayoutAdmin.cshtml

我们仿照bootstrap给我们提供的示例样式完成这两个布局页。

这两个布局页的内容我就不详细介绍了,具体可以查看我的源代码。

有几点说明一下:

@RenderBody():使用这个布局的View将把他们的内容显示到此处。

要使用这个布局时,如下图,在View中添加 Layout="~Views/Shared/_Layout.cshtml";

Note

可以在Views文件夹下面新建一个视图页,命名为_ViewStart.cshtml,将这部分统一写到这个文件里(如下图),这样应用布局页的View就可以省略这部分内容了。 另外这个_ViewStart.cshtml也是可以嵌套的,使用布局页的View会自动应用最近文件夹下面的_ViewStart.cshtml.

我们新建两个Controller : MVCDemoController和AdminController.cs

根据默认的Index方法新建视图,分别应用_Layout.cshtml和_LayoutAdmin.cshtml

用户界面

管理员界面

现在我们已经将要做的模板页做好了。我们再将登录框美化下:

现在我们就完成了对于UI的改造,我们做了三件事:

引入bootstrap样式;制作共用的布局页;美化登录页

关于页面UI设计的就不详细讲了,大家可以直接看源代码。

总结

本次我们主要对之前的内容做了一些完善,做了三个页面来说明情况。

你需要掌握

  1. bootstrap的基本使用
  2. 布局页的使用
  3. 常用的helper要做到心里有数

好了,今天就到这里。

欢迎大家多多评论,让下一篇文章更好 :)

时间: 2024-10-01 05:01:04

MVC5+EF6 入门完整教程五的相关文章

MVC5+EF6 入门完整教程 总目录

MVC5 + EF6 入门完整教程1 MVC5 + EF6 入门完整教程二 MVC5 + EF6 完整入门教程三 MVC5+EF6 入门完整教程四 MVC5+EF6 入门完整教程五 MVC5+EF6 入门完整教程六 MVC5+EF6 入门完整教程七 MVC5+EF6 入门完整教程八 MVC5+EF6 入门完整教程九

MVC5+EF6 入门完整教程九

前一阵子临时有事,这篇文章发布间隔比较长,我们先回顾下之前的内容,每篇文章用一句话总结重点. 文章一 MVC核心概念简介,一个基本MVC项目结构 文章二 通过开发一个最基本的登录界面,介绍了如何从Controller中获取表单数据 文章三 EF的整个开发过程 文章四 EF基本的CRUD和常用的HtmlHelper 文章五 使用布局页(模板页)改造UI 文章六 分部视图(Partial View) 文章七 排序过滤分页 文章八 不丢失数据进行数据库结构升级 以上如果有不清楚的可以再回去看一下. 文

MVC5+EF6 入门完整教程

MVC5+EF6 入门完整教程11--细说MVC中仓储模式的应用 MVC5+EF6 入门完整教程10:多对多关联表更新&使用原生SQL@20150521 MVC5+EF6 入门完整教程9:多表数据加载@20150212 MVC5+EF6 入门完整教程8 :不丢失数据进行数据库结构升级 @20141215 MVC5+EF6 入门完整教程7 :排序过滤分页 @20141201 MVC5+EF6 入门完整教程6 :分部视图(Partial View) @20141117 MVC5+EF6 入门完整教程

MVC5+EF6 入门完整教程十

本篇是第一阶段的完结篇. 学完这篇后,你应该可以利用MVC进行完整项目的开发了. 本篇主要讲述多表关联数据的更新,以及如何使用原生SQL. 文章提纲 多表关联数据更新 如何使用原生SQL 总结 多表关联数据更新 我们在第四篇文章已经讲过数据的更新了,不过那个是针对单表结构的更新. 这次我们讲下使用EF进行关联数据的更新. 关联数据更新有两种情况: 1.一对多 2.多对多 第一种情况关联表有主外键关联,只要简单的更新外键值就可以了(相当于更新单表),我们主要讲解第二种多对多的情况. 使用之前很熟悉

MVC5+EF6 入门完整教程12--灵活控制Action权限

大家久等了. 本篇专题主要讲述MVC中的权限方案. 权限控制是每个系统都必须解决的问题,也是园子里讨论最多的专题之一. 前面的系列文章中我们用到了 SysUser, SysRole, SysUserRole 这几个示例表. 我们以此为基础,完成RBAC (基于角色的控制) 的核心功能. 在此给出我的最佳实践,最终的效果是针对任意一个Action或Controller,都可以根据配置的角色来控制访问权限. 完成此核心功能后,可以再往两方面扩展常用功能: 1. 可以根据 组织/用户/角色 的并集来控

MVC5+EF6 入门完整教程11--细说MVC中仓储模式的应用

大家久等了. 本篇专题主要讲述MVC中的权限方案. 权限控制是每个系统都必须解决的问题,也是园子里讨论最多的专题之一. 前面的系列文章中我们用到了 SysUser, SysRole, SysUserRole 这几个示例表. 我们以此为基础,完成RBAC (基于角色的控制) 的核心功能. 在此给出我的最佳实践,最终的效果是针对任意一个Action或Controller,都可以根据配置的角色来控制访问权限. 完成此核心功能后,可以再往两方面扩展常用功能: 1. 可以根据 组织/用户/角色 的并集来控

MVC5+EF6 入门完整教程13 -- 动态生成多级菜单

稍微有一定复杂性的系统,多级菜单都是一个必备组件. 本篇专题讲述如何生成动态多级菜单的通用做法. 我们不用任何第三方的组件,完全自己构建灵活通用的多级菜单. 需要达成的效果:容易复用,可以根据model动态产生. 文章提纲 概述要点 && 理论基础 详细步骤 一.分析多级目录的html结构 二.根据html结构构建data model 三.根据data model动态生成树形结构 四.解析树形结构成html 总结 概述要点 && 理论基础 要实现动态菜单,只要解决两个问题:

MVC5+EF6 入门完整教程六

本篇我们谈谈分部视图(Partial View). 上篇文章提到过Partial和Action这两个helper, 本篇文章主要就结合这两个helper来讲解分部视图(Partial View)的应用. 文章提纲 理论基础 详细步骤 总结 理论基础 – 分部视图 Partial View指可以应用于View中以作为其中一部分的View的片段(类似于之前的user control), 可以像类一样,编写一次, 然后在其他View中被反复使用. 一般放在"Views/Shared"文件夹中

MVC5 + EF6 入门完整教程 (1)

第0课 从0开始 ASP.NET MVC开发模式和传统的WebForm开发模式相比,增加了很多"约定". 直接讲这些 "约定" 会让人困惑,而且东西太多容易忘记. 和微软官方教程不同,笔者尽量不用脚手架,从空白框架开始,一步一步添加功能,每次添加的东西刚好够用,让大家能真正能用起来,理解每一个过程. 文章提纲 概述 核心概念介绍 从空白开始,建立一个基本框架详细步骤 概述 本系列文章及文章中的例子主要基于微软官方文档 使用工具 : VS2013 + MS SQL 2