在软件开发过程中,理解需求是至关重要的第一步。需求理解不仅仅是对项目目标的把握,更是对项目细节的深入挖掘。一旦需求明确,就可以将其分解为不同的对象,然后找出这些对象之间的关系。最后,就可以设计并实现数据库。令人高兴的是,之前的文章获得了2014年11月最佳文章奖。
在第二篇文章中,探讨了如何创建解决方案,向其中添加多个项目,并为各自的项目添加所需的引用。至此,已经完成了业务对象层的构建。
在第三篇文章中,学习了如何实现用户界面(UI)。本文将尝试理解并实现主布局和Bootstrap。
下一个任务是添加Bootstrap特性。当尝试添加视图时,有一个选项引起了注意,即它询问是否使用布局。这意味着它为每个区域创建了一个单独的布局。在MVC中,布局实际上就是ASPX Web表单中的MasterPage。并不希望为每个区域创建单独的布局,而是希望所有区域都使用一个通用的布局。让首先观察这一点。
如果查看共享文件夹中的布局,如所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css"/>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr/>
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>
它被设置在每个区域的ViewStart中。同样,在Common中,如果观察,会有完全相同的布局,并且它在ViewStart中设置。同样的方式,如果查看Security,会有相同的布局,并在ViewStart中设置。User也是如此。
现在,想将布局推送到Common视图文件夹中,已经在区域之外有了这个文件夹:在视图中添加一个新文件夹并命名为"Shared"。将拖动一个布局并将其放置在Shared中。在ViewStart中,将只移除"/Areas/User",即它将使用公共视图文件夹中的共享布局。同样的方式对所有区域(Admin、Common和Security)进行操作。现在每个视图都指向这个布局MasterPage。
可以将应用程序名称命名为"LinkHub"。
@Html.ActionLink("LinkHub", "Index", "Home", new { Area = "Common" }, new { @class = "navbar-brand" })
每当点击LinkHub时,它应该将带到上面提到的Index Home。所以需要传递一个额外的参数给Area。每当点击LinkHub时,它将带去Common区域和HomeController以及Action Index。保存所有并执行并浏览URL /Common/Home。如果点击LinkHub,它将重定向到同一页面。
众所周知,默认控制器是Home。现在,如何设置默认区域?希望默认重定向到Common区域的HomeController Home。这非常简单。需要编辑路由表并更改默认区域。
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
(RouteTable.Routes[routes.Count - 1] as Route).DataTokens["area"] = "Common";
}
}
保存并执行。默认情况下,它应该重定向到Common -> HomeController。
这就是如何设置默认区域。现在让切换到布局。想要链接到所有控制器索引或所有链接。注意有一个div标签,其中有一个无序列表,在这里添加列表项。
例如,Home指向Common区域的HomeController。
添加了所有的链接:
现在,让执行这个。得到了应用程序名称Home、Category、ListCategory。提交URL:在之前的文章中创建了这个表单。
已经链接了所有的页面,但是UI呢?它看起来不太好。这就是Bootstrap的威力。只需要右键单击LinkHubUI项目中的解决方案,并说管理NuGet包。
需要在线查找,所以它需要互联网连接搜索Bootstrap。然后会为MVC 5.1选择Bootstrap并安装。它将安装Bootstrap。阅读并接受协议,然后说关闭。
现在如果执行,应该看到魔法。它应该变成一个漂亮的UI。
对于Submit URL,应该看到一个带有良好下拉菜单的惊人表单。
现在,将向展示Bootstrap的另一个威力——它是响应式的。对于任何屏幕分辨率,它都会工作,或者对于任何屏幕尺寸。如果尝试在手机上访问页面,尝试调整浏览器窗口大小,看看它会自动调整所有的链接项。
最后,它变成了一个漂亮的菜单。