Question

我正在使用mvc-5并使用bootstrap，我的所有链接都在_Layout.cshtml现在我有一个下拉标签，如http://prntscr.com/76jfba（使用bootstrap，它是在VStudio项目启动时获得的）现在在我的 _Layout.cshtml我有renderbody()呈现我的所有用户界面。

我想做什么

点击标签＆＃34;实时＆＃34;我得到一个下拉列表，进一步点击＆＃34; Tabular＆＃34;必须打开将选项卡正下方的当前视图替换为新视图。

我是如何尝试这样做的

（1）在家庭控制器中，我这样做：

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）然后我创建了视图，在该视图中我添加了如下布局路径：

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

<h2>tabularshared</h2>

因此，我有所有标签，但它们没有正确对齐。它现在显示如下视图：http://prntscr.com/76jiag 我觉得我在这里没有访问引导程序，或者我做错了什么？

有人可以提供指导，以便我可以在第一个链接的标签下方tabular.cshtml查看（此标签对所有获得的观点都是通用的）

编辑：_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>

此外，我注意到点击了＆＃34; Tabular＆＃34;当我做＆＃34;检查元素＆＃34;我没有<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />这令人惊讶，我从最后3天就被困在这里。有人可以帮助我吗？

这是我的完整项目，如果您能帮我解决这个问题，我非常感谢 https://www.dropbox.com/sh/autm3mkqfdu0aup/AADfAeUSlvcDt7PTX8G5Qz9La?dl=0

Answer 1

它对您呈现UI的方式没有任何影响。

确保您的开发者控制台中没有错误（您可能会错误地为引导脚本配置捆绑包。）。
只留下一个引导CSS的引用：

HREF =＆＃34;〜/内容/ bootstrap.min.css＆＃34;
在开发者控制台中检查所有脚本和样式是否实际加载到页面中。

如果没有错，但您的代码仍无效 - 请在浏览器中添加完整的网页截图，并在评论中告诉我。

您的bootsrap CSS链接中丢失了＆＃39;〜＆＃39; 符号。

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

为什么bootstrap无法访问在_Layout.cshtml上单击的选项卡上获取的视图？

1 个答案: