Display Alert Message: On OK button click RedirectToAction

Question

I am trying to display a successful/unsuccesful message after attempting a stored procedure. My Save ActionResult is called on Save button click - however before I redirect back to the index I want to display a message box. Is there a way to return a view first, and then RedirectToAction?

Save button points to:

 [HttpPost]
    public ActionResult Save(string submit, Models.KnownIssues knownIssue)
    {           

        UpdateKnownIssue(knownIssue);
        InsertKnownIssue(knownIssue);


        return RedirectToAction("Index");

    }

The viewbag alerts:

    public ActionResult Edit(KnownIssues knownIssue, string submit)
    {
        if (UpdateKnownIssue(knownIssue))
        {
            ViewBag.ShowAlert = "<script>alert('Successfully Edited');  window.location.href = '/KnownIssues';</script>";
        } else
        {
            ViewBag.ShowAlert = "<script>alert('Unseccessful. Try again.');</script>";
        }
        return View(knownIssue);
    }

Answer 1

Try this:

return RedirectToAction("Index", "Home", new { ac = "success" });

In the index view do (NB: Am using bootstrap alerts):

@{
    var parameter = Request.QueryString["ac"];
    //Check parameter here and display Message
    if (parameter == "success")
    {
      <div class="alert alert-success alert-dismissable">
          <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
          <strong><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Record Added Successfully.</strong>
      </div>
    }
}

EDIT:

A better approach may be to use TempData, especially if you do not want a variable in the url.

You can set the TempData in the controller like:

TempData["SuccessMessage"] = "Your Success Message";

And in the view display the message by checking if there is anything in the TempData:

@if (TempData["SuccessMessage"] != null)
 {
    <div class="alert alert-success alert-dismissable">
         <strong>@TempData["SuccessMessage"]</strong>
    </div>
 }

Answer 2

You can convert your form submit to be an ajax form submit and return a JSON response back from your action method. In your ajax call's success event, you can show the message to user and then do a redirect using javascript.

You can use the below jQuery code to ajaxify your form submit.

$(function() {

    $("form").submit(function(e) {
        e.preventDefault();
        var f = $(this);
        $.post(f.attr("action"), f.serialize(),function(res) {
            if(res.Status==="success")
            {
               alert(res.Message);
               window.location.href="your new url here";
            }
        });
    });

});

and have your action method updated to return json response

[HttpPost]
public ActionResult Save(string submit, Models.KnownIssues knownIssue)
{
    // your code 
    if (Request.IsAjaxRequest())
    {
       return Json(new {Status = "success", Message="Succesfully updated"});
    }
    return RedirectToAction("Index");
}

Another option is to Show the message on the next page. For this, you can use your current form submit approach (no need of ajax) and use TempData to store the message. In the next action method, read the TempData in the view and show the message to user. Take a look at the below post for sample code

Display message in a toastr after controller method finish