我用 jQuery 对话框替换确认（ajaxOptions）的解决方案

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 对象。例如：

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