Question

在我的应用程序中，我有一个包含项目的表格。我可以使用删除按钮删除表格中的每个项目。在这个按钮上我做了一个ajax帖子。由于ajaxOptions confirm属性，我可以在用户确认其操作时使用。但这会产生一个丑陋的消息框。所以我开发了自己的解决方案，用jQuery对话框替换这个丑陋的消息框。

enter image description here

以下是我开发的解决方案。这是一个通用的解决方案，可以在我需要的任何地方使用。

首先，自定义助手。

    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＆amp;的新手。 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');

我通过jQuery对话框替换confirm（ajaxOptions）的解决方案

1 个答案: