In this article I will explain with an example, how to display MessageBox using JavaScript in ASP.Net Core MVC (.Net Core).
Note: For beginners in ASP.Net Core (.Net Core 7), please refer my article ASP.Net Core 7: 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 String Message is set in the ViewBag object and returned to the Index View.
public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public IActionResult 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 following TagHelpers attributes.
asp-action – Name of the Action. In this case it is Submit.
asp-controller – Name of the Controller. In this case the name is Home.
method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The Form consists of three HTML INPUT TextBoxes 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_Core.Models.PersonModel
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <form method="post" asp-action="Submit" asp-controller="Home">
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>Name: </td>
                <td><input type="text" asp-for="Name" /></td>
            </tr>
            <tr>
                <td>City: </td>
               <td><input type="text" asp-for="City" /></td>
            </tr>
            <tr>
                <td>Country: </td>
                <td><input type="text" asp-for="Country" /></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="Save" /></td>
            </tr>
        </table>
    </form>   
    @if (ViewBag.message != null)
    {
        <script type="text/javascript">
            window.onload = function () {
                alert("@ViewBag.Message");
            };
        </script>
    }
</body>
</html>
 
 

Screenshot

ASP.Net Core: 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