Blazor-表单提交的艺术：如何优雅地实现（上）

置顶 code-Study

已于 2025-06-06 11:50:14 修改

阅读量929

点赞数 22

分类专栏： Blazor 文章标签： Blazor c# .net

于 2025-06-06 09:29:54 首次发布

本文链接：https://blog.csdn.net/Maybe_ch/article/details/148465742

版权

Blazor 专栏收录该内容

36 篇文章

订阅专栏

下面我将从三个方面来说说Blazor的表单提交方法，从原始的HTML表单提交方法，到Blazor的两种模式的提交方法进行描述，供大家了解。

传统HTML表单提交

在Blazor中仍可使用标准HTML表单元素，通过设置action属性和method属性实现传统提交。这种方式会触发页面刷新，适用于需要与后端非Blazor逻辑交互的场景。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form method="get">
        <div>姓名：<input type="text" name="fullName"/></div>
        <div>年龄：<input type="number" name="age" /></div>
        <div>
            性别：
            <input type="radio" value="woman" name="sex" />男
            <input type="radio" value="man" name="sex" />女
        </div>
        <div>
            <button type="submit">提交</button>
        </div>
    </form>
</body>
</html>

交互式SSR提交表单

Razor页面：

@page "/SSRFormPage"
@rendermode InteractiveAuto
<h3>SSRFormPage</h3>
<form @onsubmit="Submit" @formname="StudentForm">
    <AntiforgeryToken />
    <div class="mb-3 w-25">
        <label for="name" class="form-label">姓名：</label>
        <input type="text" @bind="user.Name" class="form-control" placeholder="请输入姓名" />
    </div>
    <div class="mb-3 w-25">
        <label for="age" class="form-label">年龄：</label>
        <input type="number" @bind="user.Age" class="form-control" placeholder="请输入年龄" />
    </div>
    <div class="mb-3 w-25">
        <button type="submit" class="btn btn-primary">提交</button>
    </div>
</form>
@code {
    public User user { get; set; } = new ();

    private void Submit()
    {
        Console.WriteLine($"输入姓名：{user.Name}");
        Console.WriteLine($"输入年龄：{user.Age}");
    }
}

public class User
{
    public string Name { get; set; } = null!;
    public int Age { get; set; }
}

添加了一个User类用于接收数据
（1） <AntiforgeryToken />防伪标识，会将组件中表单数据隐藏，防止跨站请求伪造篡改攻击，也就是防止 CSRF 攻击。
（2）@οnsubmit="Submit"将数据内容提交到Submit方法
（3）使用@bind 指令将 Model 中的属性绑定到元素上。
（4）提交按钮必须是 type="submit"类型的按钮。
以上代码便可将表单提交到Submit方法之中，获取到相应的数据。

代码整体分析

如果您对整体的Blazor写法有所疑惑，可以参考以下的整体代码解释，如果您只需了解表单的提交，可以跳过观看整体的分析解释

路由和渲染模式

@page "/SSRFormPage"
@rendermode InteractiveAuto

@page 指定了组件的路由路径为 “/SSRFormPage”
@rendermode InteractiveAuto 表示使用混合渲染模式（静态服务器渲染 + 按需交互）

表单定义

<form @onsubmit="Submit" @formname="StudentForm">
    <AntiforgeryToken />
</form>

定义了表单提交处理方法为 Submit
表单名称为 “StudentForm”
AntiforgeryToken 生成防伪令牌防止 CSRF 攻击

表单字段

<input type="text" @bind="user.Name" class="form-control" placeholder="请输入姓名" />
<input type="number" @bind="user.Age" class="form-control" placeholder="请输入年龄" />

两个输入字段分别绑定到 user.Name 和 user.Age
使用 Bootstrap 的 form-control 样式类
@bind 实现了双向数据绑定

代码块

@code {
    public User user { get; set; } = new ();
    private void Submit()
    {
        Console.WriteLine($"输入姓名：{user.Name}");
        Console.WriteLine($"输入年龄：{user.Age}");
    }
}

定义了 User 类型的 user 对象并初始化
Submit 方法处理表单提交，目前只是将输入值输出到控制台

静态SSR提交表单

@page "/SSRFormPage"
<h3>SSRFormPage</h3>

<form method="post" @onsubmit="Submit" @formname="HTTPStudentForm">
    <AntiforgeryToken />
    <div class="mb-3 w-25">
        <label for="name" class="form-label">姓名：</label>
        <InputText @bind-Value="@user.Name" class="form-control" placeholder="请输入姓名"
        />
    </div>
    <div class="mb-3 w-25">
        <label for="age" class="form-label">年龄：</label>
        <InputNumber @bind-Value="@user.Age" class="form-control" placeholder="请输入年龄" />
    </div>
    <div class="mb-3 w-25">
        <button type="submit" class="btn btn-primary">提交</button>
    </div>
</form>

@code {
    //页面模型
    [SupplyParameterFromForm(FormName = "HTTPStudentForm")]
    private User user { get; set; } = new();
    
    //当用户提交窗体时，该处理程序将被调用。
    private void Submit()
    {
        Console.WriteLine($"输入姓名：{user.Name}");
        Console.WriteLine($"输入年龄：{user.Age}");
    }
}

public class User
{
    public string Name { get; set; } = null!;
    public int Age { get; set; }
}

在静态SSR提交上，我们需要使用

[SupplyParameterFromForm(FormName = "HTTPStudentForm")]
private User user { get; set; } = new();`

页面模型进行绑定，其余流程和交互式SSR提交方式没有区别。

运行结果

在这里插入图片描述