In this article I will explain with an example, how to display Confirmation Box (Dialog) before Form Submit in ASP.Net MVC Razor.
The JavaScript Confirmation Message Box (Dialog) will be displayed using jQuery by attaching a Submit event handler to the Form.
When the Submit button is clicked, the Confirmation Message Box (Dialog) with OK (Yes) and Cancel (No) buttons will be displayed, if the User clicks OK (Yes) button only then the Form will be submitted and the Controller’s Action method will be called.
 
 
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
 
Inside this Action method, a ViewBag object is set with a string value (message) and the View is returned.
Action method for handling POST operation
The value of the ViewBag object which will be later displayed in View using JavaScript Alert Message Box.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public ActionResult Index(string submit)
    {
        ViewBag.Message = "Form submitted.";
        return View();
    }
}
 
 
View
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
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.
Inside the Form, there’s an HTML TextBox and a Submit Button.
The Form has been assigned a jQuery Submit event handler and inside the event handler, a JavaScript confirm function is called.
When the Submit button is clicked, first the JavaScript Confirmation Message Box (Dialog) is displayed and if the Form is submitted only when User clicks OK (Yes) button.
After Form submission, the message sent from the Controller in ViewBag object is displayed using JavaScript Alert Message Box.
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @id="Form1" }))
    {
        <table>
            <tr>
                <td>Name:</td>
                <td><input type="text" id="txtName"/></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="Submit"/></td>
            </tr>
        </table>
    }
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $("body").on("submit", "#Form1", function () {
            return confirm("Do you want to submit?");
        });
    </script>
    @if (ViewBag.Message != null)
    {
        <script type="text/javascript">
            window.onload = function () {
                alert('@ViewBag.Message');
            };
        </script>
    }
</body>
</html>
 
 
Screenshot
Display Confirmation Box (Dialog) before Form Submit in ASP.Net MVC
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Downloads
Download Code