在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属性将它们与布局页面关联起来。
