mvc 5 使用不同的布局 (1)

📌 相关文章

📜 mvc 5 使用不同的布局 (1)

📅 最后修改于: 2023-12-03 15:03:04.131000 🧑 作者: Mango

MVC 5 使用不同的布局

在MVC 5中，可以使用不同的布局文件来为不同的页面呈现不同的外观和风格。在本文中，我们将介绍如何在MVC 5中使用不同的布局。

创建布局文件

在MVC 5中创建布局文件非常简单。我们只需要在Views/Shared文件夹中创建一个新的.cshtml文件，并将其命名为我们想要使用的布局名称。

例如，我们可以创建一个名为 "Layout1.cshtml" 的文件，其中包含以下代码片段：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

这个布局定义了一个标准的 HTML5 文件，并加载了我们的CSS和JavaScript文件（分别由@Styles.Render和@Scripts.Render语句加载）。

使用布局文件

一旦我们创建了一个布局文件，我们可以在我们的MVC应用程序中使用它。在每个需要使用这个布局文件的视图中添加以下代码：

@{
    Layout = "~/Views/Shared/Layout1.cshtml";
}

这会将我们的View的布局设置为我们刚刚创建的布局文件。我们可以在不同的View中使用不同的布局文件，以便为应用程序中的不同部分提供不同的样式和设计。

区域布局

另一个有用的功能是区域的布局。使用区域布局，我们可以为不同的控制器/操作设置不同的布局。

对于此，我们需要在Views/Shared文件夹中创建一个名为"_ViewStart.cshtml"的新文件（如果该文件不存在）。在这个文件中，我们可以设置默认的布局文件：

@{
    if (Request.Url.LocalPath.StartsWith("/Admin"))
    {
        Layout = "~/Views/Shared/AdminLayout.cshtml";
    }
    else
    {
        Layout = "~/Views/Shared/Layout1.cshtml";
    }
}

在这个示例中，如果URL以“/Admin”开头，我们将应用“AdminLayout.cshtml”布局文件。否则，我们将使用我们之前创建的“Layout1.cshtml”布局文件。

结论

在MVC 5中使用不同的布局是一个很方便的功能，使我们可以轻松地为不同的页面提供不同的外观和风格。我们可以创建任意数量的布局文件，以便满足我们的应用程序的设计和风格要求。