Blazor无需使用JavaScript且不重载页面提交表单是否可行

核心结论 #

Blazor原生支持不重载页面的表单提交功能，完全不需要编写任何自定义JavaScript代码。你之前查到的Ajax方案是传统ASP.NET应用的实现方式，在Blazor中有更简单的原生实现。

问题原因 #

你当前的代码没有为form标签绑定Blazor侧的提交处理逻辑，也没有阻止浏览器默认的表单提交行为，所以会触发页面重载。

修复后代码 #

@using Microsoft.AspNetCore.WebUtilities
@inject NavigationManager navigationManager

<form @onsubmit="HandleSubmit" @preventDefaultSubmit>
    <input @bind="ErrorCode" />
    <button type="submit">提交</button>
</form>

@code {
    public string ErrorCode { get; set; }
    private System.Uri uri;

    protected override void OnInitialized()
    {
        uri = navigationManager.ToAbsoluteUri(navigationManager.Uri);
        if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("ErrorCode", out var errorCodeValue))
        {
            ErrorCode = errorCodeValue;
        }
    }

    private void HandleSubmit()
    {
        // 此处编写表单提交的业务逻辑，比如调用后端接口、处理数据
        // 如果需要修改URL查询参数且不刷新页面，可以使用下方代码
        var query = new Dictionary<string, string>
        {
            ["ErrorCode"] = ErrorCode
        };
        var newUri = QueryHelpers.AddQueryString(uri.AbsolutePath, query);
        navigationManager.NavigateTo(newUri, forceLoad: false);
    }
}

关键配置说明 #

• @onsubmit：将表单的提交事件绑定到C#方法，所有提交逻辑都可以在C#中完成
• @preventDefaultSubmit：阻止浏览器默认的表单提交跳转行为，从根源避免页面重载
• NavigationManager.NavigateTo方法的forceLoad参数设置为false时，只会修改浏览器地址栏的查询参数，不会触发页面重载，完全满足无刷新更新URL的需求。

如果需要表单验证能力，也可以直接使用Blazor原生的EditForm组件搭配数据验证属性实现，全程不需要编写JavaScript代码。

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