ASP.NET Core 7 Razor Pages如何无整页回发定期保存表单内容

基于你的技术栈（ASP.NET Core 7、Entity Framework、Azure部署），可以通过前端异步请求+后端API接口的方式实现自动保存，核心是避免整页刷新，同时保证数据不丢失。下面是具体实现步骤：

1. 前端实现（监听输入+防抖+异步提交） #

用户输入时不能每打一个字就发请求——用防抖函数控制请求频率，比如用户停止输入1秒后再触发保存，既不影响输入体验，又能及时保存。

<!-- 你的文本框结构 -->
<textarea id="textbox1" class="auto-save" data-box-id="1"></textarea>
<textarea id="textbox2" class="auto-save" data-box-id="2"></textarea>
<textarea id="textbox3" class="auto-save" data-box-id="3"></textarea>
<!-- 保存状态提示 -->
<div id="save-status" style="display:none; color: green;"></div>

<script>
// 防抖函数：避免频繁触发请求
function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 保存草稿的异步函数
async function saveDraft(textbox) {
  const boxId = textbox.dataset.boxId;
  const content = textbox.value.trim();
  const statusElement = document.getElementById('save-status');

  try {
    const response = await fetch('/api/savedraft', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
      },
      body: JSON.stringify({
        userId: '@User.Identity.Name', // 用当前登录用户标识，或者会话ID
        textBoxId: boxId,
        content: content
      })
    });

    if (response.ok) {
      statusElement.textContent = '已自动保存';
      statusElement.style.display = 'block';
      setTimeout(() => statusElement.style.display = 'none', 2000);
    } else {
      statusElement.textContent = '保存失败，请稍后重试';
      statusElement.style.color = 'red';
      statusElement.style.display = 'block';
    }
  } catch (err) {
    console.error('保存请求出错:', err);
    statusElement.textContent = '网络异常，保存失败';
    statusElement.style.color = 'red';
    statusElement.style.display = 'block';
  }
}

// 给所有带auto-save类的文本框绑定防抖后的保存事件
document.querySelectorAll('.auto-save').forEach(textbox => {
  const debouncedSave = debounce(() => saveDraft(textbox), 1000);
  textbox.addEventListener('input', debouncedSave);
});
</script>

2. 后端API接口（ASP.NET Core） #

创建API控制器接收前端请求，用Entity Framework操作数据库：

// Controllers/SaveDraftController.cs
[ApiController]
[Route("api/[controller]")]
public class SaveDraftController : ControllerBase
{
    private readonly AppDbContext _dbContext;

    public SaveDraftController(AppDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    [HttpPost]
    public async Task<IActionResult> Post([FromBody] DraftSaveRequest request)
    {
        if (string.IsNullOrEmpty(request.UserId) || string.IsNullOrEmpty(request.TextBoxId))
        {
            return BadRequest("缺少必要标识");
        }

        // 查找用户对应文本框的已有草稿
        var draft = await _dbContext.CommunicationDrafts
            .FirstOrDefaultAsync(d => d.UserId == request.UserId && d.TextBoxId == request.TextBoxId);

        if (draft == null)
        {
            // 无草稿则新建
            draft = new CommunicationDraft
            {
                UserId = request.UserId,
                TextBoxId = request.TextBoxId,
                Content = request.Content,
                LastUpdatedTime = DateTime.UtcNow
            };
            _dbContext.CommunicationDrafts.Add(draft);
        }
        else
        {
            // 有草稿则更新内容和时间
            draft.Content = request.Content;
            draft.LastUpdatedTime = DateTime.UtcNow;
        }

        await _dbContext.SaveChangesAsync();
        return Ok();
    }

    // 请求模型
    public class DraftSaveRequest
    {
        public string UserId { get; set; }
        public string TextBoxId { get; set; }
        public string Content { get; set; }
    }
}

3. 数据库实体与上下文（Entity Framework） #

创建草稿实体类存储自动保存的内容：

// Models/CommunicationDraft.cs
public class CommunicationDraft
{
    public int Id { get; set; }
    public string UserId { get; set; } // 关联用户（基于身份认证）
    public string TextBoxId { get; set; } // 区分三个文本框
    public string Content { get; set; } // 存储文本内容
    public DateTime LastUpdatedTime { get; set; }

    // 乐观锁：防止并发编辑冲突（推荐添加）
    [Timestamp]
    public byte[] RowVersion { get; set; }
}

// Data/AppDbContext.cs
public class AppDbContext : DbContext
{
    public AppDbContext(DbContextOptions<AppDbContext> options) : base(options) { }

    public DbSet<CommunicationDraft> CommunicationDrafts { get; set; }

    protected override void OnModelCreating(ModelBuilder modelBuilder)
    {
        // 配置联合唯一索引：同一个用户的同一个文本框只能有一条草稿
        modelBuilder.Entity<CommunicationDraft>()
            .HasIndex(d => new { d.UserId, d.TextBoxId })
            .IsUnique();
    }
}

4. 额外优化建议 #

• 页面加载恢复草稿：页面初始化时，发请求到后端获取用户的草稿内容，填充到对应文本框
• 并发冲突处理：捕获EF的DbUpdateConcurrencyException异常，返回冲突提示给前端，让用户手动确认
• Azure部署优化：开启Azure应用服务的Always On防止休眠，调整SQL Server连接池配置适配频繁小请求
• 手动保存按钮：给用户提供手动保存选项，作为自动保存的补充
• 离线备份：用localStorage临时存储本地内容，网络恢复后同步到后端

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