ASP.NET MVC如何在Create视图显示自定义成功提示后跳转至Index页

核心逻辑是保存成功后先不直接跳转到列表页，先传递成功状态到Create视图，渲染成功提示后通过JS实现延迟自动跳转。

基础实现方案 #

1. 调整Controller的Create方法 #

把保存成功后的跳转逻辑替换为返回当前Create视图，同时传递成功标记：

public ActionResult Create([Bind(Include = "Id,SuppName,Pay_Method,Status,Create_By,Create_Date")] M_Supplier m_Supplier)
{
    if (ModelState.IsValid)
    {
        m_Supplier.Create_By = int.Parse(((System.Security.Claims.ClaimsIdentity)User.Identity).FindFirst("UserId").Value);
        m_Supplier.Status = true;
        m_Supplier.Create_Date = DateTime.Now;

        db.M_Supplier.Add(m_Supplier);
        db.SaveChanges();

        // 传递成功标记到视图
        ViewBag.SaveSuccess = true;
        return View(m_Supplier);
    }
    return View(m_Supplier);
}

2. 修改Create视图代码 #

在Create视图中添加成功提示和延迟跳转逻辑：

@if (ViewBag.SaveSuccess == true)
{
    <div class="alert alert-success alert-dismissible">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        <strong><i class="fa fa-check-circle" aria-hidden="true"></i> 记录添加成功，2秒后将自动跳转到列表页</strong>
    </div>
    <!-- 延迟跳转脚本，2000为停留毫秒数，可自行调整 -->
    <script>
        setTimeout(function(){
            window.location.href = '@Url.Action("Index")';
        }, 2000);
    </script>
}

优化方案（避免刷新重复提交表单） #

上面的基础方案存在用户刷新页面重复提交表单的问题，可通过TempData+PRG模式优化：

1. 调整Controller代码 #

// Get请求访问Create页的方法
[HttpGet]
public ActionResult Create()
{
    return View();
}

// Post提交表单的方法
[HttpPost]
public ActionResult Create([Bind(Include = "Id,SuppName,Pay_Method,Status,Create_By,Create_Date")] M_Supplier m_Supplier)
{
    if (ModelState.IsValid)
    {
        m_Supplier.Create_By = int.Parse(((System.Security.Claims.ClaimsIdentity)User.Identity).FindFirst("UserId").Value);
        m_Supplier.Status = true;
        m_Supplier.Create_Date = DateTime.Now;

        db.M_Supplier.Add(m_Supplier);
        db.SaveChanges();

        // 用TempData存成功标记，TempData仅可读取一次
        TempData["SaveSuccess"] = true;
        // 重定向到Get的Create方法，避免重复提交
        return RedirectToAction("Create");
    }
    return View(m_Supplier);
}

2. 修改Create视图判断逻辑 #

@if (TempData["SaveSuccess"] != null && (bool)TempData["SaveSuccess"] == true)
{
    <div class="alert alert-success alert-dismissible">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        <strong><i class="fa fa-check-circle" aria-hidden="true"></i> 记录添加成功，2秒后将自动跳转到列表页</strong>
    </div>
    <script>
        setTimeout(function(){
            window.location.href = '@Url.Action("Index")';
        }, 2000);
    </script>
}

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