Dynamic jQuery DialogBox in MVC3 Razor with animation

Home » jQuery DialogBox » Dynamic jQuery DialogBox in MVC3 Razor with animation

Dynamic jQuery DialogBox in MVC3 Razor with animation

Posted by 20Fingers2Brains on Tags: jQuery DialogBox

In this article we will see how to render a Dynamic jQuery DialogBox.
The Dialogbox will open on button click.
We have applied animation while opening and closing of DialogBox.
Dialogs may be animated by specifying an effect for the show and/or hide properties. You must include the individual effects file for any effects you would like to use.
We have used the jQuery Dialogbox in MVC3 Razor.

Following are the setps :

View :

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

<h2>Index</h2>
<input type="button" id="opener" value="Open Dialog" />
<div id="dialog" title="jQuery Dialog"><p>Hello World !!</p><p>This is jQuery DialogBox !!</p></div>


<script type="text/javascript">
    $.fx.speeds._default = 1000;
    $(function () {
        $("#dialog").dialog({
            autoOpen: false,
            show: "blind",
            hide: "explode"
        });

        $("#opener").click(function () {
            $("#dialog").dialog("open");
            return false;
        });
    });
</script>

In the View we have referred the Layout. This layout contains reference to the jQuery script files needed for jQuery DialogBox and animation. We have created a button with id attribute as opener. On click of this button, the Dialog box is opened. We have set the autoOpen attribute to false, so that Dialog box is not open by default. We have used blind animation while showing and explode animation while hiding the DialogBox.

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>
    <script src="@Url.Content("~/Scripts/jquery.ui.effect-blind.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.effect-explode.min.js")" type="text/javascript"></script>
</head>

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

The above layout file contains references of script files required to render jQuery dialog box and animations performed on it.

Demo :

In the above demo, when you click the button the dialog box opens. We have applied animation to dialog box. The animation is performed while opening and closing of Dialog box.

Thus following the above steps we can use Dialog box in MVC3 Razor and use various animations on it.