Question

我有一个Razor视图，其中包含从View模型渲染的多个字段，我需要在手风琴的不同部分显示相同的字段（我不想复制每个部分中的字段）。我不确定这样做的最佳方法 - 我是否将字段放在局部视图中并以某种方式在单击手风琴部分时动态渲染/加载视图，或者在渲染代码之后我移动/追加div包含字段，还是完全包含其他内容？

编辑：查看jsfiddle here

剃刀代码：

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

<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版本更改了类命名（不太可能，但仍然如此），则使用您自己的类可确保不会中断。

上述解决方案将确保您只使用一组输入字段，因此您不会收到任何重复的帖子数据。 .append（）的漂亮之处在于移动你追加的东西，所以你不必在之后删除任何东西。

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

Razor中的jQuery手风琴：让不同的手风琴部分出现相同的字段

1 个答案: