Question

以前创建Accordion控件我曾经使用过这段代码：

                <div class="panel-group" id="accordionMessagesSetup">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionMessagesSetup" href="#collapseMessagesSetup">
                                    <span class="glyphicon glyphicon-chevron-up"></span>
                                    Message Setup
                                </a>
                            </h4>
                        </div>
                        <div id="collapseMessagesSetup" class="panel-collapse collapse in">
                            <div>
                                <p style="background-color: red"> Someting ELSE in here</p>
                                <p style="background-color: red"> Someting ELSE2 in here</p>
                            </div>
                        </div>
                    </div>
                </div>

或如此处所见：Bootplay Live Demo

现在我仍想使用我的示例，但在此页面中我有一个for-each循环，所以我需要在运行时创建它们。

我需要将变量放在那里以使其起作用的项目是

id="accordionMessagesSetup"
data-parent="#accordionMessagesSetup"
href="#collapseMessagesSetup"
id="collapseMessagesSetup"

如何使用Razor在for-each循环模式中初始化那些？想象一下，你有什么属性可以在模型中做到。

Answer 1

你可能遇到的最大问题是Razor解析。当您尝试在某些文本中间使用Razor变量时，Razor通常无法确定变量名称的结束位置。例如，如果您要执行以下操作：

<div id="accordion@Model.IdMessageSetup">

Razor认为需要在名为IdMessageSetup的模型上查找属性，实际上，您只需要Id。解决这个问题的最简单方法是将变量包装在paranthesis中：

<div id="accordion@(Model.Id)MessageSetup">

现在，它清楚哪个部分是变量。至于添加#符号，我不确定那里有什么混乱。你只需把它放在需要的地方：

<a href="#collapse@(Model.Id)MessagesSetup">

没有特别要求。

在for循环中动态设置Data-Parent和HREF

1 个答案: