ASP.NET MVC3 EditorTemplatesはjQueryを複製しないでAjax経由でロードされますか？

Question

私は、DateTime、Colorsなどのようなものに対してEditorTemplatesを使用しています。これらのテンプレートをかなり含んでいる私のフォームは、主にAjax経由で部分ビューとして読み込まれます。

各エディタテンプレートの一番下にjQuery初期化スクリプトがたくさんあるのではなく、レスポンスごとに1回だけ行う概念的な方法がありますか？ 1つのフォームに10の日付時刻ピッカーがあるとすれば、10回同じ初期化コードを渡すことは本当に愚かなことでしょう。

10個の日付ピッカーでメインフォームに初期化スクリプトを配置するのは効率的です（もちろん、日時エディタテンプレートにコードを隔離することはあまりありません）。しかし、他にも別のフォームまたは2つまたは3つの日付選択ツールで、コード内の複数のビューにこれらのスクリプトを複製しています。

ここで、エディタテンプレートをここでどのように活用できますか？ AJAX経由でレンダリングされた部分図で動作エディタテンプレートの一番下に追加する

EnsureThisScriptIsOutputOncePerThisResponse(<script>$('.datepicker').datepicker("insert lengthy config here");</script>) 

- 私は私のようなものを探していると思います。

Answer 1

ことの一つは、データがそのようなものを設定するための属性を利用して控えめなJavaScriptのパターンを拡張startup.jsファイルを持っていることでした。私たちの例はボタンです。のは、私は次のHTMLを持っていたとしましょう：

<input type='submit' data-button=true data-button-icon='ui-icon-check' value='approve' /> 

起動ファイルは、このようなボタンの何かを探します：

function initializeButtons() { 
    $("*[data-button=true]").each(function() { 
     var $this = $(this); 
     var initialized = $this.data('button-init'); 
     if (!initialized) { 
      var options = { 
       disabled: $this.data('button-disabled'), 
       text: $this.data('button-text'), 
       icons: { 
        primary: $this.data('button-icon-primary') || $this.data('button-icon'), 
        secondary: $this.data('button-icon-secondary') 
       } 
      }; 
      $this.button(options); 
      $this.data('button-init', true); 
     } 
    }); 
} 

$(document).ready(initializeButtons).ajaxSuccess(initializeButtons) 

これは管理がはるかに容易に共通のjQuery UIの初期化コードを作成し、我々はへの拡張をHtmlHelperの作成私たちが必要とするもののデータ属性を簡単に記入することができます。

Answer 2

ここで、エディタテンプレートをどのように活用できますか？私は のようなものをお探しですか？エディタテンプレートの下部に、このスクリプトのIsIutputOncePerThisResponse（）を追加してください。

Cassetteを使用。これは、部分的な視点からでもどこからでもスクリプトやスタイルシートを参照できるライブラリです。次に、スクリプトの参照順序を確認し、スクリプトをレンダリングして、このスクリプトとその参照が一度だけ出力されるようにします。

更新：日付ピッカーエディタのテンプレートでは

を次のようにAJAXのスクリプトを参照

を行うことができます - EditorTemplates/DateTime.cshtml

@model DateTime? 
@{ 
    Bundles.ReferenceScript("path to datepicker script. Script may reference jquery ui in its turn"); 
} 
//datepicker 

そして、DatePickerのコンテナ形式で、直接レンダリングスクリプト。アヤックス、これはレイアウトのページで行われていたであろうでない場合は、我々は我々のプロジェクトでやった

@model ViewModelModelWithTenDates 
@Bundles.RenderScripts() //will output distinc script references in order 

//10 datepickers 
@Html.EditorFor(model => model.FirstDate) 

Answer 3

livequeryプラグインを使用して、初期化コードを外部の.jsファイルに追加し、そのファイルを_Layout.cshtmlに含めることができます。

$(".datepicker").livequery(function(){ 
    $(this).datepicker("insert lengthy config here"); 
}); 

Answer 4

私はいくつかのスクリプトの実行を必要とするものOM INIT属性を使用します。

<input type="text" id="id" init="datepicker makereadonly" /> 

これは2つの機能を実行する必要があることを示しています。それらを実行するのは、外部ファイルで定義されているAjax-completeで行われます。項目が初期化されると、初期化された属性が設定されます。この方法では、部分ビューにスクリプトは存在しません。

var initFunctions = initFunctions || {}; 

initFunctions.datepicker = function(item) { 
    $(item).datepicker(); 
}; 

initFunctions.readonly = function(item) { 
    $(item).attr("disabled", "disabled"); 
}; 

$('body').ajaxComplete(function (e, xhr, settings) { 
    var itemFunction = function (item) { 
    var $this = $(item); 
    var attr = $this.attr("init"); 
    var functions = attr.split(" "); 
    for (var i = 0; i < functions.length; i++) { 
     var funcName = functions[i]; 
     var func = initFunctions[funcName]; 
     if (func != undefined) 
      func($this); 
    } 
    $this.attr("initialized", ""); 
    }; 

    items = $("[init]:not([initialized])"); 
    items.each(function (index, item) { itemFunction(item); }); 
});