时间戳

首页 > 解决方案 > 在 Blazor 应用程序中使用 Jquery 函数而无需单击按钮

javascript - 在 Blazor 应用程序中使用 Jquery 函数而无需单击按钮

问题描述

我是 .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;
    }

还有我应该调用jquery的html

 <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>

但我只是得到这些错误，任何人都可以告诉我我做错了什么......谢谢。

在此处输入图像描述

标签： javascriptc#jqueryrazorblazor-server-side

解决方案

当您通过 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>

推荐阅读