如何将jQuery添加到Blazor Server应用程序中？

Question

我正在尝试将一些jQuery添加到Blazor Server应用程序中。特别是能够在剃须刀页面（createNote.razor）上的表单上（其中ID ='CompanyName'）上自动完成输入字段。当我运行该应用程序时，AutoComplete行不通。我添加了警报线以测试是否执行并且效果很好。

_layout.cshtml：

...
</head>
    <link href="TelephoneNotes.styles.css" rel="stylesheet" />

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js" integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY=" crossorigin="anonymous"></script>

    <link href="https://tofsjonas.github.io/sortable/sortable.css" rel="stylesheet" />
    <script src="https://tofsjonas.github.io/sortable/sortable.js"></script>

    <script type="text/javascript">$(function () {
            $("#companyName").autocomplete({
                source: ["Apple", "Google", "Facebook"],
                minLength: 3
            })

    $(document).ready(function () {
        alert("test");
    });

        })</script>
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>

createNote.Razor：

<EditForm Model="@newNote" OnSubmit="@InsertNote">
...
    <div class="form-group row" style="padding-top: 5px;">
        <label for="company" class="col-sm-2 col-form-label">
            Company:
        </label>
        <div class="col-sm-10">
            <InputText id="companyName" class="form-control" placeholder=""
                       @bind-Value="newNote.CompanyName" />
        </div>
    </div>
...
</EditForm>

更新：

我已经使用init.js使用wwwroot文件夹：

function CompleteFormControls() {
    $("#companyName").autocomplete({
        source: ["Apple", "Google", "Facebook"],
        minLength: 3
    }

我已经在_layout的底部添加了以下行。 CSHTML在关闭主体标签之前：

<script src="/init.js"></script>

我创建了jsinterop class：

namespace TelephoneNotes.Services
{
    using Microsoft.JSInterop;

    public class JSInterop
    {
        private readonly IJSRuntime js;

        public JSInterop(IJSRuntime js)
        {
            this.js = js;
        }

        public async ValueTask InvokeCompleteFormControls()
        {
            await js.InvokeVoidAsync("CompleteFormControls");
        }

        public void Dispose()
        {
        }
    }
}

createNote.razor：

@page "/createnote"

<PageTitle>Create Note</PageTitle>

@using TelephoneNotes.Data
@inject NotesService NotesService
@implements IDisposable
@inject IJSRuntime JS

<h1>Create Note</h1>

<EditForm Model="@newNote" OnSubmit="@InsertNote">
    <div class="form-group row" style="padding-top: 5px;">
        <label for="company" class="col-sm-2 col-form-label">
            Company:
        </label>
        <div class="col-sm-10">
            <InputText id="companyName" class="form-control" placeholder=""
                       @bind-Value="newNote.CompanyName" />
        </div>
    </div>

    <div class="form-group row" style="padding-top: 15px;">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</EditForm>

@code {
    private List<string?> companyNames = new List<string?>();
    private TelephoneNotes.Services.JSInterop? jsClass;

    protected override async Task OnInitializedAsync()
    {
        jsClass = new(JS);
        companyNames = await NotesService.GetCompanyNames();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await jsClass.InvokeCompleteFormControls();
        }
    }

    public void Dispose() => jsClass?.Dispose();
}

但是，当我运行应用程序并转到“创建注释”页面时，我会收到以下错误：

Error: Microsoft.JSInterop.JSException: Could not find 'CompleteFormControls' ('CompleteFormControls' was undefined).

任何建议：为什么？

_host.cshtml：

@page "/"
@namespace TelephoneNotes.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}

<component type="typeof(App)" render-mode="ServerPrerendered" />
<script src="/init.js"></script>

Answer 1

您无法在julazor中使用这样的JS。

什么是$（document）.ready（）{}？
这意味着此范围内的代码{}只能渲染，并且只有在页面DOM准备执行JS代码后才进行。

何时准备在大火中准备？
在大多数情况下，您必须在Bult-In onfterRender函数中执行JS代码，因为在这一点上，您将确保DOM已完成，并且可以使用JS来操纵前端。

执行JS函数的最佳方法是什么？

1. 为wwwroot文件夹中的JS创建一个单独的文件（myjs.js）和在此处添加您的JS功能。

    函数plottyformControls（）
   {
     settimeout（（）=＆gt; {
       if（$（“＃companyName”）！= null）{
         $（“＃CompanyName”）。autoComplete（{
         资料来源：[“ Apple”，“ Google”，“ Facebook”]，
         最低：3}）;
       }
    }，500）;
   }
    

2. 在_host.html的主体末端添加js文件'myjs.js'，它应该是jquery：

   的下降。

    ＆lt; Body＆gt;
    ＆lt; script src =“〜/lib/jquery/jquery.min.js”＆gt;＆lt;/script＆gt;
    ＆lt; script src =“〜/myjs.js”＆gt;＆lt;/script＆gt;
   ＆lt;/body＆gt;
    

3. ' myjs.js 文件：

     Puplic Statis类Jshelper
   {
    [debuggerhidden] //告诉vs不要调试此功能
    Puplic Statis aasync valueTask ploverseFormControlsAsync（this ijSruntime）
    {
     等待js.invokevoicevoidAsync（“完整formcontrols”）;
    }
   } 
    

4. 注入ijsruntime在剃须刀页面中：

     [注入]私有ijsruntime JS {get;放;}
   受保护的替代任务onfterRenderAsync（bool firstrender）
   {
     如果（firstrender）
     {
       等待JS.CompleteFormControlsAsync（）;
     }
   }
    

注意：您还可以替换onfterRenderAsync 并使用一些事件，例如单击事件，因为在这种情况下，您确定DOM也完成了渲染。

Answer 2

将您的JavaScript放在身体标签的末端。当前的位置您所说的$（“＃CompanyName”）将是无效的。在JavaScript执行之前，必须加载组件。

<html>
<body>

<Your Components will be here>

 <script type="text/javascript">$(function () {
            $("#companyName").autocomplete({
                source: ["Apple", "Google", "Facebook"],
                minLength: 3
            })

    $(document).ready(function () {
        alert("test");
    });

        })</script>
<body>
</html>

Answer 3

在页面/_layout.cshtml与您的JS脚本以及JS脚本一起添加以下片段：

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/init.js"></script>

在这种情况下，您的JS脚本将在wwwroot/js文件夹中

在createNote.Razor中：

IJSRuntime _js

//other code here

@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
  {
      await _js.InvokeVoidAsync("CompleteFormControls");
  }
}

Answer 4

Blazor不了解查询选择器'$'，您需要用关键字文档替换它。