在MVC页面中处理静态渲染模式Blazor表单组件的问题

问题说明 #

理论上，使用静态渲染模式提交Blazor表单应该可行，但实际提交时并非由Blazor处理，而是被当作MVC表单提交至/。按照客户要求，我使用了静态渲染模式。

我遗漏了什么？

• 交互性？
• Blazor的<Router />？
• Blazor的脚本标签？<script src="_framework/blazor.web.js"></script>

我的假设 #

• 不应要求交互性。
• 第2和第3点看似合理，但这会走向完整SPA模式，而客户更倾向于逐步过渡。

MVC页面中渲染Blazor组件的两种方式 #

• 使用RenderComponentAsync的示例：

@(await Html.RenderComponentAsync<SubscribeToNewsletterForm>(RenderMode.Static, new
{
    BtnLabel = "Subscribe"
}))

• 使用<component>标签的示例：

<component type="@(typeof(SubscribeToNewsletterForm))" render-mode="Static" />

已尝试的操作 #

• 上述两种渲染方式，但Blazor仍未处理表单提交。
• 添加<script src="_framework/blazor.web.js"></script>及BlazorFrameworkFiles，但无效果。

测试与推测 #

最终，我创建了一个使用静态渲染模式的完整Blazor SPA，并将MVC迁移至其他路由。该Blazor SPA能正确处理表单，因此我推测Blazor的<Router />是干预表单提交和导航所必需的。

我的推测是否正确？若正确，MVC页面中的Blazor组件是否仅局限于渲染功能？

带表单的Blazor组件代码 #

<EditForm Model="@SubscriptionModel" OnValidSubmit="@HandleSubscriptionForm" FormName="SubscriptionModel">
    <FluentValidationValidator/>

    <div class="input-group">
        <InputText type="email" class="form-control email-input" required
                   placeholder="Enter your email" aria-label="Enter your email" @bind-Value="SubscriptionModel.Email"/>

        <button class="btn btn-primary subscribe-button" type="submit">@BtnLabel</button>
    </div>

    <ValidationSummary/>
</EditForm>

@code {
    [Parameter]
    public string? BtnLabel { get; set; } = "Join";

    [SupplyParameterFromForm]
    public SubscribeToNewsletterRequest? SubscriptionModel { get; set; }

    protected override void OnInitialized()
    {
        SubscriptionModel ??= new SubscribeToNewsletterRequest();
    }

    private async Task HandleSubscriptionForm()
    {
        Console.WriteLine("Handling subscription form...");
        ...
    }

    public record SubscribeToNewsletterRequest
    {
        public string Email { get; set; }
    }
}

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