BootstrapASP.NET MVC with Entity Framework and CSS一挥毫翻连串小说的第一段:创造基本的MVC Web站点

图1-5:经过ViewBag由控制器传递让About视图的彰显信息

  本书所利用的是Visual Studio 2015
Community版本,那一个可以在Microsoft站点免费下载,该版几乎涵盖了Visual
Studio
2015付费版本的所用力量,大家拿使用是版编写本书的备代码。在本书中我们尚用利用Google的Chrome浏览器来运行及测试我们编辑的代码,之所以接纳Chrome浏览器,是因拖欠浏览器提供了酷精美的对准开发人士工具。我们尚引进咱们最为好于有着4GB内存的Windows
PC机上运行Visual Studio。

  于本书中之演示代码有助于强化大家本着范、视图和控制器定义的了然,并于适当的时下更加高档的定义,比如视图模型(View
Model)。

  除了注册及登录就半独链接之外,在主页还有其它多少个页面的链接:关于与联系情势,它们链接到的URL分别为/Home/About和/Home/Contact。

1.4.3
关于页面、联系情势页面及ViewBag

  About动作方法包含的代码为ViewBag.Message = “Your application
description page.”,Contact方法包含的代码为ViewBag.Message = “Your
contact page.”,赋值的即刻半句话都显得在她各自的视图中。

  大家感谢兴趣之代码是routes.MapRoute方法,在第17尽定义了一个名为也“Default”的路由。代码url:
“{controller}/{action}/{id}”提示站点期望第一个组成部分吧控制器的名,其次是动作的名(匹配控制器中之法名),然后是一个称吧id的部分。我们待会就会面谈论id片段,不过,现在大家集中精力在控制器和动作方法有些及。

  即便大家查阅About.cshtml文件的代码,会意识其间起一行代码为<h3>@ViewBag.Message</h3>,视图使用就一行代码来呈现ViewBag的Message属性的值。当当浏览器被显得时,我们碰面看“Your
application description page”这行文本,如图1-5所显示。

  这遵照书涵盖Microsoft版本的MVC,即ASP.NET MVC。在描绘本书的当儿,ASP.NET
MVC的养版本为MVC5,由此,本书的演示代码都施用ASP.NET MVC
5编写。在本书中出平等节内容涵盖ASP.NET Core 1.0 MVC (MVC 6)。

  倘诺我们开辟这文件,我们会晤视其富含了站点导航的一部分HTML元素。在拖欠公文中的@RenderBody()方法会将请求的视图内容插入到布局标记之中。

  default命名参数的价告诉应用程序当求的URL中绝非点名控制器或动作通常,就用其默认值,控制器的默认值是Home,动作之默认值是Index,由此会调用Views\Home下的Index.cshtml视图。这虽是为啥当大家选择不牵动其他参数的URL时,Home页面会加载的来由。

1.4.4
路由:Web站点是怎明白大家请求的凡哪位控制器的哪位方法

  ASP.NET
MVC也自行匹配任何和方参数相兼容的HTTP请求中之参数。这种匹配是未区分轻重缓急写的。比如,咱们输入的URL为http://localhost:5073/Home/About?id=7将会返回和前面相同的结果,这是因为在查询字符串中的id参数自动匹配About方法的id参数。在第二章我们还会详细讲述。

  Views\Home\Index.cshtml文件包含显示在主页中的及呈现文本相关的HTML代码。在斯文件中,我们可见到一些独HTML元素都饱含class属性,这些class属性的价是Bootstrap的CSS类,这个看似控制着Home页的布局。在连续章节中,大家用学有艺术来改Bootstrap以及哪当一点一滴无采用Bootstrap的情下还规划我们的站点。

Bootstrap 1

  译者注:以本书后续翻译过程被,将相会把Model翻译成模型、View翻译成视图、Controller翻译成控制器,不再利用英文描述。

   在当下同样段中,我们就对ASP.NET MVC和Entity
Framework做了一个非常简单的概览,并展现了以本书中我们以会面直接下的制造项目之办法,并表达了Web站点的根基,包括控制器、视图、ViewBag和路由。大家只所以在本章中做了大概描述,是因在本书的继续章节中大家会详细分解这些概念,并指大家急迅开一个数据驱动之Web站点。大家也许已经注意到了,在本章中我们从未关联任何有关模型的知,这是为拖欠片段文化是我们下一样段的内容,在生一样章节大家用对准我们的Baby
Store站点添加一些成品和分类。

  我们好于偏下链接中下载Visual Studio 2015
Community版本:https://www.visualstudio.com/zh-hans/downloads/

图1-1:择AS.NET Web应用程序类型

  以祈求1-4遭到因故展现主页,是因我们向Web站点发送了一个URL为/Home/Index的求,之所以是URL没有于浏览器的地点栏中体现,是以它们是应用程序启动时之默认URL。假若大家在图1-4受之URL后边添加/Home/Index,然后回车,会发觉所著的页面没有有变更。

  从Visual
Studio菜单栏中,选取【调试】->【先导实践(不调试)】,Web站点将碰面在Visual
Studio所使用的浏览器中打开,如图1-4所著。要挂念转所祭的浏览器,只待以Visual
Studio菜单栏的第二履遭的下拉列表中选用一个不同之浏览器即可。

Bootstrap 2

1 @{
2     Layout = "~/Views/Shared/_Layout.cshtml";
3 }

  这半单URL链接听以前边所讲的预定,即其会分别调用Home控制器中的About动作方法以及Contact动作方法,并且会加载Views\Home目录下之About.cshtml视图和Contact.cshtml视图。

  MVC这三单深写字母分别代表Model-View-Controller(模型-视图-控制器),是一样种普遍运用的软件开发设计形式。ASP.NET
MVC由以下为主模块组成:

1.4 创制项目

  现在休调试启动Web站点导航及关于页面,然后于URL的背后加加一个ID,如下所示:http://localhost:5073/Home/About/7。

  提示:而我们无思叫一个视图使用_ViewStart.cshtml文件中指定的布局页,大家得当此视图文件之极致上边添加@{
Layout = null; }。

  打开Controllers文件夹下的HomeController.cs文件,将内部的About方法的代码修改也下列代码:

图1-3:拓展Controllers、Models和Views文件夹的解决方案资源管理器

  ViewBag是一个动态目标,用于将数据传递给视图。由于那一个动态性,不推荐应用ViewBag给视图传递四只数据有。ViewBag不是强类型,这代表其可涵盖其他数据,因而,大家以视图中使用它的时候没有智能提示效用。我们引进应用强类型视图模型一不佳被视图传递多独数据有。我们将以第三章节讲述。

 1.5 小节

1 public ActionResult About(string id)
2 {
3     ViewBag.Message = "Your application description page. You entered the ID " + id;
4 
5     return View();
6 }

1.2 Entity Framework和Code
First(代码优先)

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.Mvc;
 6 
 7 namespace BabyStore.Controllers
 8 {
 9     public class HomeController : Controller
10     {
11         public ActionResult Index()
12         {
13             return View();
14         }
15 
16         public ActionResult About()
17         {
18             ViewBag.Message = "Your application description page.";
19 
20             return View();
21         }
22 
23         public ActionResult Contact()
24         {
25             ViewBag.Message = "Your contact page.";
26 
27             return View();
28         }
29     }
30 }

  点击“确定”按钮创制项目,一旦项目开创了,大家以相会见到一个形容有“你的ASP.NET应用程序”的页面。关闭那么些文件,因为我们不谋面就此到它们。看一下在Visual
Studio右边的缓解方案资源管理器,Visual
Studio使用一个曰也基架的经过自动生成了一个着力的MVC项目,我们拿运是路作我们种之入口点。

  打开App_Start文件夹下之RouteConfig.cs文件,在斯文件被的代码定义了应用程序以何种格局确定要的URL和哪位控制器的不行动作方法相匹配。代码如下所示:

Bootstrap 3

1.4.4.1 使用可卜URL的ID参数

  MVC起点于70年份末的Smalltalk项目,从此之后持续被更新并行使为多独技巧世界。MVC的关键原则是如创立一个而分层的、可测试的以及可爱戴的应用程序类别架构。MVC的特色有就是是于适合做单元测试,这首要得益于模型、视图和控制器的划分。单元测试在本书中无关系,假若想对单元测试有一个中肯之知晓,推荐大家读Adam
弗里曼(Freeman)(Freeman)的PRO ASP.NET MVC(闽南语名称:精晓ASP.NET MVC 5)一挥毫。

图1-2:挑选MVC模板选项

  Entity Framework (EF)是一个目的关联映射(object relational mapping,
ORM)框架,该框架是.NET Framework的同一局部。本书以通篇使用Entity
Framework的Code
First方法编写类及她中间的关联,然后以不使用其他SQL语句的事态下,生成数据库及相应之阐发。在编辑本书时,Entity
Framework可用版本也EF 6,但是以本书中出相同章节会提到运EF
7本。在本书中之有着示例代码用的且是SQL Server,不过,Entity
Framework为得用来另外关联项目数据库,比如Oracle。

  我们或许早就注意到了,当我们导航及不同的页面,这一个站点呈现平的页头和导航菜单。这种效果是出于布局页来完成的。在Views\Shared\_Layout.cshtml中之布局页的内容如下所示:

  Views\_ViewStart.cshtml文件被的情指定了Web站点使用Views\Shared\_Layout.cshtml文件作为主布局页。框架会拿此文件的情就是视图的同一组成部分,因而可使得地以这个情节补充加到每个视图的起有些。下面的代码呈现了_ViewStart.cshtml文件的内容,它指定我们的站点将祭何人布局页。

图1-6:使以及处理一个可选URL的ID参数

Bootstrap 4

图1-4:自动创设的MVC Web站点

  我们只要召开的第一项事尽管是用Visual Studio创造一个使用ASP.NET
MVC和Entity Framework的Web项目。启动Visual
Studio,然后以菜单栏中相继采纳【文件】->【新建】->【项目】,在弹出的“新建项目”窗体中,确保我们捎了【已装】->【模板】->【Visual
C#】->【Web】,然后采取“ASP.NET
Web应用程序”项目体系,如图1-1所显示。采用.NET Framework
4.6.1作为我们.NET的本。

1.1 MVC和ASP.NET MVC

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.Mvc;
 6 using System.Web.Routing;
 7 
 8 namespace BabyStore
 9 {
10     public class RouteConfig
11     {
12         public static void RegisterRoutes(RouteCollection routes)
13         {
14             routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
15 
16             routes.MapRoute(
17                 name: "Default",
18                 url: "{controller}/{action}/{id}",
19                 defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
20             );
21         }
22     }
23 }

  这将把7作ID参数的价传递让About方法,在拖欠法中大家以那一个值添加到了ViewBag中,并于视图中形出来。结果如图1-6所著。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <meta charset="utf-8" />
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>@ViewBag.Title - 我的 ASP.NET 应用程序</title>
 8     @Styles.Render("~/Content/css")
 9     @Scripts.Render("~/bundles/modernizr")
10 
11 </head>
12 <body>
13     <div class="navbar navbar-inverse navbar-fixed-top">
14         <div class="container">
15             <div class="navbar-header">
16                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
17                     
18                     
19                     
20                 </button>
21                 @Html.ActionLink("应用程序名称", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
22             </div>
23             <div class="navbar-collapse collapse">
24                 <ul class="nav navbar-nav">
25                     <li>@Html.ActionLink("主页", "Index", "Home")</li>
26                     <li>@Html.ActionLink("关于", "About", "Home")</li>
27                     <li>@Html.ActionLink("联系方式", "Contact", "Home")</li>
28                 </ul>
29                 @Html.Partial("_LoginPartial")
30             </div>
31         </div>
32     </div>
33     <div class="container body-content">
34         @RenderBody()
35         <hr />
36         <footer>
37             <p>&copy; @DateTime.Now.Year - 我的 ASP.NET 应用程序</p>
38         </footer>
39     </div>
40 
41     @Scripts.Render("~/bundles/jquery")
42     @Scripts.Render("~/bundles/bootstrap")
43     @RenderSection("scripts", required: false)
44 </body>
45 </html>

  大家告诉这措施去处理传递给它们的称呼吧id的参数,这和默认路由安装中之可选的老五只参数名称相契合。ASP.NET
MVC的型绑定系统会自行将URL中之ID参数映射到About方法的id参数。我们用于前面的章中详细讲述模型绑定。

  ASP.NET
MVC使用ASP.NET的路由控制应用程序咋样诠释URL。它吧控制在传递进入的HTTP请求的靶子是哪个控制器的什么人方法,从而展现何人视图。为了讲其是什么样行事之,我们查阅转面前创制应用程序的时刻自动生成的默认路由。

  注意:当我们设置Visual Studio 2015 Community的时会活动安装SQL
LocalDB,可是,在Windows 10系及,可能用大家单独安装SQL LocalDB。SQL
Server
Express可以以偏下链接中下载:https://www.microsoft.com/zh-CN/download/details.aspx?id=42299

1.4.2 主页是安做事的

1.2.1 将Code
Frist应用为现有数据库

  输入名称BabyStore,然后点击“确定”按钮继续。我们以视此外一个窗体,如图1-2所显示。在是窗体中,我们当ASP.NET
4.6.1模板被精选MVC,并包身份验证为个人用户账户。

  为了做到这十分简单的默认路由安的概述,我们修改是站点的被她应用可选的ID参数。

  • Models:凡是局部表示应用程序数据的好像,那一个近似一般称为普通CLR对象(Plain
    Old CLR Objects,
    POCOs)。那个类似为为此来封装和履行有业务逻辑,比如,我们稍后看到底购物车的业务逻辑。
  • Views:举凡片用来生成HTML的模版文件,生成的HTML文件拿会晤受发送至浏览器。视图(View)平时用于显示从模型(Model)获取之数。尽管视图(View)可以蕴涵部分说了算哪些HTML可以于扭转的逻辑,但非应当包含其他事情逻辑。
  • Controllers:是有的用以拍卖输入请求的类似,那么些近似可打模型(Model)获取数据,并拿这么些多少传递给视图(View),最终以视图(View)生成的HTML中显得。控制器(Controller)可能会面含有有冲请求中的少数音讯来过滤数据的逻辑。比如,我们可依照传递让控制器(Controller)方法的参数(该参数的值来自于客户端请求)来变化查询。

1.4.1 查看Web站点

  正而前沿提到的,Code First是采用Entity
Framework的同种模式,使用该方法可允许我们首先编写Model类,然后因模型类来分外成数据库暨相应的声明,那较相符数据库不存的新建项目。但是,从EF
6.1起始,Code
First也可以用来已在的数据库,并且可因现已是的数据库生成Model类。这一个主旨大家会以本书后面章节深刻教。

  上述URL告诉MVC
Web应用程序,一个客户端请求被发送给Home控制器的Index动作方法。该动作方法以HomeController.cs文件中定义,如下面代码所示。该动作方法就包含一行简单的代码return
View(),这行代码告诉Web站点要打开相呼应的视图文件,在是示例中,那些相应之视图文件是Views\Home\文件夹下之Index.cshtml。依据预定,ASP.NET
MVC控制器的动作方法的默认视图文件可以于“Views\控制器名\动作方法名.cshtml”路径下找到。当然,我们可以改那种约定,使得动作方法可以打开一个差之视图,我们以在本书后续章节讲述。包含Index动作方法的Controllers\HomeController.cs文件之始末如下所示:

1.3 Web开发的软件需要

  注意:是Web站点在运作时会采用Visual
Studio赋给的一个无限制端口。URL的一般格局呢http://localhost:port/Controller/Action/AdditionalParameters(注:此处译者将http://localhost:port/Controller/View/AdditionalParameters中的View修正为Action)。当这个站点启动时,我们看到在URL中并没有显示控制器名或者动作方法名,这是因为在这个示例中,默认调用了Home控制器中的Index动作(Action)方法,而在Index动作方法中返回的是一个名为Index的视图。

  于就无异于回中,我们用上怎样行使基架急忙搭建及周转一个大概的Microsoft
ASP.NET MVC
Web站点。在我们这投入学习及编码从前,我们率先了解部分有关ASP.NET
MVC和Entity Framework的背景音讯,然后重新详尽学习怎么着搭建开发条件。

Bootstrap 5

  于化解方案资源管理器中开展Controllers、Models和Views文件夹,如图1-3所著。在Models文件夹下开创的公文大家将以持续之身份验证中之所以到。在这同四遍中,我们用学HomeController类和她相关的视图。

Bootstrap 6

1.4.5 布局页的打算

  假若大家检查在方代码中之About方法和Contact方法,我们会师看在立时点儿只情势中还发生一行代码应用了ViewBag。

相关文章