单表单实现博客创建/更新后自动展示对应提示的技术咨询

核心思路 #

因为不能用ajax异步提交，采用服务器端存储操作结果消息，页面加载时读取消息并弹出提示的方案：

• 后端根据Id判断是创建还是更新操作，执行完成后将结果消息存入TempData（跨请求保留数据），再重定向回表单页面
• 前端页面加载时，检查TempData传递的消息，存在则弹出对应提示框

1. 后端Controller修改示例 #

public class AdminController : Controller
{
    private readonly IBlogService _blogService; // 假设你有博客业务逻辑服务

    public AdminController(IBlogService blogService)
    {
        _blogService = blogService;
    }

    [HttpPost]
    public async Task<IActionResult> AddBlog(BlogRequestDTO blogRequestDTO)
    {
        if (!ModelState.IsValid)
        {
            // 验证失败返回原页面，保留表单数据
            return View(blogRequestDTO);
        }

        string message;
        if (blogRequestDTO.Id == 0) // Id为0表示创建新博客
        {
            await _blogService.CreateBlogAsync(blogRequestDTO);
            message = "创建成功";
        }
        else // Id不为0表示更新现有博客
        {
            await _blogService.UpdateBlogAsync(blogRequestDTO);
            message = "更新成功";
        }

        // 将消息存入TempData，重定向后仍能获取
        TempData["OperationMessage"] = message;
        // 重定向回表单页面（假设表单在Admin/AddBlog视图）
        return RedirectToAction(nameof(AddBlog), new { id = blogRequestDTO.Id });
    }
}

2. 前端表单及提示逻辑修改（已翻译中文） #

<form id="blogForm" enctype="multipart/form-data" asp-controller="Admin" asp-action="AddBlog" method="post">
    <div class="card-body">
        <div class="form-group">
            <input type="hidden" asp-for="blogRequestDTO.Id" />
        </div>
        <div class="form-group">
            <label asp-for="blogRequestDTO.Title">标题</label>
            <input type="text" asp-for="blogRequestDTO.Title" class="form-control" placeholder="输入博客名称">
            <span asp-validation-for="blogRequestDTO.Title" class="text-danger"></span>
        </div>

        <!-- 图片上传 -->
        <div class="col-md-6">
            <div class="form-group">
                <label asp-for="blogRequestDTO.Image" class="control-label"></label>
                <div class="custom-file">
                    <input asp-for="blogRequestDTO.Image" class="custom-file-input" id="customFile">
                    <label class="custom-file-label" for="customFile">选择文件</label>
                </div>
                <span asp-validation-for="blogRequestDTO.Image" class="text-danger"></span>
            </div>
        </div>
    </div>

    <!-- 卡片底部 -->
    <div class="card-footer">
        <button id="submitBtn" type="submit" class="btn btn-primary">提交</button>
    </div>
</form>

<!-- 提示框逻辑 -->
<script>
    // 页面加载时检查后端传递的消息
    window.onload = function() {
        var operationMessage = '@TempData["OperationMessage"]';
        if (operationMessage && operationMessage !== "") {
            // 用原生alert弹出，也可以替换成自定义模态框
            alert(operationMessage);
            // 清除TempData避免重复弹出
            '@{ TempData["OperationMessage"] = null; }';
        }
    }
</script>

注意事项 #

• 确保BlogRequestDTO模型能正确绑定表单数据
• 若需要更美观的提示，可替换原生alert为Bootstrap模态框等UI组件
• TempData依赖会话状态，需确保项目已启用会话功能

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