Mi solución para reemplazar la confirmación (ajaxOptions) por un diálogo de jQuery

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.

enter image description here

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));


        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 () {
            type: "Post",
            url: href,
            cache: false,
            success: function (data) { var func = success; window[func](data); }

    dialogButtons[buttonCancel] = function () {

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

    // Configure dialog
            modal: true,
            closeOnEscape: true,
            resizable: false,
            buttons: dialogButtons

    // Opening dialog

    // prevents the default behaviour
    return false;



Complemento Carta Porte

@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.

El escenario es el siguiente:

  • 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


preguntado el 10 de marzo de 12 a las 13:03

1 Respuestas

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');

Se convertiría:

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');

respondido 10 mar '12, 17:03

@Bronzato Yes, it would be performing a lookup on the dom element, once and re-using it vs, performaing a lookup 6 times. - Jesse

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.