Modal Dialog box with confirmation in MVC3 Razor

Home » jQuery DialogBox » Modal Dialog box with confirmation in MVC3 Razor

Modal Dialog box with confirmation in MVC3 Razor

Posted by 20Fingers2Brains on Tags: jQuery DialogBox

In this article we will see how to create a Modal Dialog box with confirmation.
We can use this confirmation to notify before performing any critical operations.
We can confirm an action that may be destructive or important. We have set the modal option to true, and specified primary and secondary user actions with the buttons option.

Following are the steps :

View :

@{
    ViewBag.Title = "Index";
    Layout = "../Shared/_Layout.cshtml";
}

<h2>Index</h2>

<div id="dialog" title="jQuery Dialog"><span>Delete All Items !!</span></div>


<script type="text/javascript">
    $(function () {
        $("#dialog").dialog({
            resizable: false,
            height: 140,
            modal: true,
            buttons: {
                "Delete all items": function () {
                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
    });
</script>

In the view we have added reference of layout which contains references of script files. We have created two buttons which will act as a confirmation point. On click of these buttons we can perform various other operations as well.

Layout :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-1.8.3.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.dialog.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.widget.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.bgiframe-2.1.2.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.draggable.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.position.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.resizable.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.effect.min.js")" type="text/javascript"></script>
</head>

<body>
    @RenderBody()
</body>
</html>

The above is the Layout file. We have included the script file reference required to render the Dialog box.

Demo :

Thus we have rendered two buttons. The above dialog box act as a confirmation. We can perform different operation on click of the buttons.

Thus we can use jQuery dialog box to act as confirmatio.