C# Bootstrap 4转盘在Blazor（预览7）服务器端不工作
我遵循了将Carousel与Blazor一起使用的解决方案，但在运行应用程序时出现对象异常 _Host.cshtml：C# Bootstrap 4转盘在Blazor（预览7）服务器端不工作,c#,bootstrap-4,blazor-server-side,C#,Bootstrap 4,Blazor Server Side,我遵循了将Carousel与Blazor一起使用的解决方案，但在运行应用程序时出现对象异常 _Host.cshtml： <body> <app>@(await Html.RenderComponentAsync<App>())</app> <script src="_framework/blazor.server.js"></script> <script src="https://code
<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;
}
}
}
@（等待Html.RenderComponentAsync（））
@**@
window.initializeCarousel=（）=>{
$（#mycarousel'）。carousel（{interval:2000}）；
//请参阅步骤2了解这些新闻id：
$（“#mycarousel prev”）。单击(
（）=>$（'mycarousel'）。carousel（'prev'）；
$（“#mycarousel next”）。单击(
（）=>$（'mycarousel'）。carousel（'next'）；
}
剃须刀页面：
@页面“/fullDetails/{id:int}”
@使用BlazorApp2.Data
@使用System.Collections.Generic
@注入IJSRuntime JsRuntime；
@注入车辆服务VService
@继承UIC属性
车辆详情
@如果（车辆信息==null）
{
加载
}
其他的
{
@foreach（图像中的var img）
{
如果（img.SeqNo==“1”）
{
}
其他的
{
}
}
@*如果使用@code per new speck，则在使用此类格式时会出现错误，请等待_jsRuntime.InvokeAsync（“initializeCarousel”）——其中将被视为标记2019年6月8日*@
@功能{
车辆详情车辆信息；
车辆图像[]图像；
第一个字符串{get；set；}
[参数]
int id{get；set；}
受保护的重写异步任务OnInitAsync（）
{
vehicleInfo=等待VService.OnGetVehicleFullDetailsSync（id）；
images=vehicleInfo.images.ToArray（）；
}
私有ijsruntimejsu运行时；
bool firstRender=true；
AfterRenderAsync（）上受保护的异步重写任务
{
if（firstRender）
{
（第107行）wait_jsRuntime.InvokeAsync（“initializeCarousel”）；
firstRender=false；
}
}
}
---内部异常堆栈末尾跟踪--JavaScript与Blazor的工作方式与之前与默认Razor页面的工作方式不同，因为服务器端Blazor使用WebAssembly并以二进制格式向用户传输数据 当
await\u jsRuntime.InvokeAsync（“initializeCarousel”）；await _jsRuntime.InvokeAsync（“initializeCarousel.js”）； bool firstRender = true;
protected async override Task OnAfterRenderAsync()
{
if (firstRender)
{
await jsRuntime.InvokeAsync<string>("initializeCarousel");
firstRender = false;
}
}
bool firstRender=true；
AfterRenderAsync（）上受保护的异步重写任务
{
if（firstRender）
{
等待jsRuntime.InvokeAsync（“initializeCarousel”）；
firstRender=false；
}
}
感谢Chris Sainty的澄清：谢谢，但这是一个服务器端练习。如果我正确阅读了文档，客户端使用web程序集脚本。“服务器端Blazor使用WebAssembly”是根本错误的。Blazor WebAssembly（也称为客户端Blazor）使用web组件。服务器端blazor在客户端使用一个小java脚本。-值得投反对票