在ASP.NET Core Razor Pages中使用Blazor @bind功能是否可行？

ASP.NET Core原生支持Razor Pages、MVC和Blazor组件混合使用，你只需要给现有项目补充Blazor相关配置，单独把需要用到@bind特性的模块封装为Blazor组件嵌入Razor Page即可，原有Razor Pages的业务逻辑完全不需要改动。

具体操作步骤 #

• 第一步：配置Blazor服务
  打开项目的Program.cs文件，在服务注册区添加Blazor服务注册：

  builder.Services.AddServerSideBlazor();
  

  然后在中间件配置区的路由规则部分添加Blazor集线器映射：

  app.MapBlazorHub();
  

• 第二步：引入Blazor前端脚本
  在项目的公共布局文件（通常是Pages/Shared/_Layout.cshtml）的body标签末尾，加入Blazor客户端脚本引用：

  <script src="_framework/blazor.server.js"></script>
  

• 第三步：创建带@bind特性的Blazor组件
  在项目中新建Blazor组件（后缀为.razor），实现你需要的表单绑定和动态图片逻辑，示例如下：

  <!-- 示例组件：BindableImageForm.razor -->
  <input type="text" @bind="InputValue" @bind:event="oninput" />
  <!-- 动态图片随输入值变化 -->
  <img src="@GetDynamicImageUrl()" alt="动态展示图" />
  
  @code {
      // 定义绑定参数，符合Blazor @bind约定
      [Parameter]
      public string InputValue { get; set; }
      [Parameter]
      public EventCallback<string> InputValueChanged { get; set; }
  
      private string GetDynamicImageUrl()
      {
          // 这里写你的动态图片生成逻辑
          return string.IsNullOrEmpty(InputValue) ? "/images/default.png" : $"/images/{InputValue.Trim()}.png";
      }
  
      // 同步绑定值
      protected override void OnParametersSet()
      {
          InputValueChanged.InvokeAsync(InputValue);
      }
  }
  

• 第四步：在Razor Page中嵌入Blazor组件
  在你需要用到该功能的Razor Page页面中，用component标签渲染上面创建的组件即可，还可以直接把Razor Page的Model字段作为参数传给组件：

  @model YourPageModel
  <form method="post">
      <!-- 嵌入Blazor组件，绑定PageModel的表单字段 -->
      <component type="typeof(BindableImageForm)" render-mode="ServerPrerendered" param-InputValue="@Model.FormInputField" />
      <button type="submit">提交表单</button>
  </form>
  

注意事项 #

如果你需要把Blazor组件中绑定的数值随Razor Page的表单一起提交，只需要在组件中添加一个隐藏的表单字段同步InputValue的值，或者通过Blazor的JS互操作能力更新父页面的表单字段即可。

内容的提问来源于stack exchange，提问作者Mateusz Klencz