表单提交后的ASP.net MVC成功提示

ASP.net MVC Success Alert After Form submit

本文关键字：MVC 成功 提示 net ASP 表单提交      更新时间：2023-09-26

我想在表单提交和操作成功后显示成功警报弹出或警报消息
在这个例子中，我想显示"成功添加":Create Action: 

[HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create(TAUX taux)
    {
        if (ModelState.IsValid)
        {
            db.TAUX.Add(taux);
            db.SaveChanges();
            return RedirectToAction("Index");
        }
        ViewBag.CAT_ID = new SelectList(db.CATEGORIE, "CAT_ID", "LIBELLE", taux.CAT_ID);
        ViewBag.C_GARANT = new SelectList(db.GARANTIE, "C_GARANT", "LIB_ABREGE", taux.C_GARANT);
        return PartialView("_Create", taux);
    }

Index Action:

public ActionResult Index()
        {
            var taux = db.TAUX.Include(t => t.CATEGORIE).Include(t => t.GARANTIE);
            return View(taux.ToList());
        }

这当然是可能的，但实现细节可能会因技术和应用程序结构而改变。

最常见的方法之一(也是我目前使用的一种非常成功的方法)是接收您需要接收的任何内容，并返回带有状态和/或错误消息的JSON对象，这将由视图上的某些脚本使用。

例如:

[Route(""), HttpPost]
public JsonResult DoSomethingOnTheServer(DoSomethingViewModel vm)
{
   try
   {
      if (DoSomething(vm)) return Success();
      else return Error("The server wasn't able to do something right now.");
   }
   catch (Exception err)
   {
      return Error(err.Message);
   }
}
public JsonResult Success() { return Json(new { Success = true, Message = "" }); }
public JsonResult Error(string message) { return Json(new { Success = false, Message = message }); }

这样，你就可以这样做:

<script>
   $.ajax({
      url: "/",
      method: "POST",
      data: getMyData(),
      success: function(json) {
         if (json.Success) {
            alert("Wow, everything was fine!");
         } else {
            alert(json.Message);
         }
      },
      // This will be trigered whenever your ajax call fails (broken ISP link, etc).
      error: function() {
         alert("Something went wrong. Maybe the server is offline?");
      }
   });
</script>

老实说，你可以提交表单(我的意思是常规提交)，然后在页面刷新时显示你想要的任何东西。

这将，然而，迫使您加载额外的东西与您的视图模型，像一个额外的<script>标签或一些额外的<div>标签，并检查每次。

从可用性/设计的角度来看，这是不允许的。尽可能避免页面刷新，因为这会给用户一种应用正在消失或者他/她现在正在移动到应用之外的感觉。

另外，从性能的角度来看，到服务器的"完整往返"，包括发送表单数据和检索整个新页面(包括整个布局、脚本、razor渲染/解析等)是一个巨大的问题，只是为了向最终用户显示"成功/失败"，所以，再次强调:尽可能避免它。

IMHO，返回视图或部分视图只是为了向最终用户显示消息只是浪费您的和您的最终用户的链接。

我曾经使Ajax表单和在OnSuccess函数我显示消息:

@using (Ajax.BeginForm("Edit1", "Availability", new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.InsertBefore, UpdateTargetId = "formAddAvailabilityContainer", OnSuccess = "AddAvailabilitySuccess" }, new { @class = "AjaxForm", @id = "formAvailability_" + Model.Id }))
    {
        @Html.ValidationSummary(true)


        @Html.HiddenFor(model => model.Id)
        @Html.HiddenFor(model => model.UserId)
        @Html.EditorFor(model => model.StartTime)
        @Html.MyValidationMessageFor(model => model.StartTime)
        @Html.EditorFor(model => model.EndTime)
        @Html.MyValidationMessageFor(model => model.EndTime)
        @Html.EditorFor(model => model.RecurrenceFreq)
        @Html.MyValidationMessageFor(model => model.RecurrenceFreq)

      @Html.TextBoxFor(model => model.EndsAfterValue, new {id="txtBoxEndsAfterValue" })
     @Html.MyValidationMessageFor(model => model.EndsAfterValue)

    @Html.EditorFor(model => model.EndsByDate)

    <input type="submit" class="btn btn-primary" value="Save" id="btnsubmit" />
   <input type="button" class="btn btn-primary btnCancelAvailability" id="0" value="Cancel">

    }

 <script>
    function AddAvailabilitySuccess()
    {
    alert("Record updated successfully!");
    }
    </script>

我有一种方法可以做到这一点，使用ViewBag。

你必须在你的控制器中添加:

if (ModelState.IsValid)
        {
            db.TAUX.Add(taux);
            db.SaveChanges();
            ViewBag.SuccessMsg = "successfully added";
            return RedirectToAction("Index");
        }

然后在Index视图中:

@{
    var message = ViewBag.SuccessMsg;
}
<script type="text/javascript">
    var message = '@message';
    if(message){
        alert(message);
    }
</script>

最后你使用JavaScript与MVC ViewBag混合:)

相关文章：