Telerik MVC : Creating Standard MessageBox Dialogs

Written by John DeVight on 11 May 2011 13:56
Last Updated by John DeVight on 25 Jun 2011 02:44

Download RAZOR Samples Project
ASPX Samples Project Coming Soon…
* Note: the Telerik.Web.Mvc.dll, Telerik "Contents" and Telerik "Scripts" have all been removed to reduce the zip file size

Overview

I am developing an application where I want to be able to keep a consistent look-and-feel for "standard" messagebox dialogs. I am working with Telerik MVC, so using the Telerik Window Extension, I created standard Alert, Wait, Confirm and OK/Cancel dialogs.

Creating the Files Needed

In the ASP.NET MVC 3 Web Application\Shared\Partial folder, create a partial view called MessageBoxDialogs.cshtml.
In the ASP.NET MVC 3 Web Application\Scripts folder, create a jscript file called MessageBoxDialogs.js.

At the end of the MessageBoxDialogs.cshtml file, I added the following code:

@{
    Html.Telerik().ScriptRegistrar()
        .Scripts(scripts =>
            scripts.AddGroup("MessageBoxDialogs", group =>
                group.Add("~/Scripts/Shared/MessageBoxDialogs.js")
            )
        );
}

In the MessageBoxDialogs.js file, I added the following code:

var MessageBoxDialogs = {};

MessageBoxDialogs.ErrorIcon = _rootUrl + 'Content/images/icon-error.gif';
MessageBoxDialogs.InfoIcon = _rootUrl + 'Content/images/icon-info.gif';
MessageBoxDialogs.QuestionIcon = _rootUrl + 'Content/images/icon-question.gif';
MessageBoxDialogs.WarningIcon = _rootUrl + 'Content/images/icon-warning.gif';
MessageBoxDialogs.LoadingIcon = _rootUrl + 'Content/images/ajax-loader.gif';

Note: _rootUrl is defined in my Layout.cshtml page as:

<script type="text/javascript">
    var _rootUrl = "@Url.Content("~")";
</script>

Creating the Alert Dialog

In the MessageBoxDialogs.cshtml partial view I added the following code:

@{Html.Telerik().Window()
    .Name("AlertDialog")
    .Title("My Application")
    .Content(
        @<text>
            <div class="panelContent">
                <div class="tableRow">
                    <div class="tableColumn" style="width:50px; display:inline-block;">
                        <img alt="Alert Dialog Image" id="AlertDialog_Image" />
                    </div>
                    <div id="AlertDialog_MessageColumn" class="tableColumn" style="max-width:240px; display:inline-block;">
                        <span id="AlertDialog_Message"></span>
                    </div>
                </div>
                <div id="AlertDialog_ButtonRow" class="tableButtonRow" style="width:290px;">
                    <div class="tableColumn" style="width:100%; text-align:center;">
                        <button id="OkButton" onclick="AlertDialog.OkButton_OnClick(); return false;">OK</button>
                    </div>
                </div>
            </div>
        </text>
    )
    .Height(100)
    .Width(300)
    .Draggable(false)
    .Resizable(resizing => resizing.Enabled(false))
    .Visible(false)
    .Modal(true)
    .Effects(fx => fx.Zoom())
    .Render();
}

In the MessageBoxDialogs.js javascript file I added the following code:

var AlertDialog = {};

// Settings passed into the dialog.
AlertDialog._settings = null;

/// <summary>
/// Show the AlertDialog.
/// <summary>
/// <param name="settings" type="JSON object">
/// Contains all the settings for the dialog.  Settings are:
///     - message [Required] : Message to be displayed to the user.
///     - icon [Required] : MessageBoxDialogs.xyz where xyz represents one of the icon types listed above.
// </param>
AlertDialog.ShowWindow = function(settings) {
    AlertDialog._settings = settings;

    $('#AlertDialog_Image').attr("src", AlertDialog._settings.icon);
    $('#AlertDialog_Message').text(AlertDialog._settings.message);

    // Open the dialog.
    var wnd = $('#AlertDialog').data('tWindow');
    wnd.center().open();
}

AlertDialog.OkButton_OnClick = function() {
    var wnd = $('#AlertDialog').data('tWindow');
    wnd.close();
}

To use the AlertDialog, I call the AlertDialog.ShowWindow function and pass in the appropriate settings. For example:

AlertDialog.ShowWindow({ message: "Message goes here", icon: MessageBoxDialogs.InfoIcon });

Creating the Wait Dialog

In the MessageBoxDialogs.cshtml partial view I added the following code:

@{Html.Telerik().Window()
    .Name("WaitDialog")
    .Title("My Application")
    .Content(
        @<text>
            <div class="panelContent">
                <div class="tableRow">
                    <div class="tableColumn" style="width:50px;">
                        <img alt="Wait Dialog Image" id="WaitDialog_Image" />
                    </div>
                    <div id="WaitDialog_MessageColumn" class="tableColumn" style="max-width:240px;">
                        <span id="WaitDialog_Message">Please wait...</span>
                    </div>
                </div>
            </div>
        </text>
    )
    .Height(50)
    .Width(200)
    .Draggable(false)
    .Resizable(resizing => resizing.Enabled(false))
    .Visible(false)
    .Modal(true)
    .Effects(fx => fx.Zoom())
    .Render();
}

In the MessageBoxDialogs.js javascript file I added the following code:

var WaitDialog = {};

// Settings passed into the dialog.
WaitDialog._settings = null;

/// <summary>
/// Show the WaitDialog.
/// <summary>
/// <param name="settings" type="JSON object">
/// Contains all the settings for the dialog.  Settings are:
///     - message [Required] : Message to be displayed to the user.
// </param>
WaitDialog.ShowWindow = function(settings) {
    WaitDialog._settings = settings;

    $('#WaitDialog_Image').attr("src", MessageBoxDialogs.LoadingIcon);
    $('#WaitDialog_Message').text(WaitDialog._settings.message);

    var wnd = $('#WaitDialog').data('tWindow');
    wnd.center().open();
}

WaitDialog.CloseWindow = function() {
    var wnd = $('#WaitDialog').data('tWindow');
    wnd.close();
}

To use the WaitDialog, I call the WaitDialog.ShowWindow function and pass in the appropriate settings. For example:

WaitDialog.ShowWindow({ message: "Message goes here" });

// Some code goes here

WaitDialog.CloseWindow();

Creating the Confirm Dialog

In the MessageBoxDialogs.cshtml partial view I added the following code:

@{Html.Telerik().Window()
    .Name("ConfirmDialog")
    .Title("My Application")
    .Content(
        @<text>
            <div class="panelContent">
                <div class="tableRow">
                    <div class="tableColumn" style="width:50px;">
                        <img alt="Confirm Dialog Image" id="ConfirmDialog_Image" />
                    </div>
                    <div id="ConfirmDialog_MessageColumn" class="tableColumn" style="max-width:240px;">
                        <span id="ConfirmDialog_Message"></span>
                    </div>
                </div>
                <div id="ConfirmDialog_ButtonRow" class="tableButtonRow" style="width:290px;">
                    <div class="tableColumn" style="width:100%; text-align:center;">
                        <button id="YesButton" onclick="ConfirmDialog.Button_OnClick('Yes'); return false;">Yes</button>
                        <span style="width:5px;">&nbsp;</span>
                        <button id="NoButton" onclick="ConfirmDialog.Button_OnClick('No'); return false;">No</button>
                    </div>
                </div>
            </div>
        </text>
    )
    .Height(100)
    .Width(300)
    .Draggable(false)
    .Resizable(resizing => resizing.Enabled(false))
    .Visible(false)
    .Modal(true)
    .Effects(fx => fx.Zoom())
    .Render();
}

In the MessageBoxDialogs.js javascript file I added the following code:

var ConfirmDialog = {};

// Settings passed into the dialog.
ConfirmDialog._settings = null;

/// <summary>
/// Show the ConfirmDialog.
/// <summary>
/// <param name="settings" type="JSON object">
/// Contains all the settings for the dialog.  Settings are:
///     - message [Required] : Message to be displayed to the user.
///     - icon [Optional] : MessageBoxDialogs.xyz where xyz represents one of the icon types listed above.
///     - callback [Optional] : the function that gets called when the dialog is closed.</param>
// </param>
ConfirmDialog.ShowWindow = function(settings) {
    ConfirmDialog._settings = settings;

    $('#ConfirmDialog_Image').attr("src", ConfirmDialog._settings.icon == null 
        ? MessageBoxDialogs.QuestionIcon 
        : ConfirmDialog._settings.icon);
    $('#ConfirmDialog_Message').text(ConfirmDialog._settings.message);

    // Open the dialog.
    var wnd = $('#ConfirmDialog').data('tWindow');
    wnd.center().open();
}

ConfirmDialog.Button_OnClick = function(button) {
    var wnd = $('#ConfirmDialog').data('tWindow');
    wnd.close();

    if (ConfirmDialog._settings.callback != null) {
        ConfirmDialog._settings.callback.call(this, { result: button });
    }
}

To use the ConfirmDialog, I call the ConfirmDialog.ShowWindow function and pass in the appropriate settings. For example:

// Display a confirm dialog that executes a callback function to display an alert dialog with the choice that the user made.
ConfirmDialog.ShowWindow({
    message: "Do you want to save?", 
    callback: function(response) {
        AlertDialog.ShowWindow({ message: "You clicked on: " + response.result, icon: MessageBoxDialogs.InfoIcon });
    }
});

Creating the OK/Cancel Dialog

In the MessageBoxDialogs.cshtml partial view I added the following code:

@{Html.Telerik().Window()
    .Name("OkCancelDialog")
    .Title("My Application")
    .Content(
        @<text>
            <div class="panelContent">
                <div class="tableRow">
                    <div class="tableColumn" style="width:50px;">
                        <img alt="OK Cancel Dialog Image" id="OkCancelDialog_Image" />
                    </div>
                    <div id="OkCancelDialog_MessageColumn" class="tableColumn" style="max-width:240px;">
                        <span id="OkCancelDialog_Message"></span>
                    </div>
                </div>
                <div id="OkCancelDialog_ButtonRow" class="tableButtonRow" style="width:290px;">
                    <div class="tableColumn" style="width:100%; text-align:center;">
                        <button id="OkCancelDialog_OkButton" onclick="OkCancelDialog.Button_OnClick('OK'); return false;">OK</button>
                        <span style="width:5px;">&nbsp;</span>
                        <button id="OkCancelDialog_CancelButton" onclick="OkCancelDialog.Button_OnClick('Cancel'); return false;">Cancel</button>
                    </div>
                </div>
            </div>
        </text>
    )
    .Height(100)
    .Width(300)
    .Draggable(false)
    .Resizable(resizing => resizing.Enabled(false))
    .Visible(false)
    .Modal(true)
    .Effects(fx => fx.Zoom())
    .Render();
}

var OkCancelDialog = {};

// Settings passed into the dialog.
OkCancelDialog._settings = null;

/// <summary>
/// Show the OkCancelDialog.
/// <summary>
/// <param name="settings" type="JSON object">
/// Contains all the settings for the dialog.  Settings are:
///     - message [Required] : Message to be displayed to the user.
///     - icon [Optional] : MessageBoxDialogs.xyz where xyz represents one of the icon types listed above.
///     - callback [Optional] : the function that gets called when the dialog is closed.</param>
// </param>
OkCancelDialog.ShowWindow = function(settings) {
    OkCancelDialog._settings = settings;

    $('#OkCancelDialog_Image').attr("src", OkCancelDialog._settings.icon == null 
        ? MessageBoxDialogs.QuestionIcon 
        : OkCancelDialog._settings.icon);
    $('#OkCancelDialog_Message').text(OkCancelDialog._settings.message);

    // Open the dialog.
    var wnd = $('#OkCancelDialog').data('tWindow');
    wnd.center().open();
}

/// <summary>
/// Event handler for when the OK or Cancel button is clicked.
/// <summary>
/// <param name="button" type="string">"OK" if the OK button was clicked, "Cancel" if the Cancel button was clicked.</param>
OkCancelDialog.Button_OnClick = function(button) {
    var wnd = $('#OkCancelDialog').data('tWindow');
    wnd.close();

    if (OkCancelDialog._settings.callback != null) {
        OkCancelDialog._settings.callback.call(this, { result: button });
    }
}

To use the OkCancelDialog, I call the OkCancelDialog.ShowWindow function and pass in the appropriate settings. For example:

// Display an ok/cancel dialog that executes a callback function to display an alert dialog with the choice that the user made.
OkCancelDialog.ShowWindow({
    message: "There are changes that have not been saved.  Are you sure you want to exit?", 
    icon: MessageBoxDialogs.WarningIcon, 
    callback: function(response) {
        AlertDialog.ShowWindow({ message: "You clicked on: " + response.result, icon: MessageBoxDialogs.InfoIcon });
    }
});

References

Telerik Extensions for MVC: http://demos.telerik.com/aspnet-mvc/razor
HTML Layout with DIV Tags Instead of Tables

Support ASP.NET Wiki

If you like this page, click on the "Share on" links in the wikidot toolbar at the top of the page to share it with your friends.

Comments

Hide All Comments | Unfold All | Fold All

Fold

Ren (guest) 17 Jun 2011 23:04

Thank you for posting this! Nice work

Reply | Options

Unfold by

Ren (guest), 17 Jun 2011 23:04

Fold

John DeVight 18 Jun 2011 02:40

You're welcome! Let me know if you have any questions or have other topics you are interested in seeing on this site.

John DeVight
Telerik MVP

Reply | Options

Unfold by

John DeVight, 18 Jun 2011 02:40

Fold

yurivan (guest) 24 Jun 2011 22:44

please, your source code.

Reply | Options

Unfold by

yurivan (guest), 24 Jun 2011 22:44

Fold

John DeVight 25 Jun 2011 02:36

Certainly! I've uploaded a sample project that demonstrates using the dialogs and attached it to this article. Here is the direct link as well: http://www.aspnetwiki.com/local--files/telerik-mvc:creating-generic-messagebox-dialogs/TelerikMvcDialogsRazor.zip

John DeVight
Telerik MVP

Reply | Options

Unfold by

John DeVight, 25 Jun 2011 02:36

Fold

yurivan (guest) 25 Jun 2011 08:17

Thank you !

Reply | Options

Unfold by

yurivan (guest), 25 Jun 2011 08:17

Fold

yurivan (guest) 25 Jun 2011 08:26

John, I've seen you made some examples with telerik tab but I call has been partially possible with a direct view as with the examples of ExtJS, because the truth I've been trying to do and I have not succeeded. thank you very much beforehand. and sorry for my bad English.

Last edited on 25 Jun 2011 08:49 by Anonymous (190.234.155.x) + Show more

Reply | Options

Unfold by

yurivan (guest), 25 Jun 2011 08:26

Fold

John DeVight 25 Jun 2011 14:33

I would really like to help you solve the problem you are having. Would you be able to post some sample code so that I can see what the problem is?

You can also send me your email address using the email form at: http://www.aspnetwiki.com/interested-topic so that I can provide you with my email address, and you can send me some sample code.

Yo gustaría realmente a le ayudar resuelve el problema usted son tener.
¿Pegaría usted ser capaz a algún código de muestreo para que yo poder ver qué el problema es?

Usted puede enviar también me su email dirección usando la email la forma a : http://www.aspnetwiki.com/interested-topic
para que yo le poder proveer con mi email dirección, y usted puede me enviar algún código de muestreo.

translated at www.worldconceptsinc.com

John DeVight
Telerik MVP

Last edited on 25 Jun 2011 14:42 by John DeVight + Show more

Reply | Options

Unfold by

John DeVight, 25 Jun 2011 14:33

Fold

Yurivan 25 Jun 2011 23:24

Thanks John for answering, now I'm working on a code that then rise. I really want to get is this behavior in my application mvc 3 with razor. I leave the link so you can see http://mvc.ext.net/ … try it with those following your own library ExtJS examples but these libraries do not fit razor, so I decided to do with telerik because it is a framework that fairly dominated. Thanks for your interest in my problem.

Reply | Options

Unfold by

Yurivan, 25 Jun 2011 23:24

Fold

Bill (guest) 11 Jan 2012 21:19

Excellent work John and a sincere thank you for a job well done and for sharing. I have incorporated this into my current mvc3 project framework.

I have a few things I noticed for those who are reading and incorporating this work into their projects. The files may have changed a bit after John posted, so you shouldn't need to worry about the _rootUrl variable. The message for the Confirm Dialog button is wrong, but can be easily corrected in the Index.cshtml file. I may have missed it above, but you need to add the following to your layout.cshtml OR to each view that uses the dialogs: @Html.Partial("_MessageBoxDialogs"). And if you want to remove the close button on the Wait diaolog, you can add the following to your Telerik window declaration.
.Buttons(b => b
.Clear()
)

Thanks again.

Reply | Options

Unfold by

Bill (guest), 11 Jan 2012 21:19

Add a New Comment

Page tags: asp.net dialog html javascript jquery messagebox mvc razor telerik view

page revision: 8, last edited: 25 Jun 2011 02:44

Edit Rate (0)Tags Discuss (9) History Files Print Site tools + Options

ASP.NET Wiki

Practical Solutions for ASP.NET Developers

Page Tags

Overview

Creating the Files Needed

Creating the Alert Dialog

Creating the Wait Dialog

Creating the Confirm Dialog

Creating the OK/Cancel Dialog

References

Support ASP.NET Wiki

Comments

Post preview:

Other interesting sites

Lapidaria

Julio Beltrán

Data Structures

Dragon Trees

	or Sign in as Wikidot user
	(will not be published)