TempInfoBox Tutorial

This tutorial illustrates the use of the TempInfoBox HtmlHelper than can be found in the DigitallyCreated.Utilities.Mvc assembly. The TempInfoBox extension method can be found in the EyeCandyHtmlHelpers class. The tutorial assumes you are familiar with C#, JavaScript, ASP.NET MVC, and jQuery.

The TempInfoBox is a box that appears when the page loads, notifies the user about the result of some action, then after five seconds, it disappears.

(See this page for a live demonstration)

A TempInfoBox is very easy to use. Here's an example of its use:

In your Controller
public ActionResult Save(MyEntity entityToSave)

    //Set the signal for TempInfoBox
    TempData["MyController.MyEntitySaved"] = true;

    //Redirect to the GET version of this action method (redisplay the form)
    return RedirectToAction("Save", new { id = entityToSave.Id });

In your View
<%= Html.TempInfoBox("Entity successfully saved.", TempInfoBoxType.Success, "MyController.MyEntitySaved") %>

In the example above, the action method that receives the form submit in the controller, performs a business operation and then sets an entry in TempData to boolean true (the actual object that it is set to is irrelevant, the entry just must be set). It then redirects to the View. On the View, the TempInfoBox HtmlHelper has been called. The first argument is the text to display. The second is the type of temp info box (there are four: Success, Warning, Error, Info). The third is the key of the entry that was set in TempData. If that Key is present (its value is ignored), the HtmlHelper will emit the following (if it isn't present, it won't emit anything at all):

<div class="TempInfoBox SuccessBox" id="GUID67f2d63a4ede4e96acffc402efed22bd"><p>Entity successfully saved.</p></div>
<script type="text/javascript">jQuery(function() { setTimeout(function() { $("#GUID67f2d63a4ede4e96acffc402efed22bd").fadeOut("slow"); }, 5000); });</script>

The GUID-based ID that is set on the div is random, and will be different every single time, so do not rely on it. The div will always have the TempInfoBox class, and it will have one of "SuccessBox", "WarningBox", "ErrorBox", and "InfoBox" as a second class depending on which TempInfoBoxType you chose. As you can see, a snippet of JavaScript is also emitted that uses jQuery to fade the box out 5 seconds after the page has loaded.

As you can see, the TempInfoBox is completely unstyled. It is up to you to utilise CSS and the classes set on it and style it. You are welcome to copy the styles and images used on the demonstration page.

Last edited Mar 23, 2010 at 6:15 AM by dchambers, version 4


No comments yet.