javascript - 如何将@ref 传递给Javascript 中的元素？

Question

我正在使用 Blazor WASM，并尝试将 @bind 从 razor 传递给 JavaScript 中的元素。元素需要持有input value。我已经尝试过autofocus并尝试将@bind 传递给db.collection('calculate').add({但没有奏效。

Javascript

export function localbase(InNumberPatient, InInterval, InMHCProduct, InComProduct) {

  db.collection('calculate').add({
        InNumberPatient: + InNumberPatient,
        InInterval:  + InInterval,
        InMHCProduct: + InMHCProduct,
        InComProduct: + InComProduct,
      })
    db.collection('calculate').get().then(calculate => {
    console.log(calculate)
    })
  }

剃刀页面

 @code{
    private int InNumberPatient;
private string InInterval;
private string InMHCProduct;
private string InComProduct;
  string name = string.Empty;
  IJSObjectReference module;

 private async Task AddDB()
    {
     module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./scripts/Localbase.js");
    await module.InvokeVoidAsync("localbase", InNumberPatient, InInterval, InMHCProduct, InComProduct);
     Console.WriteLine("Berjaya");

 } 
   }

标签： javascriptasp.net-core

Answer 1

如果你只想将输入值传递给js，你只需要绑定输入值。这里有一个demo：

剃刀：

@inject NavigationManager NavigationManager
@inject IJSRuntime JSRuntime;
<h3>Test</h3>
InNumberPatient
<input @bind="InNumberPatient" />
InInterval
<input @bind="InInterval" />
InMHCProduct
<input @bind="InMHCProduct" />
InComProduct
<input @bind="InComProduct" />
<button @onclick="@(()=>AddDB())">submit</button>
@code {
    private int InNumberPatient;
    private string InInterval;
    private string InMHCProduct;
    private string InComProduct;
    string name = string.Empty;
    IJSObjectReference module;
    private async Task AddDB()
    {
        module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./scripts/Localbase.js");
        await module.InvokeVoidAsync("localbase", InNumberPatient, InInterval, InMHCProduct, InComProduct);
        Console.WriteLine("Berjaya");

    }
}

localbase.js：

export function localbase(InNumberPatient, InInterval, InMHCProduct, InComProduct) {
    console.log("InNumberPatient:" + InNumberPatient + ";InInterval:" + InInterval + ";InMHCProduct:" + InMHCProduct + ";InComProduct:" + InComProduct + ";");
}

结果：