ASP.NET MVC: How to display success confirmation message after server-side processing

Question

I have a requirement to display a message confirming a successful database update in an ASP.NET MVC application. Currently the application only shows messages (using a ValidationSummary helper) when an error occurs. On a successful operation, the application currently redirects to a suitable point in the navigation.

Goals are:

Display the confirmation message in an appropriate way
Minimise user actions required to proceed after reading message
Avoid an extra post / round-trip to display the message
Minimise development effort and risk inserting a message at multiple points in the application

My preference would be some sort of tool-tip type message display near the submit button and then a mechanism for removing the message and proceeding with the existing redirection after success.

That seems to suggest an Ajax call rather than the existing HTTP POST to submit the form. How would I go about this?

SimonGates · Accepted Answer · 2020-06-07 17:41:08Z

62

I Would use TempData["key"]

This is like ViewData["key"] however the data persists for the next HttpRequest and is disposed automatically by asp.net after this

So you can do this.

Controller Action

[HttpPost]
public ActionResult SomePostAction(SomeViewModel vm)
{
   if(ModelState.IsValid) // Is User Input Valid?
   {
       try
       {
           CommitData();
           TempData["UserMessage"] = new MessageVM() { CssClassName = "alert-sucess", Title = "Success!", Message = "Operation Done." };
           return RedirectToAction("Success");
       }
       catch(Exception e)
       {
           TempData["UserMessage"] =  new MessageVM() { CssClassName = "alert-error", Title = "Error!", Message = "Operation Failed." };
           return RedirectToAction("Error");
       }

   }

   return View(vm); // Return View Model with model state errors
}

_Layout.cshtml

<!DOCTYPE html>
   <html>
     <head>

     </head>
     <body>
      @if(TempData["UserMessage"] != null)
      { 
          var message = (MessageVM)TempData["UserMessage"];
          <div class="alert @message.CssClassName">
               <strong>@message.Title</strong> 
               @message.Message
          </div>
      }
          @RenderBody()
     </body>
</html>

More Info: http://www.devcurry.com/2012/05/what-is-aspnet-mvc-tempdata.html

edited Jun 7, 2020 at 17:41

answered Nov 25, 2012 at 10:47

SimonGates

6,1294 gold badges42 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Paul Taylor Over a year ago

I like this because it gives me the option to show the message on the page to which I redirect after the successful update. If I take this approach, one option would be to show the message in a tooltip type panel that automatically disappears after a predetermined time, requiring no extra user action. It's also low impact in terms of the refactoring required. Thanks!

Tod Over a year ago

I like your answer, my only concern is the redirect to error. This would then stop the user re submitting their post. Or maybe that's the idea? The success sure, stops duplicate responses., but the error might require resubmission.

SimonGates Over a year ago

Hi @Tod I see your point however I think your concerns are more to do with data validation. If there is a problem with the data submitted by the user then this would be handled using ModelState.IsValid and then you can return View(vm) i'll update my answer to be a little clearer.

Tod Over a year ago

I've just started implementing this, why have a user message if you're redirecting to two different actions, and assumedly two different views. Just put the messages on the Views. I am fairly new to MVC and I'm just trying to understand.

Chuck Krutsinger Over a year ago

@TempData["UserMessage"].CssClassName (or . whatever) gives the error that object does not contain a definition for CssClassName. Is there some syntax tweak that would lookup CssClassName?

|

Anand · Accepted Answer · 2012-11-25 07:21:17Z

16

On a successful operation ,you just store the success message description into ViewBag like as

ViewBag.successMessage="Success"

then in view check the ViewBag value is null or not? through javascript ,if not null show the message in Div

if('@ViewBag.successMessage'!="")
{
   $('#divSuccessMessage').show();
} 
else
{
  $('#divSuccessMessage').hide();
}

default in page load hide the div

answered Nov 25, 2012 at 7:21

Anand

1632 bronze badges

1 Comment

Paul Taylor Over a year ago

Thanks, I now see it's more straightforward than I thought. To manage the redirection to another page after displaying the success message, I guess I can add an onclick handler to the message div.

RohitWagh · Accepted Answer · 2012-11-25 06:39:09Z

1

the following links might help you (posting links as it would require better explanation):

http://msdn.microsoft.com/en-us/magazine/ff797575.aspx

http://ofps.oreilly.com/titles/9781449320317/ch_AJAX.html

edited Nov 25, 2012 at 6:39

answered Nov 24, 2012 at 12:39

RohitWagh

2,1073 gold badges24 silver badges43 bronze badges

Comments

Christ A · Accepted Answer · 2019-12-02 22:14:22Z

As others mentioned, TempData is one of the most straight forward options to use. Its main drawback in regular ASP.NET in my opinion is that it uses the session storage in to store its contents. This means that you'll have extra work getting it to function on a web farm, or that you need to turn on sessions in the first place.

TempData is a string based dictionary you can put anything in it, and by default get it out only once on any later request. Before calling RedirectToAction() you set your message and on the next request you check for messages and display them. By retrieving the messages they are automatically deleted at the end of the request.

As an alternative you could use cookies for transporting the message between the two requests. Essentially you could either roll your own solution, or implement a custom ITempDataProvider which transports the contents of TempData via cookies. Given that the messages are short, the performance impact is minimal. Note that you need to properly secure cookies.

I was facing the same problem you did and created a solution for it called FlashMessage. It's available on NuGet. Usage is simple: you simply queue a message before you call RedirectToAction() as follows:

FlashMessage.Confirmation("Your message");
return RedirectToAction("AdminUsers", "Admin");

In your view you include the following statement to render any previously queued messages:

@Html.RenderFlashMessages()

Collectives™ on Stack Overflow

ASP.NET MVC: How to display success confirmation message after server-side processing

4 Answers 4

12 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

12 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related