My solution for replacing the confirm (ajaxOptions) by a jQuery dialog

Question

In my application I have a table with items. I can delete each item from my table with a delete button. On this button I do an ajax post. I can as the user confirm his action thanks to the ajaxOptions confirm attribute. But this produces an ugly message box. So I developed my own solution to replace this ugly message box by a jQuery dialog.

Below is the solution I developed. This is a generic solution which can be used anywhere I need it.

First, the custom helper.

    public static IHtmlString ConfirmationLink(this HtmlHelper htmlHelper, string actionName, object routeValues, object htmlAttributes, string dialogId, string dialogTitle, string dialogMessage, string dialogButtonConfirm, string dialogButtonCancel, string dialogSuccess)
    {
        var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext); 

        TagBuilder builder = new TagBuilder("a");

        builder.Attributes.Add("href", urlHelper.Action(actionName, routeValues).ToString());
        builder.Attributes.Add("data-dialog-id", dialogId);
        builder.Attributes.Add("data-dialog-title", dialogTitle);
        builder.Attributes.Add("data-dialog-message", dialogMessage);
        builder.Attributes.Add("data-dialog-button-confirm", dialogButtonConfirm);
        builder.Attributes.Add("data-dialog-button-cancel", dialogButtonCancel);
        builder.Attributes.Add("data-dialog-success", dialogSuccess);

        if (htmlAttributes != null)
            builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));

        builder.AddCssClass("confirmation-link");

        return new HtmlString(builder.ToString());
    } 

Next, the javascript code associated:

$().ready(function () {

$('.confirmation-link').click(function () {

    var title = $(this).attr('data-dialog-title');
    var message = $(this).attr('data-dialog-message');
    var buttonConfirm = $(this).attr('data-dialog-button-confirm');
    var buttonCancel = $(this).attr('data-dialog-button-cancel');
    var success = $(this).attr('data-dialog-success');
    var href = $(this).attr('href');
    var icon = '<span class="ui-icon ui-icon-alert" style="float:left; margin:2px 15px 20px 0;"/>';
    var $dialog = $('<div title=' + title + '></div>').html('<p>' + icon + message + '</p>');

    // Configure buttons
    var dialogButtons = {};

    dialogButtons[buttonConfirm] = function () {
        $.ajax({
            type: "Post",
            url: href,
            cache: false,
            success: function (data) { var func = success; window[func](data); }
        });
        $(this).dialog("close");
    };

    dialogButtons[buttonCancel] = function () {
        $(this).dialog("close");
    };

    // Passing the target url (controller/action/id) to the dialog
    $dialog.data('href', href);
    $dialog.data('success', success);

    // Configure dialog
    $dialog.dialog(
        {
            modal: true,
            closeOnEscape: true,
            resizable: false,
            buttons: dialogButtons
        });

    // Opening dialog
    $dialog.dialog('open');

    // prevents the default behaviour
    return false;

});

})

How to use it?

@Html.ConfirmationLink(actionName: "RemoveMaterial",
                       routeValues: new { transportedMaterialId = item.TransportedMaterialID },
                       htmlAttributes: new { @class = "MaterialRemove" },
                       dialogId: "RemoveMaterialConfirmation",
                       dialogTitle: "Confirmation",
                       dialogMessage: @UserResource.MaterialRemoveConfirmation,
                       dialogButtonConfirm: @UserResource.ButtonDeleteMaterial,
                       dialogButtonCancel: @UserResource.ButtonCancel,
                       dialogSuccess: "RemoveMaterialSuccessfully")

It works but I would like your advice: is it a good solution? Does something exist that's better to use? Any remarks are welcome. I'm considering myself still as novice with asp.net mvc & jQuery.

The scenario is as follow:

• User click on the anchor link (here a button with delete icon)
• The jquery dialog is showed to the user to confirm or cancel
• if confirm then post action

Thanks.

Answer 1

One thing to improve upon would be caching your jquery object. EG:

var title = $(this).attr('data-dialog-title');
var message = $(this).attr('data-dialog-message');
var buttonConfirm = $(this).attr('data-dialog-button-confirm');
var buttonCancel = $(this).attr('data-dialog-button-cancel');
var success = $(this).attr('data-dialog-success');
var href = $(this).attr('href');

Would become:

var obj = $(this);
var title = obj.attr('data-dialog-title');
var message = obj.attr('data-dialog-message');
var buttonConfirm = obj.attr('data-dialog-button-confirm');
var buttonCancel = obj.attr('data-dialog-button-cancel');
var success = obj.attr('data-dialog-success');
var href = obj.attr('href');