引导轮播在 URL 路由 ASP.NET 后不起作用答案

【问题标题】：Bootstrap carousel not working after URL routing ASP.NET引导轮播在 URL 路由 ASP.NET 后不起作用
【发布时间】：2014-08-05 17:33:21
【问题描述】：

我使用了 Twitter Bootstrap Carousel 滑块，它工作正常，但是在使用 Global.asax 文件进行 URL 路由之后，它在路由 URL 上时停止工作，但是......如果我去例如default.aspx，一个非路由的 URL，它工作正常。

我已经很明显地检查了文件路径和东西，并在路由后修复了它们，但仍然无法正常工作。

谁能告诉我这是怎么回事？

<div id="carousel-slider" class="carousel slide">
        <!-- class of slide for animation -->
        <div class="carousel-inner">
            <div class="item active">
                <!-- class of active since it's the first item -->
                <asp:Image ImageUrl="~/assets/img/slider1.jpg" AlternateText="Slider #1" runat="server" />
            </div>
            <div class="item">
                <asp:Image ImageUrl="~/assets/img/slider2.jpg" AlternateText="Slider #1" runat="server" />
            </div>
            <div class="item">
                <asp:Image ImageUrl="~/assets/img/slider3.jpg" AlternateText="Slider #1" runat="server" />
            </div>
            <div class="item">
                <asp:Image ImageUrl="~/assets/img/slider4.jpg" AlternateText="Slider #1" runat="server" />
            </div>
        </div>
        <!-- /.carousel-inner -->
        <!--  Next and Previous controls below
    href values must reference the id for this carousel -->
    </div>

    <script>
        $(document).ready(function () {
            $('.carousel').carousel({
                interval: 5000
            });
        });
    </script>

我也尝试过使用普通标签，但是使用 asp.net 标签可以让我 ~/ 并且总是回到根目录，这两种方法都不起作用，滑块根本没有“滑动”。

解决方案：

显然 Bootstrap.min.js 在路由 URL 页面上没有被正确加载，但在 default.aspx 上却是。我通过在原始路径前面使用 ../ 更改路径来解决此问题。

【问题讨论】：

请在此处提供您的代码。
好了。很抱歉。
服务器端的图片控件有必要<asp:Image而不是html控件<img吗？
这不是“必要的”，但我使用它是因为我总是确定它会回到根目录，而如果我使用 HTML img 我必须做../../，但它两种方法都不起作用，我尝试了两种方法，都不起作用

标签： asp.net twitter-bootstrap url routing slider

【解决方案1】：

尝试将图片url放入ResolveUrl方法并检查结果：此外，如果您不使用背后代码中的服务器控件，最好使用 HTML 控件，如下所示：

 <img src='<%: ResolveUrl("~/assets/img/slider1.jpg") %>' alt="" />

更新 1

您还应该在 div 标签中使用data-ride="carousel"，如下所示：

<div id="carousel-slider" class="carousel slide" data-ride="carousel">

并使用上面的 html 控件来显示图像。

【讨论】：

感谢您的回答，但不幸的是，这并不能解决问题，它仍然卡在第一张幻灯片图像上
不幸的是，仍然只能在 default.aspx 上工作，仍然不能在路由的 URL 上工作。
确保页面上的所有引导引用正确，检查是否需要右键单击浏览器并选择查看源代码以确保引导引用都正常工作
我有来自 Google CDN 的 jQuery、本地存储的 Modernizr、本地存储的 Bootstrap min.js，当然还有 Bootstrap CSS 和我自己的 CSS。问题是，当我转到 www.URLHERE.com/default.aspx 时，滑块的工作方式与它应该的方式一样，但是当我转到 www.URLHERE.com/forside/ 时 - 这是路由的 URL，它不会不行。
我设法修复它，显然它在路由 URL 上没有正确加载 Bootstrap min.js，但它在 default.aspx 上加载它就好了，谢谢你的帮助，不能没有你的帮助就修不好！

【解决方案2】：

显然 Bootstrap.min.js 在路由 URL 页面上没有被正确加载，但在 default.aspx 上却是。我通过在原始路径前面使用 ../ 更改路径来解决此问题。

【讨论】：