我遵循了将旋转木马与Blazor结合使用的解决方案,但是在运行应用程序时遇到了Object异常。
How to use Bootstrap Carousel in Blazor
_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()中
---内部异常堆栈跟踪的结尾---
最佳答案
我将脚本放入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/