In this article I will explain with an example, how to display MessageBox using JavaScript in ASP.Net MVC.
Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
 
 

Model

The Model class consists of following properties.
public class PersonModel
{
    public string Name { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
}
 
 

Controller

The Controller consists of following Action methods.

Action method for handling GET operation

Inside this Action method, simply the View is returned.
 

Action method for handling POST operation

Inside this Action method, a Success Message is set in the ViewBag object and returned to the Index View.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public ActionResult Submit()
    {
        ViewBag.Message = "Your details have been saved successfully.";
        return View("Index");
    }
}
 
 

View

HTML Markup

Inside the View, in the very first line the PersonModel class is declared as Model for the View.
The View consists of HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case it is Submit.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The Form consists of three TextBoxes created using Html.TextBoxFor Html Helper method and a Submit Button.
 

Submitting the Form

When the Submit Button is clicked, the ViewBag object is checked for NULL and if it is not NULL, then the value of the ViewBag object is displayed using JavaScript Alert MessageBox.
@model Display_MessageBox_JavaScript_MVC.Models.PersonModel
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    @using (Html.BeginForm("Submit", "Home", FormMethod.Post))
    {
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>Name: </td>
                <td>@Html.TextBoxFor(m => m.Name)</td>
            </tr>
            <tr>
                <td>City: </td>
                <td>@Html.TextBoxFor(m => m.City)</td>
            </tr>
            <tr>
                <td>Country: </td>
                <td>@Html.TextBoxFor(m => m.Country)</td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="Save" /></td>
            </tr>
        </table>
    }
    @if (ViewBag.Message != null)
    {
        <script type="text/javascript">
            window.onload = function () {
                alert("@ViewBag.message");
            };
        </script>
    }
</body>
</html>
 
 

Screenshot

ASP.Net MVC: Display MessageBox using JavaScript
 
 

Browser Compatibility

The above code has been tested in the following browsers.
Microsoft Edge  FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 

Demo

View Demo
 
 

Downloads

Download Code


Other available versions