如何链接到asp.net MVC中的其他页面

【问题标题】：How to link to other pages in asp.net MVC如何链接到asp.net MVC中的其他页面
【发布时间】：2020-12-28 14:00:42
【问题描述】：

如何使用 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>

【问题讨论】：

  • 点击链接后按F12，点击“Console”看看有没有报错
  • 嗨@Daniel Eriksson，按照sassygirl所说的更改代码后，您解决了问题吗？如果没有尝试使用F12开发者工具检查是否有错误。此外，你也可以在 OverView 动作方法中设置一个断点，然后调试你的代码检查这个动作方法是否被执行。
  • 嗨！ @ZhiLv 我按照 sassygirl 提到的那样做了。当我在 HOME/Overview 检查我的 URL 时。所以我想超链接没有什么问题了。但我得到的视图只是我的索引站点的“崩溃”版本。当我按 f12 进入开发人员工具时，我收到 7 条关于我无法加载 bootstrap json 等的错误消息。我正在为我的索引站点使用模板。我错过了什么？
  • 使用F12开发者工具check the request status in the Network panel时，Home/Overview请求状态是否为200？对于引导 CSS 或 JQuery 参考，问题可能与路径或路由有关，您是否更改过它们？可以分享布局页面或路由配置中的相关代码吗？此外，关于您的应用程序，我想与您确认它是否是 asp.net 核心 MVC 应用程序？您使用的是哪个版本？
  • 我按照你提到的网络面板做了，我有我的脚本和样式表 redmaket，它设置为 404 而不是 200。我没有更改它们，是的，我使用 MVC asp.net core 3.1 .我将在开始部分发布我的布局代码:) @Zhi Lv

标签： asp.net-core model-view-controller asp.net-core-mvc


【解决方案1】：

您为什么使用 IActionResult？ 试试：

public ActionResult Overview()
    {
        return View();
    }

在视图部分删除@RendorBody(), Layout = "~/Views/Home/Overview";

改用这个：

@{
    ViewData["Title"] = "Overview";
}

@{
    ViewBag.Title = "Overview";
    
}

<h1>Overview</h1>

【讨论】：

    【解决方案2】： 
    <!-- 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 文件夹中的结构，并从lib 文件夹中加载Jquery 和Boostrap。

    在我的示例中，我使用默认安装的库，并将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>

    结果如下：

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2011-11-03
      • 2016-12-12
      • 1970-01-01
      • 1970-01-01
      • 2014-10-03
      • 2015-02-05
      • 2023-03-22
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode