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

MaybeHC

发布于 2025-06-08 00:25:36

3200

代码可运行

文章被收录于专栏：技术之路技术之路

运行总次数：0

代码可运行

下面我将从三个方面来说说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提交方式没有区别。

运行结果

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-06-06，如有侵权请联系 cloudcommunity@tencent.com 删除

表单

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度