asp.netrazor怎样进行页面布局 - 问答

在ASP.NET Razor中，页面布局可以通过使用Layout属性来实现。以下是一个简单的示例，展示了如何在Razor页面中使用布局。

首先，在Views文件夹下创建一个名为Shared的文件夹。这是放置布局页面的默认位置。
在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</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">My Application</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Pricing</a>
                    </li>
                </ul>
            </div>
        </nav>
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

在Views文件夹中，创建一个名为Home的文件夹。这是放置我们的内容页面的位置。
在Home文件夹中，创建一个名为Index.cshtml的文件。这将是我们的内容页面。在这个文件中，我们将使用Layout属性来指定我们想要使用的布局。

@{
    ViewBag.Title = "Home Page";
}

<h1>Welcome to the Home Page</h1>

<p>This is the content of the home page.</p>

在Index.cshtml文件中，添加Layout属性并将其值设置为_Layout。这将告诉Razor使用我们在第2步中创建的布局页面。

@{
    ViewBag.Title = "Home Page";
    Layout = "_Layout";
}

<h1>Welcome to the Home Page</h1>

<p>This is the content of the home page.</p>

现在，当你运行应用程序时，你将看到一个包含导航栏和内容的页面。你可以根据需要创建更多的内容页面，并使用Layout属性将它们与布局页面关联起来。

0 赞

0 踩