MVC ViewData update visibility by timer

Question

Now I have a ViewData["status"] at View and will be displayed when user click on the "SAVE" button as shown below:

<tr>
    @if (ViewData["status"] == null || ViewData["status"] == "")
    {
    }
    else {
        <td colspan="2" style="color:red; font-weight:bold;">
            @ViewData["status"]
        </td>
    }
</tr>

Now that after user click the save button, the string in ViewData["status"] can be shown permanently. Is there any way to let it show for 2 seconds and dissapear?

Answer 1

You'll need javascript for this. jQuery would be ideal.

1. Give your <td> element an ID.
2. On page load, start a timer of 2 seconds.
3. When the timer finishes, hide the element.

<td colspan="2" style="color:red; font-weight:bold;" id="status">
    @ViewData["status"]
</td>

<script type="text/javascript">
    // this function requires jQuery

    $(function () {
        setTimeout(function () {
            $("#status").hide();
        }, 2000);
    });
</script>

You could also fade-out the element so that the hide effect is a smooth transition.