jQueryダイアログで確認（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

改善するべきことの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');