引导轮播不适用于 asp.net MVC答案

【问题标题】：Bootstrap Carousel not working with asp.net MVC引导轮播不适用于 asp.net MVC
【发布时间】：2014-08-01 07:58:08
【问题描述】：

我对 asp.net MVC 和 Bootstrap 还很陌生。我正在尝试让轮播在我的主页上运行。轮播显示在页面上，并且我选择作为活动图像的图像也显示，但是当我单击指示器或上一个和下一个箭头时，没有任何反应。我已经检查了 css 和 js 文件是否在正确的文件夹中，并且它们正在页面上呈现，所以任何帮助都会很棒。

这是我的主要 _layout.cshtml

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />        
        <style>
            body { padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ }
            .aligntobottom { bottom:0; position:absolute; }
        </style>
    @Scripts.Render("~/bundles/modernizr")
    @Styles.Render("~/Content/Bootstrap")
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <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" href="@Url.Action("Index", "Home")">Your Logo Here</a>
          </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
            @Html.Partial("_LoginPartial")
          </div><!--/.nav-collapse -->          
        </div>
      </div>
    <div class="container">

        @if(IsSectionDefined("featured")){
        <div class="jumbotron">
            @RenderSection("featured", required: false)
        </div>
        }
        @RenderBody()
    </div>
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/Scripts/Bootstrap")
        @RenderSection("scripts", required: false)
    </body>
</html>

我的主索引页面看起来像这样

@{
    ViewBag.Title = "Home Page";
}
<div id="mySlider" class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="#mySlider" data-slide-to="0" class="active"></li>
            <li data-target="#mySlider" data-slide-to="1"></li>
            <li data-target="#mySlider" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img alt="First slide" src="~/Images/myImg1.jpg" />
            </div>
            <div class="item">
                <img alt="Second slide" src="~/Images/myImg2.jpg" />
            </div>
            <div class="item">
                <img alt="second slide" src="~/Images/myImg3.jpg" />
            </div>
        </div>
            <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>

我的包配置看起来像这样

using System.Web;
using System.Web.Optimization;

namespace mmInteriors
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/Script/Bootstrap").Include(
                "~/Scripts/Bootstrap.js"));

            bundles.Add(new StyleBundle("~/Content/Bootstrap").Include(
                "~/Content/bootstrap.css"));
        }
    }
}

我可能遗漏了一些简单的东西，但就像很多东西一样，有时简单的东西最难发现，所以提前感谢。

【问题讨论】：

标签： jquery asp.net-mvc css twitter-bootstrap carousel

【解决方案1】：

你的左右Carousel Control的HREF是#myCarousel，但是你的carousel的ID是myslider

用这个改变：

<a class="left carousel-control" href="#mySlider" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#mySlider" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

【讨论】：

我已经改变了这个但仍然是同样的问题:(