在 Blazor 应用程序中使用 Jquery 函数而无需单击按钮
Posted
技术标签:
【中文标题】在 Blazor 应用程序中使用 Jquery 函数而无需单击按钮【英文标题】:Using Jquery function in blazor application without button click 【发布时间】:2021-02-03 04:24:13 【问题描述】:我是 .net core 和 blazor 的新手,但正在试验,但努力能够在 mvc 中实现一个简单的 jquery 调用...
所以我在一个名为 selfWritingText.js 的 js 文件中有一个 jquery 方法
$("#typed").typed(
strings: ["LOADING RECORDS...", "ONE MOMENT PLEASE...", ""],
typeSpeed: 60,
startDelay: 0,
backSpeed: 40,
backDelay: 500,
loop: true,
cursorChar: "|",
contentType: 'html'
);
我已经在我的主机文件中添加了调用
<script src="_framework/blazor.server.js"></script>
</body>
</html>
<script src="~/js/jquery.min.js"></script>
<script src="~/js/interop.js"></script>
<script src="~/js/SelfWritingText.js"></script>
现在在我的剃须刀页面中,我添加了@inject IJSRuntime JsRuntime
。
protected override async Task OnInitializedAsync()
this.VisibleProperty = true;
await JsRuntime.InvokeVoidAsync("selfWritingText");
await LoadData();
await Task.Delay(2000);
this.VisibleProperty = false;
还有我的 html 应该调用 jquery 的地方
<SfSpinner @bind-Visible="@VisibleProperty" Type="@SpinnerType.Bootstrap" Size="50" CssClass="e-customClass">
@*<h3 style="font-family:open sans,Helvetica Neue,Helvetica, Arial, sans-serif; color:#298282">LOADING....</h3>
<br />*@
<div class="type-wrap">
<!-- add static words/sentences here (i.e. text that you don't want to be removed)-->
<span id="typed" style="white-space:pre;" class="typed">
</span>
</div>
</SfSpinner>
但我只是收到这些错误,谁能告诉我我做错了什么......谢谢。
【问题讨论】:
【参考方案1】:当您通过 IJSRuntime 调用 InvokeVoidAsync 方法时,它会在“窗口”对象(表示浏览器中打开的窗口的对象)内搜索该方法。
尝试在您创建的 javascript 文件中以这种方式编写您的方法:
window.selfWritingText = () =>
$("#typed").typed(
strings: ["LOADING RECORDS...", "ONE MOMENT PLEASE...", ""],
typeSpeed: 60,
startDelay: 0,
backSpeed: 40,
backDelay: 500,
loop: true,
cursorChar: "|",
contentType: 'html'
);
然后,请记住不能在 OnInitializedAsync 方法中调用 javascript 方法,否则您将得到一个异常! JavaScript 互操作调用只能在 OnAfterRenderAsync 生命周期方法期间执行。
还要记得把你的 js 文件放在 _host.chstml 文件中!
<script src="~/selfWritingText.js"></script>
【讨论】:
以上是关于在 Blazor 应用程序中使用 Jquery 函数而无需单击按钮的主要内容,如果未能解决你的问题,请参考以下文章
Angular、Vue、React、Web Components、Blazor、Javascript、jQuery和ASP.NET Framework,