MVC五+EF6 入门完整教程伍

上篇小说介绍了EF完成CRUD及部分宗旨的Html
Helpers.

这一次我们将会对前边的始末展开一些改造和重构:

  1. 引入Bootstrap样式,搭建几类共用的模板页,对UI实香港行政局地改建
  1. 分类介绍Html
    Helpers

  2. 全盘1些效用

文章提纲

  • 辩论基础
  • UI改变详细步骤
  • 总结

辩白功底 — Bootstrap简单介绍

以下摘自百度宏观:

Bootstrap是照片墙推出的二个开源的用于前端开拓的工具包。它由脸书的设计师马克奥托和JacobThornton同盟开采,是一个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说雀巢(Beingmate)下:

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,
和此番介绍的有点分歧样。

例如

图片 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/

现阶段的本子是
v三.三.0, 大家一直下载 Source code

图片 2

解压缩后文件结构:

图片 3

作者们实际要用的都位于dist文件夹内,张开dist文件夹

图片 4

加上文书至项目

咱俩在档次中新净增几个文本夹OpenSource,
Content, fonts

OpenSource中大家放1些第3方的源代码,Content中放实际利用的css文件,
fonts放字体文件。

将解压缩后的公文夹bootstrap-叁.三.0全体放入OpenSource文本夹内,方便今后翻看用。

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

fonts文件夹先不用。

 

图片 5

文件的准备干活就狠抓了,上边我们早先在搞好的档次中使用bootstrap

开辟ViewsàAccountàLogin.cshtml, 贴着title标签上面扩展壹行

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

开垦这些页面查看下,发现已经选用上样式了。

图片 6

上面大家就从头这一个项目的UI退换职业。

概念模板页

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

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

右键Views文件夹,新建文件夹Shared.
那些新建的文书夹首要用来放共用的模板文件。

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

咱俩仿照bootstrap给大家提供的示范样式落成那五个布局页。

那三个布局页的内容我就不详细介绍了,具体可以查阅本身的源代码。

有几点说澳优下:

@RenderBody():使用这一个布局的View将把他们的故事情节呈现到此地。

图片 7

 

要利用那么些布局时,如下图,在View中加多Layout=”~Views/Shared/_Layout.cshtml”;

图片 8

Note

能够在Views文件夹上面新建2个视图页,命名字为_ViewStart.cshtml,将那部分联合写到这几个文件里(如下图),那样应用布局页的View就能够省略那有的内容了。
其余这么些_ViewStart.cshtml也是足以嵌套的,使用布局页的View会自动应用近来文件夹下边的_ViewStart.cshtml.

图片 9

大家新建多个Controller :
Mmp3emoController和AdminController.cs

依据暗许的Index方法新建视图,分别使用_Layout.cshtml和_LayoutAdmin.cshtml

用户分界面

图片 10

管理员分界面

图片 11

至今大家早就快要做的沙盘页做好了。大家再将登6框美化下:

图片 12

今昔大家就完了了对于UI的改建,我们做了三件事:

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

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

总结

此次大家最首要对此前的剧情做了壹部分完善,做了七个页面来申明情况。

你供给精通

  1. bootstrap的主导使用
  1. 布局页的行使
  1. 常用的helper要马到功成心里有数

好了,明日就到此处。

欢迎大家多多评论,让下一篇小说越来越好:)

相关文章