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

在我的应用程序中，我有一个包含项目的表。我可以使用“删除”按钮从表中删除每个项目。在这个按钮上，我做了一篇ajax文章。由于ajaxOptions confirm属性，我可以像用户一样确认他的操作。但这会产生一个丑陋的消息框。因此，我开发了自己的解决方案，用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;

});

})

它是有效的，但我想听听你的建议：这是一个好的解决方案吗？存在更好使用的东西吗？欢迎发表意见。我认为自己还是asp.net mvc和jQuery的新手

情况如下：

• 用户单击锚定链接（此处为带有删除图标的按钮）
• jquery对话框显示给用户确认或取消
• 如果确认，则发布操作

---

谢谢。

需要改进的一件事是缓存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');

---

@Bronzato是的，它将对dom元素执行一次查找，然后重新使用它vs，执行6次查找。

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