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

Posted 2023-04-13

【中文标题】在 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>