EasyAdminBlazor 第九篇：草稿自动保存——填到一半再也不怕丢

关键词：admin blazor、草稿保存、自动保存、EasyAdminBlazor

你有没有遇到过这种情况：

• 填了大半天表单，浏览器突然闪退
• 网络波动，页面断开连接
• 手滑点了关闭标签页
• 客户一个电话，离开工位半小时

回来一看，填的内容全没了。

那种欲哭无泪的感觉，我太懂了。

所以，EasyAdminBlazor 的 AdminTable 组件内置了草稿自动保存功能。你只管填，它替你存。

一、一个属性，开启草稿功能

在 AdminTable 组件上加上 EnableDraft="true"：

<AdminTable TItem="Article" TKey="long"
             EnableDraft="true"
             DraftAutoSaveInterval="30">
    <!-- 表格列配置 -->
</AdminTable>

属性	类型	默认值	说明
EnableDraft	bool	false	是否启用草稿自动保存
DraftAutoSaveInterval	int	30	草稿自动保存间隔（秒）

就这么简单。一行额外代码都不用写。

二、体验是什么样的？

场景1：新增文章

你打开「新增文章」弹窗，填写标题、正文、分类……刚写到一半，电脑死机了。

重启后回到后台，再次点击「新增文章」——

弹窗会提示：检测到未保存的草稿，是否恢复？

点击确定，之前填的内容全部回来了。

场景2：编辑文章

你正在修改一篇长文，改了十几处，电话来了。你关掉浏览器去接电话。

回来再次编辑这篇文章，同样会提示你恢复草稿。

新增和编辑的草稿是分开保存的，不会互相覆盖。

三、智能清理，不打扰

草稿不是无脑存，有几个智能逻辑：

• 无变化不存：如果表单数据和上次保存时一模一样，不会重复存
• 新增时没填任何内容：不保存、不提示、不打扰
• 编辑时没改动数据：自动清理该条草稿
• 提交成功后：自动删除草稿
• 体积控制：草稿 JSON 会忽略导航属性，只存外键，避免超过 localStorage 限制

你需要它的时候它在，不需要它的时候它不碍事。

四、背后的技术原理

草稿数据存在浏览器的 localStorage 里，不占用服务器资源。

• 每30秒自动保存一次（可自定义间隔）
• 恢复时从 localStorage 读取，反序列化后回填表单
• 每次保存/恢复都经过序列化处理，支持复杂对象

序列化优化：

AdminTable 使用 Newtonsoft.Json 处理草稿序列化，默认配置为：

private static readonly JsonSerializerSettings _draftJsonOptions = new()
{
    PreserveReferencesHandling = PreserveReferencesHandling.Objects,
    ReferenceLoopHandling = ReferenceLoopHandling.Ignore,
    NullValueHandling = NullValueHandling.Ignore
};

为了控制 JSON 体积，建议给实体类的导航属性加上 [JsonIgnore]：

public class Article : EntityFull
{
    public long? ClassifyId { get; set; }
    
    [JsonIgnore]  // 草稿序列化时忽略导航属性，只存外键
    public Classify Classify { get; set; }
    
    public string Title { get; set; }
}

这样草稿里只有 ClassifyId，没有完整的 Classify 对象，体积大幅减小。

即使 Blazor Server 的 SignalR 连接断开，草稿也安全地躺在本地。

五、适用场景

场景	为什么需要草稿
长表单（文章、产品、订单）	填一次十几分钟，丢了很崩溃
网络不稳定环境	公共WiFi、移动网络经常断
临时走开	电话、会议、下班……回来继续填
复杂编辑	需要反复修改、预览，随时能保存

凡是需要用户输入的地方，草稿都有价值。

六、与其他功能的联动

• 配合代码生成器：生成的页面天然支持草稿，无需改造
• 配合关联表：外键下拉选中的值也会被草稿保存
• 配合多语言：多Tab表单每个Tab都能草稿保存

草稿功能是 AdminTable 的内置能力，所有基于 AdminTable 的页面自动获得。

七、对比一下

对比项	传统开发	EasyAdminBlazor
手动实现草稿	需要写localStorage读写、序列化、恢复逻辑，至少200行代码	一个属性
区分新增/编辑	要自己管理不同key	自动区分
智能清理	自己判断何时删草稿	自动处理

你花一行配置的时间，省下半天重复造轮子的精力。

八、下一步

草稿功能已经内置，你只需要开启 EnableDraft="true"。

如果你还没试过，今天就体验一下：

dotnet new install EasyAdminBlazor.Templates
dotnet new easyadmin -n MyProject
cd MyProject
dotnet run

登录后台 → 打开任意AdminTable页面 → 新增一条数据，填一半 → 关闭浏览器 → 重新打开 → 点击新增 → 恢复草稿。

你会回来感谢我的。

下一篇预告

《EasyAdminBlazor 第十篇：数据导入导出——批量处理不再麻烦》

聊聊Excel导入模板下载、预览校验、错误定位，以及一键导出。

---

🔗 文档：https://easyadmim.wang-zhan.com.cn/doc
🔗 源码：https://gitee.com/gudufy/EasyAdminBlazor

EasyAdminBlazor —— 草稿自动保存，填到一半再也不怕丢