html - 带有 Bootstrap 4 的 ASP.NET MVC

转载作者：行者123 更新时间：2023-12-05 07:34:51

26

4

您好，目前我正在尝试使用 Bootstrap 4 实现一个 ASP.NET 网络应用程序。但是，由于目前 ASP.NET 支持 Bootstrap 3，因此只有模板被设计为适合 Bootstrap 3。然后在升级时，所有代码逻辑都已更改他们还引入了一个新的

标签来设计导航栏的样式。最初我已经整理了大部分这些东西。但我需要澄清以下内容。

我正在尝试分别实现 _Layout.cshtml 和 _LoginPartial.cshtml。但是，当代码运行时，尽管我将

类作为“nav-item”，但它不会在导航栏中添加对齐或着色效果。我正在添加我的代码，以便您更好地理解它，如下所示

我需要做的是将我的普通导航链接放在左侧，将登录和注册部分放在导航栏的右侧。

_LoginPartial.cshtml

    @using Microsoft.AspNet.Identity
@if (Request.IsAuthenticated)
{
   using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "inline" }))
   {
   @Html.AntiForgeryToken()

   <ul class="navbar-nav">
       <li class="nav-item">
           @Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })
       </li>
       <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
   </ul>
   }
}
else
{
   <ul class="navbar-nav ">
       <li class="nav-item">@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
       <li class="nav-item">@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
   </ul>
}

_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>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
        <nav class="navbar navbar-expand-lg navbar-dark fixed-top navbar-fixed-top mb-4" style="background-color:#1a75ff">

            <a class="navbar-brand" href="#">*******</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="navbarNavDropDown">
                <ul class="navbar-nav">
                    <li class="nav-item">@Html.ActionLink("Home", "Index", "Home", new { }, new { @class="nav-link" })</li>

                @Html.Partial("_LoginPartial")

            </div>
        </nav>

        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p>&copy; @DateTime.Now.Year </p>
            </footer>
        </div>

        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
</body>
</html>

谢谢! :)

最佳答案

_Layout.html

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>

<body class="pt-0">
<div class="navbar navbar-expand-lg navbar-dark bg-dark">


        @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })

    <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">
            <li class="nav-item active">
                <a>@Html.ActionLink("Home", "Index", "Home", new { @class = "nav-link"})</a>

            </li>
            <li class="nav-item">
                <a>@Html.ActionLink("About", "About", "Home", new { @class = "nav-link" })</a>

            </li>
            <li class="nav-item">
                <a>@Html.ActionLink("Contact", "Contact", "Home", new { @class = "nav-link" })</a>

            </li>

        </ul>
        @Html.Partial("_LoginPartial")
    </div>
</div>
<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>

_LoginPartial.html

@using Microsoft.AspNet.Identity
@if (Request.IsAuthenticated)
{
  using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", 
  @class = "ml-auto" }))
 {
    @Html.AntiForgeryToken()

    <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            @Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", 
"Manage", routeValues: null, htmlAttributes: new { title = "Manage", @class = "nav- 
link active" })
        </li>
        <li class="nav-item"><a 
           href="javascript:document.getElementById('logoutForm').submit()" 
           class="nav-link">Log off</a>
</li>
    </ul>
    }
}

_Layout.html 文件中无序列表的结束标记丢失

确保为导航栏的正确 css 类添加所有必要的更改，

可以找到 Bootstrap 类 here

关于html - 带有 Bootstrap 4 的 ASP.NET MVC，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49882924/

26

4

0

文章推荐： python - 使用请求将 CURL 命令转换为 Python

文章推荐： raspberry-pi3 - DS18b20网线接线

文章推荐： apache-spark - Spark 到 worker 的独立连接驱动程序

文章推荐： java - Binance Api 签名端点上的 Http Response 400

asp.net-mvc - 将数据对象临时保存在 MVC Controller 、MVC、MVC Controller 临时存储中
我有一个我想暂时存储的对象。该对象现在在 Controller 中， Controller 将生成一个 View 。 AJAX 请求从 View 发送到下一个 Controller 。那一刻我需要先前
asp.net-mvc-3 - MVC 2/MVC 3/MVC 4中的嵌套区域
从MVC 2开始，我们可以轻松创建区域。现在，我的问题与嵌套区域(区域内部的区域)有关。选择我的“father”区域文件夹，右键单击> Add> NO选项以获取new Area。是否有可能以其他方
asp.net-mvc - MVC 5 或 MVC 6 适合 MVC 初学者
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
asp.net-mvc - 哪些企业站点正在使用 ASP.NET MVC/MVC 2？需要管理转向 MVC 的理由
我已经尝试了一些谷歌搜索和堆栈流搜索，但事实证明这比我想象的要难找到。我需要为我们的商店迁移到 ASP.NET MVC 2 的管理提供理由。最大的帮助将是任何企业级站点或使用 ASP.NET MVC
spring-mvc - 请求 MVC 和组件 MVC 之间的区别
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 6 年前。 Improv
asp.net-mvc - 在多个 MVC 应用程序中重用一个 MVC 区域？
我有一些常见的网页，它们将出现在多个 MVC 应用程序中。对于这些页面，我想在不同的 MVC 网站之间重用相同的源代码( Controller + View )。这样做的最佳方法是什么？ ASP.NE
spring-mvc - 如何使用 in spring mvc
我正在使用 Spring MVC 来构建我的应用程序。当用户在浏览器中运行应用程序时，我想显示一个默认的 jsp。我不想用 web.xml 中的标记。我想我可以用我已经创建了一个文件夹并添
asp.net-mvc - ASP.NET MVC - MVC 职责
我可能在这里分析过度了，但是根据我对 MVC 的阅读，似乎有很多关于如何做事情的观点。是否有一个“最佳实践”网站或文档来定义 MVC 各个部分的职责？请记住，我使用 EF/Repository&U
asp.net-mvc - Thunderdome MVC - 为什么在 MVC 中使用一个模型？
当杰里米和查德 posted about their FubuMvc project ，他们提到的差异化因素之一是他们的“雷霆穹顶校长”: The “Thunderdome Principle” –
spring-mvc - Spring MVC : using wildcards in
我正在为 Spring MVC 应用程序实现缓存清除系统。为了让这个系统正常工作，我必须从给定的 url 中删除“缓存破坏代码”。假设我生成的缓存破坏代码是“123”，我有一个 .css url:/
asp.net-mvc - MVC 中的 MVC-ControllerTypeCache.xml
在调试 ASP.NET MVC 源时，我发现使用了“MVC-ControllerTypeCache.xml” 文件。但我无法理解这个文件的用途。我的意思是这个文件存储在哪里？asp.net MVc 如
asp.net-mvc - MVC 3 引用自动更新到 MVC 4
我刚刚在我的本地机器上安装了 Visual Studio 11 和 MVC 4 beta。但是，每当我打开一个 MVC 3 项目(我想保留为 MVC 3)时，所有引用都已更新为版本 4 DLL。当然它
asp.net-mvc - 如何将 MVC 项目分成几个较小的 MVC 项目
我有一个 MVC 3 应用程序，它具有一些核心功能(最重要的是自动化)，但主要用作不同区域或模块的门户。我想将它组织到不同的模块中，只需稍作更改也可以部署为他们自己的网站。该项目由论坛、博客引擎、用
asp.net-mvc-4 - 对于 MVC 4，Microsoft.AspNet.Mvc 和 System.Web.Mvc 有什么区别？
我有自己的服务器，正在考虑将我的一个解决方案升级到 ASP.NET MVC 4，然后再升级其余的 (3+)。作为其中的一部分，我下载了 the standalone installer对于 ASP.
asp.net-mvc - 如何将 TypeScript 构建为独立于 MVC 项目并依赖于 MVC 项目的项目，并将生成的 JavaScript 复制到 MVC 项目中？
构图我有一个 MVC 项目，其中包含 C# 类，这些类最终通过 ajax 等进行序列化和使用。我使用 TypeLite 生成这些 C# 类的定义( here 讨论了 TypeLite 的替代方案)，
asp.net-mvc - Angular JS 中的 MVC 和 ASP.NET 或 Spring MVC 中的 MVC 有什么区别？
我正在尝试了解现代 Web 应用程序架构。在 ASP.NET MVC 中，所有业务逻辑类都在 Model 中，Controller 接受并引导用户请求。如果我使用它，是否可以使用本身是 MVC 架构但
asp.net-mvc - WebAPI + MVC + Owin : MVC routes don't work
我有一个带有 OWIN 的 WebAPI 2 应用程序。现在我正在尝试向所有内容添加一个 MVC 5 Controller ，但没有找到我的 MVC 路由。我收到以下错误: No HTTP resou
asp.net-mvc - MVC 3 依赖解析器还是 Ninject MVC 插件？
在 MVC 3 中，他们添加了我一直在使用的依赖解析器。在回答某人对您发表评论的问题时，您应该使用 Ninject MVC 3 插件。所以我的问题是为什么要使用它而不是内置的？如果这是要走的路，你如
asp.net-mvc - Elmah.MVC 与 Elmah.contrib.Mvc
我是 ASP.NET MVC 的新手，我正在寻找最不痛苦的方法来设置全局错误处理、日志记录和报告(通过电子邮件)。仅供引用，我的 ASP.NET MVC 应用程序在 Azure 中作为 Web 角色托
asp.net-mvc - MVC View 页面和 MVC View 内容页面之间的区别
何时使用 MVC View 页面和 MVC View 内容页面？它们有什么区别？最佳答案 **MVC View Page 用于创建页面，MVC VewP Content Page 用于创建页面并指定

首页

博学

6Ren·AI

商城

html - 带有 Bootstrap 4 的 ASP.NET MVC

_Layout.html

_LoginPartial.html