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