RazorのjQueryアコーディオン：異なるアコーディオンセクションに同じフィールドを表示する

Question

私はViewモデルからレンダリングされたいくつかのフィールドを持つRazorビューを持っています。アコーディオンの異なるセクションに同じフィールドを表示する必要があります各セクションのフィールドを複製したい）。私はこれを行うための最善の方法はわかりません - フィールドを部分的なビューに置き、アコーディオンセクションをクリックすると、またはビューを動的にレンダリング/ロードしますか？フィールドを含む、または完全に他の何か？

EDIT：

<div id="accordion"> 
    <h3><a href="#" class="acc-section">First header</a></h3> 
    <div id="div1"> 
     <fieldset> 
      @Html.LabelFor(model => defaultStudyEvent.GroupName, "Group Name") 
      @Html.TextBoxFor(model => defaultStudyEvent.TimePoints) 
     </fieldset> 
    </div> 
    <h3><a href="#" class="acc-section">Second header</a></h3> 
    <div></div> 
</div> 

レンダリングされたHTML：：jsfiddle here

カミソリコードチェック

<div id="accordion"> 
    <h3><a href="#" class="acc-section">First header</a></h3> 
    <div id="div1"> 
     <fieldset id="f1"> 
      <label for="defaultStudyEvent_GroupName">Group Name</label> 
      <input id="defaultStudyEvent_TimePoints" name="defaultStudyEvent.TimePoints" type="text" value="" /> 
     </fieldset> 
    </div> 
    <h3><a href="#" class="acc-section">Second header</a></h3> 
    <div>(Move fieldset above to here when "Second header" is clicked)</div> 
</div> 

を、私は、以下のようにさまざまなオプションでプレーしてきたが、私はありませんこれが正しいアプローチであるかどうかを確認してください：

$(document).ready(function() { 
    $('#accordion').accordion(); 
    $('.acc-section').click(appendFields); 
}); 

function appendFields() { 
    $('#accordion') 
     .append($('#div1')) 
     .accordion('destroy') 
     .accordion(); 
} 

Answer 1

ああ、今私は上記のコメントに基づいて問題を理解しています。私の最初の質問があなたを混乱させたら申し訳ありません。 :)

私はあなたが正しい軌道に乗っていると思う - 以下は、私のためにうまく働いた：

HTML

<div id="accordion"> 
    <h3 class="acc-header"><a href="#">First header</a></h3> 
    <div> 
     <fieldset id="input-fields"> 
      <label for="defaultStudyEvent_GroupName">Group Name</label> 
      <input id="defaultStudyEvent_TimePoints" name="defaultStudyEvent.TimePoints" type="text" value="" /> 
     </fieldset> 
    </div> 
    <h3 class="acc-header"><a href="#">Second header</a></h3> 
    <div> 
    </div> 
    <!-- more divs can be added --> 
</div> 

jQueryの：私は自分のクラスを追加

$(document).ready(function() { 
    $('#accordion').accordion(); 
    $('.acc-header').click(moveFields); 

    function moveFields() { 
     $(this).next().append($('#input-fields')); 
    } 
}); 

注意.acc-headerの場合。組み込みのjQuery UIクラスを使用することもできますが、独自のUIクラスを使用すると、新しいUIバージョンでクラスの名前が変更されても、これが壊れないことが保証されます。

上記の解決策では、入力フィールドのセットを1つしか使用しないので、重複する投稿データは受信されません。 .append（）でうまくいくのは、が追加するものがに移動するため、後で何も削除する必要がないということです。

「正しいアプローチ」に関しては、私は言うことはできませんが、あなたが私に尋ねると、それを行う最もクリーンな方法のようです。もう1つの考えられる方法は、ビュー内のすべてのアコーディオン・ペインに同じフィールドを作成し、アクティブ・ペイン内のもの以外のすべてのユーザーを無効にすることです。しかし、それ以上のJavaScriptが必要になります。