服务器端Blazor组件嵌入.cshtml页面提交回发刷新问题咨询

首先明确：完全可以在带提交按钮的.cshtml（传统Razor页面）中嵌入带数据修改按钮的服务器端Blazor组件，你遇到的整页刷新、SignalR没做局部更新的问题，核心是传统Razor页面的回发机制和Blazor的SignalR持久连接模型冲突了，下面给你几个实用的解决思路：

问题根源先搞懂 #

传统Razor页面的提交按钮触发的是整页HTTP回发，回发后整个页面会重新渲染，包括Blazor组件也会被重新初始化——这相当于之前的SignalR连接直接断开，组件从头开始，自然不会走SignalR的局部更新逻辑。

解决方案1：阻止整页回发，用异步提交+JS互操作 #

把.cshtml里的传统提交改成异步Ajax提交，避免页面刷新，同时通过JS通知Blazor组件更新数据：

1. 把提交按钮改成type="button"（避免默认回发），绑定异步提交的JS函数：

<form id="main-form">
  <!-- 你的表单控件 -->
  <input type="text" name="username" />
  <button type="button" onclick="submitForm()">提交</button>
</form>

2. 编写异步提交的JS代码，同时触发自定义事件通知Blazor：

async function submitForm() {
  const form = document.getElementById('main-form');
  const formData = new FormData(form);
  
  // 带上防伪造令牌，避免400错误
  const token = document.querySelector('input[name="__RequestVerificationToken"]').value;
  
  // 异步提交数据
  const response = await fetch(window.location.pathname, {
    method: 'POST',
    body: formData,
    headers: {
      'RequestVerificationToken': token
    }
  });
  
  if (response.ok) {
    // 触发自定义事件，通知Blazor组件更新
    const updatedData = await response.json();
    window.dispatchEvent(new CustomEvent('formSubmitted', { detail: updatedData }));
  }
}

3. 在Blazor组件里监听这个自定义事件，更新数据：

@implements IAsyncDisposable
@inject IJSRuntime JSRuntime

<!-- 你的组件内容 -->
<button @onclick="ModifyData">修改数据</button>

@code {
  private DotNetObjectReference<YourComponent>? _objRef;

  protected override async Task OnInitializedAsync()
  {
    _objRef = DotNetObjectReference.Create(this);
    // 监听JS的自定义事件
    await JSRuntime.InvokeVoidAsync("addEventListener", "formSubmitted", _objRef, "HandleFormSubmitted");
  }

  [JSInvokable]
  public async Task HandleFormSubmitted(YourDataType updatedData)
  {
    // 更新组件内的数据，触发SignalR局部更新
    YourData = updatedData;
    StateHasChanged();
  }

  private async Task ModifyData()
  {
    // 你的数据修改逻辑，走Blazor的SignalR通道
    await YourDataService.UpdateData(YourData);
  }

  public async ValueTask DisposeAsync()
  {
    if (_objRef != null)
    {
      await JSRuntime.InvokeVoidAsync("removeEventListener", "formSubmitted", _objRef, "HandleFormSubmitted");
      _objRef.Dispose();
    }
  }
}

解决方案2：把提交逻辑移到Blazor组件里（更推荐） #

如果业务场景允许，直接把.cshtml里的表单和提交逻辑全部迁移到Blazor组件中，用Blazor自带的EditForm处理提交——这样全程走Blazor的SignalR连接，完全避免传统回发：

<!-- Blazor组件代码 -->
<EditForm Model="@DataModel" OnValidSubmit="@HandleSubmit">
  <DataAnnotationsValidator />
  <ValidationSummary />

  <!-- 表单控件 -->
  <InputText @bind-Value="@DataModel.Username" />
  <InputPassword @bind-Value="@DataModel.Password" />

  <button type="submit">提交</button>
  <button type="button" @onclick="ModifyLocalData">修改数据</button>
</EditForm>

@code {
  [Parameter]
  public YourDataModel DataModel { get; set; } = new();

  [Inject]
  private IYourDataService DataService { get; set; } = default!;

  private async Task HandleSubmit()
  {
    // 提交数据，走Blazor的SignalR通道
    await DataService.SubmitData(DataModel);
    // 组件自动局部更新，无需整页刷新
  }

  private void ModifyLocalData()
  {
    // 本地修改数据，即时更新UI
    DataModel.Username = "修改后的用户名";
  }
}

然后在.cshtml里直接嵌入这个组件就行：

<component type="typeof(YourBlazorComponent)" render-mode="ServerPrerendered" param-DataModel="@Model.InitialData" />

解决方案3：实在要保留传统回发？试试状态持久化 #

如果必须保留传统表单回发（比如老项目改造），可以在回发前后保存/恢复Blazor组件的状态：

1. 在组件销毁前把状态存入localStorage：

@implements IDisposable

@code {
  [Inject]
  private IJSRuntime JSRuntime { get; set; } = default!;

  private YourDataModel ComponentState { get; set; } = new();

  protected override async Task OnInitializedAsync()
  {
    // 回发后读取localStorage恢复状态
    var savedState = await JSRuntime.InvokeAsync<string>("localStorage.getItem", "BlazorComponentState");
    if (!string.IsNullOrEmpty(savedState))
    {
      ComponentState = JsonSerializer.Deserialize<YourDataModel>(savedState)!;
    }
  }

  public void Dispose()
  {
    // 组件销毁前保存状态
    _ = JSRuntime.InvokeVoidAsync("localStorage.setItem", "BlazorComponentState", JsonSerializer.Serialize(ComponentState));
  }
}

2. 或者在.cshtml回发后，把最新的数据通过参数传递给组件：

<component type="typeof(YourBlazorComponent)" render-mode="ServerPrerendered" param-ComponentState="@Model.UpdatedState" />

不过这个方案是“退而求其次”，因为回发后组件还是会重新初始化，只是恢复了状态，体验不如前两种。

总结一下：优先选方案2（全Blazor化），如果不能动原有表单就用方案1（异步提交+JS互操作），方案3只适合极端场景。

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