阅读量:4
在ASP.NET Razor中，页面布局可以通过使用Layout属性来实现。以下是一个简单的示例，展示了如何在Razor页面中使用布局。
-
首先，在
Views文件夹下创建一个名为Shared的文件夹。这是放置布局页面的默认位置。 -
在
Shared文件夹中，创建一个名为_Layout.cshtml的文件。这将是我们的布局页面。在这个文件中，我们将定义页面的基本结构和样式。
html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewBag.Titletitle>
<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 Applicationa>
<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="#">Featuresa>
li>
<li class="nav-item">
<a class="nav-link" href="#">Pricinga>
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 Pageh1>
<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 Pageh1>
<p>This is the content of the home page.p>
现在，当你运行应用程序时，你将看到一个包含导航栏和内容的页面。你可以根据需要创建更多的内容页面，并使用Layout属性将它们与布局页面关联起来。
以上就是关于“asp.netrazor怎样进行页面布局”的相关介绍，筋斗云是国内较早的云主机应用的服务商，拥有10余年行业经验，提供丰富的云服务器、租用服务器等相关产品服务。云服务器资源弹性伸缩，主机vCPU、内存性能强悍、超高I/O速度、故障秒级恢复；电子化备案，提交快速，专业团队7×24小时服务支持！
简单好用、高性价比云服务器租用链接：https://www.jindouyun.cn/product/cvm