如何在 Blazor 中使用引导轮播答案

【问题标题】：How to use Bootstrap Carousel in Blazor如何在 Blazor 中使用引导轮播
【发布时间】：2019-10-24 01:50:35
【问题描述】：

Blazor 中的新手。需要尝试如何在 Blazor 中使用 BS carousel。

我在默认 Blazor 应用程序中使用了以下代码。但它不起作用。我需要做什么？

谢谢

我在 Index.html 中添加了这一行
在计数器页面中。我添加了以下内容：

<div class="carousel-inner">

  <div class="item active">
    <img src="la.jpg" alt="Los Angeles" style="width:100%;">
    <div class="carousel-caption">
      <h3>Los Angeles</h3>
      <p>LA is always so much fun!</p>
    </div>
  </div>

  <div class="item">
    <img src="chicago.jpg" alt="Chicago" style="width:100%;">
    <div class="carousel-caption">
      <h3>Chicago</h3>
      <p>Thank you, Chicago!</p>
    </div>
  </div>

  <div class="item">
    <img src="ny.jpg" alt="New York" style="width:100%;">
    <div class="carousel-caption">
      <h3>New York</h3>
      <p>We love the Big Apple!</p>
    </div>
  </div>

</div>


<a class="left carousel-control" href="#myCarousel" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
  <span class="sr-only">Next</span>
</a>

-- 更新：Index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>BlazorCarouselTest</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
    <script src="css/bootstrap/jquery-3.4.0.min.js" type="text/javascript"></script>
</head>
<body>
    <app>Loading...</app>

    <script src="_framework/blazor.webassembly.js"></script>
</body>
</html &gt;

【问题讨论】：

无错误消息。它垂直显示了所有 3 张图像。它假设逐个显示水平滚动图像。我已经下载了 jquery-3.4.0.js 并将其放在与 bootstrap 相同的文件夹中。
您的 Blazor 项目是否包含轮播所需的所有 JS？请参阅引导快速入门页面 - 特别是 JS 部分。也许向我们展示您的 index.html 的 head 部分？
请看更新

标签： c# blazor

【解决方案1】：

Carousel 需要一些 javascript 代码，需要在页面加载时进行配置，但是，进入 blazor 页面，没有人调用组件的初始化。好消息是您可以通过代码来实现。

三个简单的步骤：

1.- 创建并包含javascript on blazor（您可以将此代码复制粘贴到您的index.html 页面底部）

<script>
window.initializeCarousel = () =>
{
    $('#carouselExampleIndicators').carousel({interval: 2000});

    //see step 2 to understand these news id's:
    $('#carouselExampleIndicators-prev').click ( 
            () => $('#carouselExampleIndicators').carousel('prev') );
    $('#carouselExampleIndicators-next').click ( 
            () => $('#carouselExampleIndicators').carousel('next') );

}
</script>

2.- 稍微更改轮播的html（从carousel-control-prev div 中删除href。为上一个和下一个控件添加一个id）：

<div id="carouselExampleIndicators" 
     class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item  active">
      <img class="d-block w-50" src="..." alt="Pepa Pig">
    </div>
    <div class="carousel-item">
      <img class="d-block w-50" src="..." alt="Sponge Bob">
    </div>
  </div>
  <a id="carouselExampleIndicators-prev" 
     class="carousel-control-prev" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a id="carouselExampleIndicators-next" 
     class="carousel-control-next" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

3.- 首次渲染后调用之前的代码：

@page "/counter"
@inject IJSRuntime JsRuntime;
...

@functions {
    int currentCount = 0;
    bool firstRender = true; 
    ...
    protected async override Task OnAfterRenderAsync()
    {
      if (firstRender) 
      {
        await JsRuntime.InvokeAsync<object>("initializeCarousel");
        firstRender=false;
      }
    }

就是这样：

如果您的轮播现在正在移动，请告诉我们！

已编辑

记得在 index.html 上包含运行引导轮播所需的所有 js：

<body>
    <app>Loading...</app>

    <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" 
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 
    crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 
    crossorigin="anonymous"></script>    
    <script src="_framework/blazor.webassembly.js"></script>

    <script>
    window.initializeCarousel = () =>
    {
        $('#carouselExampleIndicators').carousel({interval: 2000})
        $('#carouselExampleIndicators-prev').click ( 
            () => $('#carouselExampleIndicators').carousel('prev') );
        $('#carouselExampleIndicators-next').click ( 
            () => $('#carouselExampleIndicators').carousel('next') );
    }
    </script>
</body>

【讨论】：

想知道桌面或手机是否处于离线模式，如果没有下载引导程序或Jquery会导致问题吗？需要为bootstrap和jquery创建js文件吗？谢谢
也想知道如何在 VS2019 的 MObile Emulator 中运行 Blazor 应用程序。非常感谢您的帮助。
嗨@MilkBottle，感谢您的cmets。我想我用我的回答回答了你的问题。如果您同意，只需检查答案作为解决方案。更多问题，只需在本网站上写新帖子（问题）即可。问候
奇迹般地成功了！但是 javascript 覆盖功能对我来说有点不同：@functions { protected async override Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await JsRuntime.InvokeAsync<object>("initializeCarousel"); firstRender = false; } } }
@daniherrera 感谢您的启发。现在我得到了免费的 JavaScript 解决方案，我已将我的解决方案发布在 stackoverflow.com/a/67172349/9203434

【解决方案2】：

我可以在没有 javascript 的情况下在 blazor 中自动滚动轮播。我还让 prev 和 next 按钮工作，当用户单击 prev 或 next 时，它会进入手动模式并自动停止滚动。你可以在https://stackoverflow.com/a/67172349/9203434查看我的解决方案

【讨论】：