Razor中的jQuery accordion：获取相同字段以显示在不同的accordion部分中

我有一个Razor视图，其中有几个从视图模型渲染的字段，我需要相同的字段出现在手风琴的不同部分中（我不想在每个部分中重复字段）。我不知道最好的方法是什么-我是否将字段放在局部视图中，并在单击手风琴部分时以某种方式动态渲染/加载视图，还是在渲染代码后，我是否移动/附加包含字段的div，或者完全执行其他操作

编辑：签出JSFIDLE

剃刀代码：

<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

注意，我为.acc标题添加了自己的类。虽然您可以使用内置的jQuery UI类，但使用自己的类可以确保在新的UI版本更改类命名时（不太可能，但仍然如此）不会中断

上述解决方案将确保您只使用一组输入字段，所以不会收到任何重复的post数据。.append（）的妙处在于它可以移动您附加的内容，因此您不必在之后删除任何内容

---

至于“正确的方法”，我不能说，但如果你问我，这似乎是最干净的方法。另一种可能的方法是为视图中的所有accordion窗格创建相同的字段，并以某种方式禁用除活动窗格中的字段之外的所有字段。不过，这需要更多的JavaScript。

啊，根据上面的评论，现在我理解了这个问题。如果我最初的问题让您感到困惑，很抱歉。：）

我认为你的思路是正确的——以下几点对我来说很好：

HTML

注意，我为.acc标题添加了自己的类。虽然您可以使用内置的jQuery UI类，但使用自己的类可以确保在新的UI版本更改类命名时（不太可能，但仍然如此）不会中断

上述解决方案将确保您只使用一组输入字段，所以不会收到任何重复的post数据。.append（）的妙处在于它可以移动您附加的内容，因此您不必在之后删除任何内容

---

至于“正确的方法”，我不能说，但如果你问我，这似乎是最干净的方法。另一种可能的方法是为视图中的所有accordion窗格创建相同的字段，并以某种方式禁用除活动窗格中的字段之外的所有字段。但是，这需要更多的JavaScript。

我不完全确定您想要在这里实现什么。。但是，如果要在两个（或更多）窗格中创建具有相同内容的手风琴，为什么不在视图中镜像字段（如果希望避免大量代码混乱，请使用模板、助手或其他工具），而不是使用JavaScript来移动内容呢。您希望动态加载镜像内容的理由是什么？嗨，Anders，我的想法是，如果我在每个窗格中使用相同的局部视图，字段将呈现两次，这将创建两组具有相同id值的字段。它也会复制代码，所以我想我是想通过移动内容来变得聪明。当你说“镜像场”是什么意思？我很高兴听到你的一些建议…干杯我不完全确定你想在这里完成什么。。但是，如果要在两个（或更多）窗格中创建具有相同内容的手风琴，为什么不在视图中镜像字段（如果希望避免大量代码混乱，请使用模板、助手或其他工具），而不是使用JavaScript来移动内容呢。您希望动态加载镜像内容的理由是什么？嗨，Anders，我的想法是，如果我在每个窗格中使用相同的局部视图，字段将呈现两次，这将创建两组具有相同id值的字段。它也会复制代码，所以我想我是想通过移动内容来变得聪明。当你说“镜像场”是什么意思？我很高兴听到你的一些建议…干杯

<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();
}

<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>

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

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