如何在提交表单后显示提交成功信息

Question

当用户在注册页面成功提交时，我希望在首页上显示一个成功提交的消息。

我的注册操作包括：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult SaveRegister(AirlineWebApplication.Models.User User, HttpPostedFileBase file)
{
    db.Users.Add(User);
    db.SaveChanges();
    return RedirectToAction("Index");
}

以下是我的注册视图。

<section class="registersection">
  <div class="container-fluid">
    <div class="row">
      <div class="signupForm">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          @using (Html.BeginForm("SaveRegister", "Users", FormMethod.Post)) {
          @Html.ValidationSummary(true)
          @Html.AntiForgeryToken()
          <div class="editor-field">
            <label>Name
                   @Html.EditorFor(model => model.user_name)
            </label>
            @Html.ValidationMessageFor(model => model.user_name)
          </div>
          <div class="editor-field">
            <label>Password
                   @Html.EditorFor(model => model.password)
            </label>
            @Html.ValidationMessageFor(model => model.password)
          </div>
          <p>
            <input type="submit" value="Register" />
          </p>
          }
        </div>
      </div>
    </div>
  </div>
</section>

当我点击“注册”按钮时，如何在Index页面上显示成功消息“您已成功注册”？

- Stack Developer

---

这个问题太宽泛了，请澄清一下你想要实现什么，以及哪些部分出了问题。顺便提一下，在第42行有一个无法匹配的</label>。 - Eduard Malakhov

你想要显示弹出消息吗？还是只想在首页上显示消息本身？ - user9405863

我想要一个弹出消息。 - Stack Developer

你有Bootstrap吗？ - derloopkat

是的，我有Bootstrap。 - Stack Developer

Answer 1

有很多方法可以做到这一点。例如，在您的控制器中使用 TempData 来知道您来自哪里：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult SaveRegister(AirlineWebApplication.Models.User User,
    HttpPostedFileBase file)
{

    db.Users.Add(User);
    db.SaveChanges();
    TempData["Referrer"] = "SaveRegister";
    return RedirectToAction("Index");
}

在您的索引视图中：

@if((string)TempData["Referrer"] == "SaveRegister")
{
    <div class="alert alert-success">
      <strong>You have registered successfully</strong>
    </div>
}

与ViewBag不同，TempData会持续到下一个请求，因此它适用于重定向到不同页面并从那里检索值。

- derloopkat

Answer 2

当您在Visual Studio中创建新项目时，可以查看如何显示确认消息的示例。

您可以创建一个名为RegisterConfirmation的新视图，然后在控制器中将最后一行更改为：

return RedirectToAction("Index");

to:

return View("RegisterConfirmation");

编辑 在主要的 Index 页面上显示消息并不推荐。如果您想这样做，您需要将消息传递给 Index 页面：

string message = "You have registered successfully";
return RedirectToAction("Index", "Home", new { m = message });

在index页面的控制器中，您需要从查询字符串中获取消息并将其添加到模型或ViewBag中：

public ActionResult Index(string m) {
    ViewBag.Message = m;
}

最后，在您的index视图中，您可以在页面上任何位置显示消息：div：

<div>@ViewBag.Message</div>

另外，你可以将 div 设置为弹出窗口。这在 CSS 中非常简单。

如果你不想使用查询字符串（这可能更好），你可以使用 TempData 代替：

TempData["Message"] = "You have registered successfully";
return RedirectToAction("Index", "Home");

在 Index 视图中：

<div>@TempData["Message"]</div>

- Racil Hilan

---

但我想在主要的“Index”页面上显示该消息。 - Stack Developer

你需要在问题中清楚地提到这一点。我会更新我的答案。 - Racil Hilan

为什么你说索引页面不适合成功消息？我很好奇，因为我刚打算这样做，但我不想做出错误的决定！ - KirstieBallance

@KirstieBallance 这完全取决于你的设计。一般来说，您希望在发生操作的相关位置向用户显示一条消息。如果注册是弹出层，在主页上无法从任何其他页面访问，则在主页上显示弹出消息很好。但是，在大多数情况下，注册是一个完整的页面（不是弹出层），或者可以从几个页面访问（例如登录页面），因此将用户重定向到主页可能会导致糟糕的用户体验。有些网站在注册后仍然会在消息之后将您重定向到登录页面。 - Racil Hilan