jQuery DialogBox in MVC3 Razor

  1. In this article we will see how to use jQuery DialogBox to render a Dialog Box.
  2. 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.
  3. We have used jQuery Dialogbox in MVC3 Razor application.

Following are the steps :

View :

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


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

<script type="text/javascript">
    $(function () {

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>
    <meta charset="utf-8" />
    <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>


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.


Post a Comment