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

Question

在我的应用程序中，我有一个包含项目的表格。我可以用删除按钮从我的表中删除每个项目。在这个按钮上，我做了一个阿贾克斯帖子。由于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');