jQuery DialogBox in MVC3 Razor

Home » jQuery DialogBox » jQuery DialogBox in MVC3 Razor

jQuery DialogBox in MVC3 Razor

Posted by 20Fingers2Brains on Tags: jQuery DialogBox

In this article we will see how to use jQuery DialogBox to render a Dialog Box.
The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.
We have used jQuery Dialogbox in MVC3 Razor application.

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();
    });
</script>

In the view, we have included reference of Layout where we have included all the reference of jQuery script files. We have created a div with id dialog. In the script section, we have selected the div element using id selector and used dialog function to render the dialog box.

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>
</head>


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

The above is the Layout file. We need to include above jQuery script files to achieve jQuery Dialogbox rendering.

Demo :

Thus following the above steps we can render the Dialog box successfully in MVC3 Razor.