如何在 Blazor 中使用 Razor 和 JavaScript 获取 HTML 输入元素的值？

Question

我正在开发 Blazor 应用程序，需要获取捕获用户姓名的 HTML 输入元素的值。我想使用 JavaScript 检索该值，然后将其传递给我的 Razor 组件。我怎样才能实现这个目标？

我尝试直接访问 Razor 组件中输入元素的值，但我很快意识到 Blazor 组件并不像 JavaScript 那样直接与 DOM 交互。我希望能够从 Blazor 组件调用 JavaScript 函数来检索值，但我不确定如何正确设置它。

Answer 1

要在 Blazor 中使用 Razor 和 JavaScript 获取 HTML 输入元素的值，您可以按照以下步骤操作：

1. 创建一个 JavaScript 函数来检索输入元素的值：

   function getNameValue() {
       return document.getElementById("name-input").value;
   }
   

2. 使用

   IJSRuntime

   从 Razor 组件调用此 JavaScript 函数：

   在 Razor 组件中，您可以调用 JavaScript 函数并使用

   js.InvokeAsync

   获取其返回值。

   这是一个例子：

   @page "/example"
   @inject IJSRuntime js
   
   <input id="name-input" type="text" placeholder="Enter your name" />
   
   <button @onclick="GetNameValue">Get Name Value</button>
   
   @code {
       private async Task GetNameValue()
       {
           var nameValue = await js.InvokeAsync<string>("getNameValue");
           Console.WriteLine($"Name: {nameValue}");
       }
   }
   

   通过此设置，当您单击按钮时，它将调用

   getNameValue

   JavaScript 函数并使用 ID

   name-input

   记录输入元素的值。

   确保 JavaScript 函数正确包含在 Blazor 应用中，通常包含在

   _Host.cshtml

   或

   index.html

   文件中引用的脚本文件中。