Question

我遵循了将旋转木马与Blazor结合使用的解决方案，但是在运行应用程序时出现了Object异常。

_Host.cshtml：

<body>
    <app>@(await Html.RenderComponentAsync<App>())</app>

    <script src="_framework/blazor.server.js"></script>
    <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 = () => {
            $('#mycarousel').carousel({ interval: 2000 });

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

        }
    </script>
</body>
</html>

Razor Page:

@page "/fullDetails/{id:int}"
@using BlazorApp2.Data
@using System.Collections.Generic
@inject IJSRuntime JsRuntime;
@inject VehicleService VService
@inherits UIAttributes


<h1>Vehicle Details</h1>
<hr />
<div>
    @if (vehicleInfo == null)
    {
        <p><em>Loading...</em></p>
    }
    else
    {
        <div class="col-lg-4 col-md-6 col-sm-6">
            <div id="mycarousel" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    @foreach (var img in images)
                    {
                        if (img.SeqNo == "1")
                        {
                            <div class="carousel-item active">
                                <img class="d-block w-100" src="/images/@img.ImageName" alt="None">
                            </div>

                        }
                        else
                        {
                            <div class="carousel-item">
                                <img class="d-block w-100" src="/images/@img.ImageName" alt="None">
                            </div>
                        }
                    }
                </div>

                <!-- Left and right controls -->
                <a class="carousel-control-prev" id="mycarousel-prev" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
                <a class="carousel-control-next" id="mycarousel-next" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a>
            </div>
        </div>



</div>

@*If using @code per new speck you get errors when using this type of format  await _jsRuntime.InvokeAsync<object>("initializeCarousel"); -- where <object> while be seen as markup 08/06/2019*@

@functions{

    VehicleFullDetails vehicleInfo;
    VehicleImage[] images;
    string first { get; set; }

    [Parameter]
    int id { get; set; }


    protected override async Task OnInitAsync()
    {
        vehicleInfo = await VService.OnGetVehicleFullDetailsAsync(id);
        images = vehicleInfo.Images.ToArray();
    }

    private  IJSRuntime _jsRuntime;


    bool firstRender = true;

    protected async override Task OnAfterRenderAsync()
    {
        if (firstRender)
        {

 (line 107)           await _jsRuntime.InvokeAsync<object>("initializeCarousel");
            firstRender = false;
        }
    }



}

[2019-08-07T15：51：05.848Z]错误：System.AggregateException：发生一个或多个错误。（你调用的对象是空的。） ---> System.NullReferenceException：对象引用未设置为对象的实例。在C：\ projects \ blazor \ gettingStarted \ BlazorApp2 \ BlazorApp2 \ Pages \ FullDetails.razor：第107行的BlazorApp2.Pages.FullDetails.OnAfterRenderAsync（）中 ---内部异常堆栈跟踪的结尾---

Answer 1

我将脚本放入了一个initCarousel.js文件中，并将其添加到_host.cshtml页面中。然后，我将@function代码修改为：

 bool firstRender = true;

    protected async override Task OnAfterRenderAsync()
    {
        if (firstRender)
        {

            await jsRuntime.InvokeAsync<string>("initializeCarousel");
            firstRender = false;
        }
    }

服务器端应用程序现在循环浏览图像并允许下一个/上一个选择。

感谢克里斯·桑蒂（Chris Sainty）的澄清：https://chrissainty.com/using-javascript-interop-in-razor-components-and-blazor/

Answer 2

JavaScript无法与Blazor一起使用，因此无法与早期的默认Razor页面一起使用，因为服务器端Blazor使用WebAssembly并将数据以二进制格式传输给用户。

并且<script>分批转移时无法运行。

有两种解决问题的方法：

1）-一种是将Blazor从服务器端更改为客户端端（以便用户下载包含所有脚本的整页）

2）-第二步是使用 JavaScript interop 的用法，您可以在官方MS文档ASP.NET Core Blazor JavaScript interop

中阅读

您的代码中也存在一些语法错误：

await _jsRuntime.InvokeAsync<object>("initializeCarousel");

但是您指的是JS脚本，因此它应该是这样的js文件：

await _jsRuntime.InvokeAsync<object>("initializeCarousel.js");

Bootstrap 4 Carousel无法在Blazor（预览版7）服务器端工作

2 个答案: