ASP.Net Razor 循环内的引导选项卡

Question

我在 div (class="example") 中有简单的 bootstrap(3) 选项卡。

我将div 保存在部分视图中。

我在我的 Razor 视图中使用 foreach 循环，将对象传递给 Partial 视图并为每次迭代输出它。

我怎样才能简单地浏览每个div 自己的标签而不影响循环内的其他标签？

查看：-

@foreach (var pbrModel in Model)
{
   @Html.Partial("~/_TestViewPartial.cshtml", pbrModel)
}

局部视图：-

@model PbrViewModel

<div class="example">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" data-toggle="tab">Messages</a></li>
    <li><a href="#settings" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    <div class="tab-pane" id="profile">...</div>
    <div class="tab-pane" id="messages">...</div>
    <div class="tab-pane" id="settings">...</div>
  </div>
</div>

Answer 1

您可以使用for 循环来迭代主视图的Model 中的项目，然后使用i 迭代器通过将每个选项卡的id 附加到部分视图中来使其唯一。

您可以在迭代时将i 值作为“模型”传递给局部视图。

像这样：

@for (var i = 0; i < Model.Count; i++)
{
    @Html.Partial("~/_TestViewPartial.cshtml", i)
}

---

然后在局部视图中，您可以使用从 for 循环传递给它的“模型”——在本例中为 int 类型，因此它可以相应地将值打印到 id 中。

像这样：

@model int

<div class="example">

    <!-- Nav tabs -->
    <ul class="nav nav-tabs">
        <li class="active"><a href="#home@Model" data-toggle="tab">Home</a></li>
        <li><a href="#profile@Model" data-toggle="tab">Profile</a></li>
        <li><a href="#messages@Model" data-toggle="tab">Messages</a></li>
        <li><a href="#settings@Model" data-toggle="tab">Settings</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane active" id="home@Model">...</div>
        <div class="tab-pane" id="profile@Model">...</div>
        <div class="tab-pane" id="messages@Model">...</div>
        <div class="tab-pane" id="settings@Model">...</div>
    </div>

</div>

就像我之前（在此编辑之前）的答案一样，将 i 变量传递给每次迭代可确保 ids 是唯一的。

不幸的是，通过这种方式，您将无法访问主视图 Model 的任何属性，因为您仅将 int 传递给部分视图，而没有其他任何内容（我在下面解释更多).

---

需要考虑的几个注意事项：

• 您的部分路径不需要是“相对绝对的”。在那，我的意思是你可以使用"_TestViewPartial.cshtml"作为第一个参数（省略“~/”）
• 如果您确实希望在局部视图中访问主视图 pbrModels 的属性，则需要将这些属性传递给局部视图（根据您的 OP，PbrViewModel 作为 @model type)，如果可能的话，我建议为该类型添加一个唯一的索引器属性 - 这样您就可以在部分视图中的元素的 id/href 中打印它，就像在我的示例中一样；只需使用 @model.MyUniqueIDProperty 或任何你有的友好名称
• THINK - 你真的需要一个单独的局部视图吗？如果您在其他地方重用代码，那么可以。如果它只是为了页面的目的，那么没有；我会推迟在主视图的代码中包含代码 - 如果您需要使用您所在的索引器从PbrViewModels 获取属性，您仍然可以访问页面的主要Model（ Model[i])

有任何问题，尽管问。

希望这会有所帮助！ :)