MVC5+EF6 入门完整教程五

直达篇文章介绍了EF实现CRUD及一些中心的Html
Helpers.

这次我们用会见指向前面的情节展开局部改和重构:

  1. 引入Bootstrap样式,搭建几近似共用底模版页,对UI进行有改造
  1. 分类介绍Html
    Helpers

  2. 一应俱全有功效

章提纲

  • 辩驳功底
  • 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,
和这次介绍的有硌不平等。

例如

Bootstrap 1

这些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

Bootstrap 2

解压缩后文件结构:

Bootstrap 3

我们实际而为此的还居dist文件夹内,展开dist文件夹

Bootstrap 4

长文件及路

咱俩于列蒙新加几独文本夹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 5

文件的准备干活就是做好了,下面我们开当盘活的型面临采用bootstrap

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

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

开拓这页面查看下,发现已以达到样式了。

Bootstrap 6

下面我们不怕开这个类别之UI改造工作。

概念模板页

概念两像样模板分别对诺在
用户(主页面Bootstrap),管理员

Note
注册登录页的样式因为那个少给共有,就不要模板页了。

右键Views文件夹,新建文件夹Shared.
这个新建的文本夹主要用来加大一块用的模板文件。

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

咱学bootstrap给我们提供的演示样式就这简单个布局页。

当时半只布局页的情我就是无详细介绍了,具体可翻自己的源代码。

发生几乎触及说明一下:

@RenderBody():使用是布局之View将把她们的内容显示到此地。

Bootstrap 7

 

如运此布局时,如下图,在View中添加
Layout=”~Views/Shared/_Layout.cshtml”;

Bootstrap 8

Note

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

Bootstrap 9

咱们新建两单Controller :
MVCDemoController和AdminController.cs

因默认的Index方法新建视图,分别下_Layout.cshtml和_LayoutAdmin.cshtml

用户界面

Bootstrap 10

管理员界面

Bootstrap 11

现我们就快要举行的沙盘页做好了。我们又将登录框美化下:

Bootstrap 12

现行咱们尽管得了对UI的改建,我们举行了三项事:

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

至于页面UI设计之就算非详细讲了,大家好直接看源代码。

总结

本次我们主要针对之前的情节做了一些周,做了三个页面来说明情况。

若得掌握

  1. bootstrap的骨干采用
  1. 布局页的使
  1. 常用之helper要到位心里有数

好了,今天虽交此处。

迎大家多评论,让生一致篇稿子还好
:)

相关文章