理解需求并实现数据库设计

在软件开发过程中,理解需求是至关重要的第一步。需求理解不仅仅是对项目目标的把握,更是对项目细节的深入挖掘。一旦需求明确,就可以将其分解为不同的对象,然后找出这些对象之间的关系。最后,就可以设计并实现数据库。令人高兴的是,之前的文章获得了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的另一个威力——它是响应式的。对于任何屏幕分辨率,它都会工作,或者对于任何屏幕尺寸。如果尝试在手机上访问页面,尝试调整浏览器窗口大小,看看它会自动调整所有的链接项。

最后,它变成了一个漂亮的菜单。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485