Question

我有一些标签视图：

<ul class="nav nav-tabs" data-tabs="tabs">
@foreach (var item in Model)
{
    <li class="@(item.Well == 1 ? "active" : "")"><a href="#tab-@item.Well" data-toggle="tab">@item.Well</a> </li>
}
</ul>

<div id="tabs" class="tab-content">
    <div id="tab-1" class="tab-pane active">
        <p>Tab 1</p>
    </div>
    <div id="tab-2" class="tab-pane">
        <p>Tab 2</p>
    </div>
    <div id="tab-3" class="tab-pane">
        <p>Tab 3</p>
    </div>
</div>

<script>
  $(function() {
    $( "#tabs" ).tabs();
  });
</script>

标签本身工作正常，但有这个模型列表：@model List<WebApplication1.Models.WellModel>，其中包含许多“井”。视图得到了包含所有井的整个模型，所以我的问题是我如何使用正确的井中的数据填充选项卡。例如，当我点击“Well 1”选项卡时，它应该显示该特定井的id，时间戳，图像等。这些井只是“井1”，“井2”，“井3”等等。

这是井的模型：

    public class WellModel
    {
        public string Id { get; set; }
        public int Well { get; set; }
        public byte FirstImage { get; set; }
        public byte[] LastImage { get; set; }
        public string TimeStamp { get; set; }
    }

任何提示？

更新：

我在标签中添加了这个：

    <p id="welltab"></p>
    <script type="text/javascript">
        $("li").click(function() {
            var well = $(this).data("well");
            document.getElementById("welltab").innerText = well;
            console.log(well);
        });
    </script>

更新2：

如何告诉我的JS使用哪个ID？两个元素不能具有相同的id，并且为选项卡中的每个元素编写函数对我来说听起来不是最理想的。

这两个标签：

<div id="tab-1" class="tab-pane active">
    <h2>Slide ID: </h2>
    <h2 id="wellHeader"></h2>
    <h4 id="wellId"></h4>
</div>
<div id="tab-2" class="tab-pane active">
    <h2>Slide ID: </h2>
    <h2 id="wellHeader"></h2>
    <h4 id="wellId"></h4>
</div>

这个Javascript：

<script type="text/javascript">
$("li a").click(function() {
    var slide = $(this).data("wellid");
    var well = $(this).data("well");
    document.getElementById("wellHeader").innerText = slide;
    document.getElementById("wellId").innerText = well;
});
</script>

Answer 1

在每个人中，添加属性的数据属性。

@foreach (var item in Model)
{
    <li class="@(item.Well == 1 ? "active" : "")"><a href="#tab-@item.Well" data-toggle="tab" data-wellid="@item.Id" data-well="@item.Well" data-FirstImage="@item.FirstImage">@item.Well</a> </li>
}

您可以在需要时使用clicked li item的属性

现在获取属性

$("li a").click(function(){ //add a class check in the selector to make it specific
    var id = $(this).data("id");// access the attributes using the data method.
    var wellId = $(this).data("wellid");
});

Answer 2

假设您使用某种类型的库来切换相应div的可见性，如果您点击相应的li，则可以在打印菜单时打印标签页：

@foreach(var well in Model)
{
    <div id="tab-@well.Well" class="tab-pane @(well.Well == 1 ? "active" : "")">
        <p>Tab @well.Well mister Anderson</p>   
        <p>@well.TimeStamp</p>
        <!-- and so on -->  
    </div>
}

动态填写导航标签

2 个答案: