给我们的学生管理系统配置菜单导航信息

admin

2021-06-03

本文作者：梁桐铭- 微软最有价值专家(Microsoft MVP)
本文出自《从零开始学 ASP.NET Core与 EntityFramework Core》目录
视频课程效果更佳：跨平台开发实战掌握 ASP.NET Core与 EntityFramework Core

使用 Bootstrap 给项目添加导航菜单栏

在本章节中，我们将讨论使用 Bootstrap 4 在 ASP.NET Core应用程序中创建响应式导航菜单。在大屏幕设备上，导航菜单应如下所示。在小屏幕设备上，导航菜单应如下所示。 Bootstarp 4 依赖于 jQuery。

所以请在你的 ASP.NET Core应用程序中下载并安装 jQuery。您可以使用 Library 管理工具执行此操作。我们在之前的第 34 节中提到过。

_Layout.cshtml Code

<html>
  <head>
    <meta name="viewport" content="width=device-width" />

    <environment include="Development">
      <link href="~/lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" />
      <script src="~/lib/jquery/jquery.js"></script>
      <script src="~/lib/twitter-bootstrap/js/bootstrap.js"></script>
    </environment>

    <environment exclude="Development">
      <link
        rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous"
        asp-fallback-href="~/lib/twitter-bootstrap/css/bootstrap.min.css"
        asp-fallback-test-class="sr-only"
        asp-fallback-test-property="position"
        asp-fallback-test-value="absolute"
        asp-suppress-fallback-integrity="true"
      />
    </environment>

    <link href="~/css/site.css" rel="stylesheet" />
    <title>@ViewBag.Title</title>
  </head>
  <body>
    <div class="container">
      <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <a class="navbar-brand" asp-controller="home" asp-action="index">
          <img src="~/images/student.png" width="30" height="30" />
        </a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#collapsibleNavbar"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" asp-controller="home" asp-action="index"
                >列表</a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link" asp-controller="home" asp-action="create"
                >创建</a
              >
            </li>
          </ul>
        </div>
      </nav>
      @RenderBody()
    </div>

    @if (IsSectionDefined("Scripts")) {@RenderSection("Scripts", required:
    false)}
  </body>
</html>

在小屏幕设备上，要使导航栏切换按钮起作用，必须在 Bootstrap JavaScript 文件之前加载 jQuery。否则的话，你点击导航栏切换按钮，是不会作用的。

<environment include="Development">
    <link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet"/>
    <script src="~/lib/jquery/jquery.js"></script>
    <script src="~/lib/bootstrap/js/bootstrap.js"></script>
</environment>

请注意：对于非开发环境(即 Staging, Production 等环境)，我没有使用所需的<link>标记来从 CDN 加载所需的jQuery和Bootstrap JavaScript 文件。这里作为联系,你可以自己尝试学习使用，也可以通过参考源代码：https://github.com/yoyomooc/ASP.NET -core--for-beginner/来查看答案。

请注意，按钮(查看，编辑和删除)是相互连接在一起的，我们要在这些按钮之间包含边距，需使用 Bootstrap 提供的边距类(m-1，m-2 等)。在类名中，"m"代表边距，数字 1,2 等代表所需空间的大小。

在 index.chtml 修改<a>标签包含"m-1" :

<div class="card-footer text-center">
  <a
    asp-controller="home"
    asp-action="details"
    asp-route-id="@student.Id"
    class="btn btn-primary m-1"
    >查看</a
  >

  <a href="#" class="btn btn-primary m-1">编辑</a>
  <a href="#" class="btn btn-danger m-1">删除</a>
</div>