ASP.NET MVC Web App 3层架构入门 – 第四部分

Mohd Manzoor Ahmed

4.87/5 (14投票s)

2015 年 7 月 13 日

CPOL

4分钟阅读

29069

在本文中，让我们尝试理解并实现母版页布局和Bootstrap。

引言

本文是第一部分、第二部分和第三部分的延续。

在第一篇文章中，我们专注于理解需求并将其分解为对象，然后找出它们之间的关系，最后设计和实现数据库。而且（好消息！），我们的第一篇文章赢得了2014年11月最佳文章奖。

在第二篇文章中，我们看到了如何创建一个解决方案，向其中添加多个项目，并向各自的项目添加所需的引用。所以，最后我们完成了我们的业务对象层。

在第三篇文章中，我们看到了如何实现我们的UI（用户界面）。在本文中，让我们尝试理解并实现母版页布局和bootstrap。

3：实现所有层（母版页布局和Bootstrap）

我们的下一个工作项或任务是添加bootstrap功能。

让我们观察一下我尝试添加View时的一个选项，即，它要求使用一个布局。

这意味着它正在为每个区域创建一个单独的布局。

Layout（在MVC中）只不过是MasterPage（在ASPX webforms中）的一种类型。它正在为每个区域创建单独的母版页，而且我不希望为每个区域都设置单独的布局。我想为所有区域设置一个通用的布局。让我们先观察一下。

如果您查看Shared文件夹 - > 布局，如图所示

这是您在Areas -> Admin -> Views -> Shared -> _layout.cshtml中的布局。

<!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中也一样

现在我想将布局推送到我在Area之外的Common视图文件夹中

在Views中添加一个新文件夹，并将其命名为"Shared"。

我将拖动其中一个布局并将其放置在Shared中。

在ViewStart中，我将删除"/Areas/User"，也就是说，它将使用您的公共Views文件夹的共享布局。

对所有区域（Admin，Common和Security）执行相同操作。所以现在每个视图都指向这个布局母版页。

我可以将我的应用程序名称命名为"LinkHub"。

@Html.ActionLink("LinkHub", "Index", "Home", 
    new { Area = "Common" }, new { @class = "navbar-brand" })

每当我单击LinkHub时，它都应将我带到上面提到的Index Home。

因此，我需要为Area传递另一个参数。每当我点击LinkHub时，它将带我到Common Area、Home Controller和Action Index。保存所有内容并执行，并浏览URL /Common/Home。如果我点击LinkHub，它将被重定向到同一页面。

众所周知，默认控制器是Home。现在，我们如何设置默认区域？我希望默认情况下将我重定向到Common Area的控制器Home。

这很简单。我需要编辑路由表并更改默认区域。

查找该区域并将其更改为Common。

  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 -> Home Controller。