个人中心
gpt4 book ai didi

javascript - 为什么 bootstrap 无法访问在单击 _Layout.cshtml 的选项卡上获得的 View ？

转载 作者：行者123 更新时间：2023-11-29 15:35:01 25 4
gpt4 key购买 nike

我正在使用 mvc-5 并使用 Bootstrap ，我所有的链接都在 _Layout.cshtml 中现在我有一个像这样的下拉选项卡 http://prntscr.com/76jfba (使用 Bootstrap ，它是在 VStudio 元素启动时获得的)现在在我的 _Layout.cshtml我有renderbody()呈现我所有的 UI。

我想做什么

单击“实时”选项卡时，我会得到一个下拉列表，进一步单击“表格”必须打开，将选项卡下方的当前 View 替换为新 View 。

我是如何尝试做到这一点的

(1) 在家庭 Controller 中我这样做:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace testLayt.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult tabularshared()
        {
            return View();
        }
    }
}

(2) 然后我创建 View 并在该 View 中添加这样的布局路径:

@{
    ViewBag.Title = "shekharTabularshared";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>tabularshared</h2>

因此，我拥有所有选项卡，但它们没有正确对齐。它现在显示这样的 View :http://prntscr.com/76jiag我觉得我在这里无法访问 Bootstrap 或者我做错了什么？

有人能给我指导吗tabular.cshtml在第一个链接中的选项卡正下方查看(此选项卡对于获得的所有 View 都是通用的)

编辑:_Layout.cshtml

 <!DOCTYPE html>
<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>
    <!--starts here-->   
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="bootstrap/js/jquery-ui.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script> <!--click on main tab disappers--> 


    <script src="~/Scripts/jquery-1.10.2.intellisense.js"></script>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/modernizr-2.6.2.js"></script>

    <!--ends here-->
</head>
<body>
    <div>
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container-fluid">
                    <div class="navbar navbar-custom navbar-fixed-top">
                        <div class="navbar-inner">
                            <div class="container-fluid">
                                <div class="navbar-header">
                                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                        <span class="sr-only">Toggle navigation</span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                    </button>
                                    <a class="navbar-brand" @Html.ActionLink("Vision Vertex", "Index", "Home") />
                                </div>

                                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                    <ul class="nav navbar-nav">
                                        <li class="dropdown">
                                            <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
                                                Real Time
                                                <i class="caret"></i>
                                            </a>
                                            <ul class="dropdown-menu">                                        
                                                <li>
                                                    <!--onclick="tabularFunction()" -->
                                                    @*<a tabindex="-1" href="~/Views/Home/BackgroundViews/tabular.cshtml">Tabular</a>*@
                                                    @Html.ActionLink("Tabular", "tabularshared", "Home")
                                                </li>                                                
                                            </ul>
                                        </li>        
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

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

</body>
</html>

Index.cshtml 是:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
    }

<h2>shekhar Index</h2>

此外，我注意到当我执行“检查元素”时单击“表格”时我没有 <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />令人惊讶的是，自从过去 3 天以来我一直被困在这里。有人可以帮助我吗？

这是我的完整元素，如果您能帮助我解决这个问题，我将不胜感激 https://www.dropbox.com/sh/autm3mkqfdu0aup/AADfAeUSlvcDt7PTX8G5Qz9La?dl=0

最佳答案

它对您如何呈现 UI 没有影响。

  1. 确保您的开发者控制台中没有错误(您可能会错误地为 Bootstrap 脚本配置你的包)。

  2. 只留下一个对 bootstrap CSS 的引用:

    href="~/Content/bootstrap.min.css"

  3. 在开发人员控制台中检查所有脚本和样式是否已实际加载到页面。

    如果没有问题但您的代码仍然无法正常工作 - 在浏览器中添加您网页的完整屏幕截图并在评论中告诉我。

您的 bootsrap CSS 链接中丢失了 '~' 符号。 

<script src="bootstrap/js/jquery-ui.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

关于javascript - 为什么 bootstrap 无法访问在单击 _Layout.cshtml 的选项卡上获得的 View ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30272176/

25 4 0
文章推荐： android - 可迭代的 .zip 问题 (rxJava)
文章推荐： android - 任务 ':app:mergeDebugResources' 执行失败 - AwesomeProject
文章推荐： android - Codepush 不适用于所有 Android 用户
文章推荐： javascript - 随机数生成器，将数字从小到大排序
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com