blazor - 如何在 Blazor 中使用 Bootstrap Carousel-6ren

blazor - 如何在 Blazor 中使用 Bootstrap Carousel

转载作者：行者123 更新时间：2023-12-03 14:39:51

25

4

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;

最佳答案

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(从 href div 中删除 carousel-control-prev。为上一个和下一个控件添加一个 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 上包含运行 bootstrap carousel 所需的所有 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>

关于blazor - 如何在 Blazor 中使用 Bootstrap Carousel，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56513221/

25

4

0

文章推荐： perl - Perl 程序可以知道 __DATA__ 开始的行号吗？

文章推荐： android-studio - 在Mac上的Android Studio上禁用键盘

文章推荐： haskell - "a monad is a model of computation"是什么意思

blazor - Blazor 中的缓存破坏
Blazor 中的缓存破坏有什么解决方案吗？我在 Blazor WebAssembly 中转换了我的 asp.net 核心应用程序，我在 razor 页面中使用 asp-append-version=
blazor - Blazor 中是否有导航堆栈？
使用 NavigationManager.NavigateTo() 在页面之间移动非常简单，但我想知道是否有一种导航到页面的方法，这样我就可以在不丢失状态的情况下导航回去第一页。我正在寻找类似 Na
blazor - 基本组件布局继承 blazor
假设我的大部分组件都有一个标题。我想创建一个具有 header 变量的基本组件，并使所有其他组件从该组件继承并设置 header 。所以我有基础组件 @inherits LayoutComponen
blazor - Blazor 中的片段是什么？
引用https://learn.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#razor-template
blazor - Blazor 中的片段是什么？
引用https://learn.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#razor-template
blazor - Blazor 中的不同方法调用
我现在正在试验 Blazor 一段时间，我正试图找到关于两者之间差异的解释 Something 和 methodCall()">Something 为什么 @ expected before onc
blazor - 仅允许特定文件类型在 blazor 中上传
我正在使用 BlazorInputFile 包在 Blazor 中上传文件。问题此代码无效。如何限制用户只能在 Blazor 中上传 jpeg 或 png？如果需要更多的东西来支持这个问题，请
blazor - 是否有一些方法可以在不使用 Blazor 中的地址栏的情况下导航到页面并传递参数？
这存在于许多现代 SPA 库/框架中...... 我将提供一个使用 React 的示例(但它可以是 Angular 或 Vue)，您可以执行类似... this.props.router.push({
blazor - 如何在 Blazor 服务器端模拟延迟？
我有一个 Blazor 服务器端应用程序，我将托管在离我的主要用户将使用的地方不远的服务器上，我想模拟某些功能是否可用但有一些延迟，或者延迟是否会真正影响它。但我无法在开发时测试延迟，而且我不想每次
blazor - 如何将 Blazor 组件移动到不同的程序集
我有一个 Blazor 服务器项目，我想将一些共享组件移动到不同的程序集中，看看它是否会在编译时间上产生差异(让我知道这是否可行的奖励......) ，但这并不是那么顺利。在 VS2019 中，组件
blazor - 具有自定义子组件的自定义 Blazor 组件
我最近开始使用 Blazor，发现它是一项非常有前途的技术。我正准备制作自定义嵌套 Blazor 组件，但我似乎没有让它按我想要的方式工作。目标是拥有一个具有“ContentHeader”和“Co
blazor - Mapster 和 Blazor
我想在我的 Blazor 项目中插入和使用 Mapster。我找不到关于如何注册映射并将它们注入(inject)我的应用程序的不同层的好引用。有人知道我该如何实现吗？谢谢最佳答案原来很简单。
blazor - PostSharp 和 Blazor
我正在考虑在 Blazor 服务器项目上使用 PostSharp，想知道此 Postsharp 博客 (https://blog.postsharp.net/post/blazor-support-6
blazor - Blazor RenderTreeBuilder 中的事件
我在使用 RenderTreeBuilder 的 Blazor 组件上使用事件绑定(bind)时遇到问题。我了解如何使用编写 HTML 并将事件附加到组件的直接方法来触发事件。但是，我现在需要使用 R
blazor - 如何在 Blazor 中切换主布局？
当用户按下包含登录的左上链接的登录链接时，我试图将其存档: 但相反，我收到了这个: 换句话说:我想转到一个没有主布局导航栏的页面。如何存档？ MainLayout.razor inherits Lay
blazor - MAUI blazor 发生未处理的错误
如果程序中有错误，我会收到“发生未处理的错误”。使用 Blazor Web 程序集，我可以在浏览器中打开开发者工具以获取所发生事件的详细信息。这在 Blazor MAUI 中是不可能的。那么如何在
blazor - 属性如何导致 Blazor 中的页面更新？
我刚刚在 Blazor WebAssembly 中完成了我的第一个重要测试应用程序。 Blazor 是令人印象深刻的东西，但我发现很难推断属性更改如何导致 DOM 更新 - 例如，在 Razor 组件
blazor - 示例应用程序在代码更改和浏览器刷新后未更新？构建挂起 Blazor
很高兴了解 Blazor。这个框架有很多潜力! VS 2017 build 15.8.9 和 Blazor v 15.5.9 的 VS 扩展好的，所以在使用 asp.net 核心(托管)模板开始新项目
blazor - 如何在 Blazor 中的单击事件中获取目标元素
我想要在 ASP.NET Core blazor 中触发 click 事件的确切目标。这是可以实现的吗？最佳答案您可以使用@ref 获取对 DOM 对象的引用，然后将其作为参数传递给您的处理程序函
blazor - 如何使用 Blazor 服务器端判断用户何时离开站点
Blazor 服务器端基于 Signalr，因此我假设它知道用户何时离开网站(关闭连接)。是否有任何事件可用于记录此事件？或者其他任何方式! 最佳答案我认为这项服务可以帮助您... public c

首页

博学

6Ren·AI

商城

blazor - 如何在 Blazor 中使用 Bootstrap Carousel