在 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 函数而无需单击按钮的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Blazor 中执行客户端 UI 事件

Angular、Vue、React、Web Components、Blazor、Javascript、jQuery和ASP.NET Framework,

在 blazor 应用程序之外使用 blazor 组件(例如,knockoutjs)

使用Jexus 容器化您的 Blazor 应用程序

没有 Web 程序集的 blazor

在 blazor 应用程序中使用 mudblazor 实现通用表格组件。 .net 核心