asp.net-core - 如何链接到asp.net MVC中的其他页面
问题描述
如何使用 asp.net MVC 链接到另一个页面？我想通过我的主页（索引页）链接到一个名为概述的页面。我用我的 HomeController 做了一个视图功能。当我单击“转到查看”时，我的概览页面会显示出来。但我的超链接仍然无法在我的索引页面上使用。有人有想法吗？谢谢！
这是我的控制器
public IActionResult Overview()
{
return View();
}
这是我的超链接
<a href="@Url.Action("Overview", "Home")" class="list-group-item list-group-item-action bg-light">Overview</a>
这是我要显示的概览页面
@{
ViewData["Title"] = "Overview";
}
@{
ViewBag.Title = "Overview";
Layout = "~/Views/Home/Overview";
}
<h1>Overview</h1>
@RenderBody()
我的布局页面的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>BugTracker</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<!--FontAwsome Link-->
<link href="~/lib/font-awesome/css/all.css" rel="stylesheet" />
</head>
<body>
@RenderBody()
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading"><h2>Hello<i class="fas fa-bug"></h2></i></div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action bg-light">Dashboard</a>
<a href="@Url.Action("Overview", "Home")" class="list-group-item list-group-item-action bg-light">Overview</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Profile</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Projects</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Tickets</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Status</a>
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<button class="btn btn-primary" id="menu-toggle"><i class="fas fa-align-justify"></i></button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fas fa-home"></i> <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-user"></i></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-chevron-circle-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Projects</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Tickets</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Overview</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<h1 class="mt-4">Welcome User <i class="fas fa-bug"></i></h1>
<p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>. The top navbar is optional, and just for demonstration. Just create an element with the <code>#menu-toggle</code> ID which will toggle the menu when clicked.</p>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Bootstrap core JavaScript -->
<script src="./vendor/jquery/jquery.min.js"></script>
<script src="./vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
解决方案
<!-- Bootstrap core CSS --> <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="css/simple-sidebar.css" rel="stylesheet"> <!--FontAwsome Link--> <link href="~/lib/font-awesome/css/all.css" rel="stylesheet" /> <script src="./vendor/jquery/jquery.min.js"></script> <script src="./vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
关于静态文件404错误，我认为问题与文件路径有关。
我在我这边创建了一个新的 Asp.net core 3.1 应用程序，并尝试使用您的代码创建一个新的布局页面，通常客户端库（例如 JQuery 和 Bootstrap）安装在如下lib文件夹中，但是在您的代码中，您想从vender文件夹中加载 js 和 css 文件，
因此，如果我使用您的代码，相关的 JS 和 CSS 文件将显示 404 错误。尝试检查文件夹中的结构wwwroot，并从文件夹中加载 Jquery 和 Boostrap lib。
在我的示例中，我使用默认安装的库，并将其安装font-awesome在lib文件夹中，因此，我的自定义布局如下：
_CustomLayout.cshtml：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>BugTracker</title>
<!-- Bootstrap core CSS -->
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="~/css/simple-sidebar.css" rel="stylesheet">
<!--FontAwsome Link-->
<link href="~/lib/font-awesome/css/all.css" rel="stylesheet" />
</head>
<body>
@RenderBody()
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading"><h2>Hello<i class="fas fa-bug"></h2></i></div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action bg-light">Dashboard</a>
<a href="@Url.Action("Overview", "Home")" class="list-group-item list-group-item-action bg-light">Overview</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Profile</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Projects</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Tickets</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Status</a>
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<button class="btn btn-primary" id="menu-toggle"><i class="fas fa-align-justify"></i></button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fas fa-home"></i> <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-user"></i></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-chevron-circle-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Projects</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Tickets</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Overview</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<h1 class="mt-4">Welcome User <i class="fas fa-bug"></i></h1>
<p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>. The top navbar is optional, and just for demonstration. Just create an element with the <code>#menu-toggle</code> ID which will toggle the menu when clicked.</p>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Bootstrap core JavaScript -->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
Home控制器中的代码：
public IActionResult About()
{
return View();
}
public IActionResult OverView()
{
return View();
}
public IActionResult Privacy()
{
return View();
}
About.cshtml 页面中的代码（使用默认布局页面）：
@{
ViewData["Title"] = "About";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>About</h1>
<a href="@Url.Action("Overview", "Home")" class="list-group-item list-group-item-action bg-light">Overview</a>
OverView.cshtml 页面中的代码：
@{
ViewData["Title"] = "OverView";
Layout = "~/Views/Shared/_CustomLayout.cshtml";
}
<h1>OverView</h1>
结果是这样的：
推荐阅读
- micropython - 如何在电机和传感器之间获得即时响应？
- javascript - 在 Next.js 中获取非 API 数据的最佳实践是什么（通过 Vercel 部署）
- google-sheets - 谷歌表格。是否可以给一个词一个值？
- python-3.x - 如何在django中指定http请求的类型
- css - 将 css 线性渐变转换为 react-native-linear-gradient
- node.js - Aws ecs 任务 IP 地址在 nodejs 一段时间后停止工作
- javascript - Storybook 在preview-head.html 中的所有链接和脚本的http: 之后添加一个句点，如何删除它
- python - 如何在虚拟环境中调用python函数？
- swiftui - 如何从分页的 ScrollView (TabView) 添加/删除视图
- javascript - TypeScript 中的 ParallelJs，其中输入和输出数据属于不同类型