You may use the modal dialogs of Bootstrap - see description here:
Bootstrap JS Modal Reference[
^]
Or you can build your own simple dialogs by setting some session properties in the controller's action method which requires the message like this:
Session.Add("MessageBox", "This is my message text");
Session.Add("MessageBoxWidth", "300px");
Session.Add("MessageBoxHeight", "130px");
In the action method that displays the next view (may be the same as before) translate the session properties to viebag like this:
if(Session["MessageBox"] != null)
{
ViewBag.MessageBox = Session["MessageBox"];
ViewBag.MessageBoxWidth = Session["MessageBoxWidth"];
ViewBag.MessageBoxHeight = Session["MessageBoxHeight"];
Session.Remove("MessageBox");
}
Note that the session property is removed to show the messae only once!
In your shared layout add the following lines:
@if (ViewBag.MessageBox != null)
{
<div id="MessageBox" style="width:@ViewBag.MessageBoxWidth;height:@ViewBag.MessageBoxHeight;" class="messagebox">
<br />
@ViewBag.MessageBox
<br />
<br />
<input type="image" src="@Url.Content("~/Content/Images/ok_32.png")" title="OK" onclick="hideMessageBox();" class="btn btn-default" />
</div>
<script type="text/javascript">
function hideMessageBox() {
document.getElementById('MessageBox').style.visibility = 'hidden';
}
</script>
}
...and replace the 'OK_32.png' by your own image for 'OK' or replace the
img
tag with the simple text 'OK'.
That's it!