Modal Dialog box in MVC3 Razor

Home » jQuery DialogBox » Modal Dialog box in MVC3 Razor

Modal Dialog box in MVC3 Razor

Posted by 20Fingers2Brains on Tags: jQuery DialogBox

In this article we will see how to render Model Dialog box.
A modal dialog prevents the user from interacting with the rest of the page until it is closed.

Following are the steps :

View :

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

<h2>Index</h2>

<div id="dialog" title="jQuery Dialog"><p>Hello World !!</p><p>This is jQuery DialogBox !!</p></div>


<script type="text/javascript">
    $(function () {
        $("#dialog").dialog({
            height: 200,
            modal: true
        });
    });
</script>

In the view, we have referenced Layou which have script files reffered needed to render Dialog box. We have set modal property to true to render the modal dialog box. We have also set the height attribute.

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>

We have included the jQuery references needed to render Dialog Box.

Demo :

In the above demo, unless you close the modal you won't be able to access or click other elements of screen.

Thus following the above steps we can achieve rendering Modal dialog box.