Мое решение для замены подтверждения (ajaxOptions) на диалоговое окно jQuery

Question

В моем приложении у меня есть таблица с предметами. Я могу удалить каждый элемент из моей таблицы с помощью кнопки удаления. На этой кнопке я делаю пост Ajax. Я могу как пользователь подтвердить свое действие благодаря атрибуту подтверждения ajaxOptions. Но это создает уродливое окно сообщения. Поэтому я разработал свое собственное решение, чтобы заменить это уродливое окно сообщения диалогом jQuery.

Ниже приведено решение, которое я разработал. Это общее решение, которое можно использовать везде, где мне это нужно.

Во-первых, пользовательский помощник.

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

Далее, связанный код JavaScript:

$().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;

});

})

Как это использовать?

@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")

Это работает, но я хотел бы получить ваш совет: это хорошее решение? Существует ли что-то, что лучше использовать? Любые замечания приветствуются. Я считаю себя еще новичком в asp.net mvc & jQuery.

Сценарий таков:

• Пользователь нажимает на ссылку привязки (здесь кнопка со значком удаления)
• Диалоговое окно jquery показывается пользователю для подтверждения или отмены
• если подтвердите, то опубликуйте действие

Спасибо.

Answer 1

Одна вещь, которую можно улучшить, - это кэширование вашего объекта jquery. 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');

станет:

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