如何將jQuery添加到Blazor服務器應用程式？-有解無憂

我正在嘗試將一些 jQuery 添加到 Blazor 服務器應用程式中。特別是能夠在剃刀頁面 ( ) 上的表單（其中 id = 'CompanyName'）上自動完成 InputText 欄位CreateNote.razor。當我運行該應用程式時，自動完成功能不起作用。我添加了警告行來測驗它是否執行并且作業正常。

_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 的底部，在結束 body 標記之前添加了以下行：

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

我創建了一個JSInterop類：

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>

uj5u.com熱心網友回復：

將您的 javascript 放在 body 標記的末尾。您放置 $("#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>

uj5u.com熱心網友回復：

Blazor 不理解查詢選擇器“$”，您需要將其替換為關鍵字

document

uj5u.com熱心網友回復：

你不能在Blazor.

是什么$( document ).ready() {}？
這意味著此范圍內的代碼{}將僅在頁面 DOM 準備好執行 JS 代碼時呈現。

Blazor 中的 DOM 何時準備就緒？
在大多數情況下，您必須在內置OnAfterRender函式中執行 JS 代碼，因為此時您將確定 DOM 是完整的，并且您可以使用 JS 來操作前端。

執行 JS 函式的最佳方式是什么？

MyJs.js在檔案夾中為 Js創建一個單獨的檔案（）并在其中wwwroot添加您的 JS 函式。

function CompleteFormControls ()
{
  setTimeout(() => {
    if($("#companyName") != null){
      $("#companyName").autocomplete({
      source: ["Apple", "Google", "Facebook"],
      minLength: 3});
    }
 },500);
}

在 _Host.html 正文的末尾添加您的 Js 檔案“MyJs.js”，它應該位于以下位置jquery：

<body>
 <script src="~/lib/jquery/jquery.min.js"></script>
 <script src="~/MyJs.js"></script>
</body>

創建一個類檔案以在MyJs.js檔案中表示您的函式：

puplic statis class JsHelper
{
 [DebuggerHidden]// tell VS Don't debug this function
 puplic statis aasync ValueTask CompleteFormControlsAsync(this IJSRunTime)
 {
  await js.InvokeVoidAsync("CompleteFormControls");
 }
}

IJSRuntime在您的剃須刀頁面中注入：

[Inject] private IJSRuntime Js {get; set;}
protected override Task OnAfterRenderAsync(bool firstRender)
{
  if(firstRender)
  {
    await Js.CompleteFormControlsAsync();
  }
}

注意：您也可以替換OnAfterRenderAsync和使用一些事件，例如Click事件，因為在這種情況下，您可以確定 DOM 也已完成渲染。

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/493640.html

標籤：jQuery 西装外套 blazor 服务器端

上一篇：jQuery點擊事件然后創建多組div

下一篇：簡單的HTML畫布沒有顯示完整的形狀