CODEWITHSUNDEEP
asp.netasp.net-mvc
Khaine775
Khaine775

Reputation: 2765

Filling out nav tabs dynamically

I have a view with some tabs:

<ul class="nav nav-tabs" data-tabs="tabs">
@foreach (var item in Model)
{
    <li class="@(item.Well == 1 ? "active" : "")"><a href="#[email protected]" 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>

The tabs themselves work fine, but have this model list: @model List<WebApplication1.Models.WellModel> which holds a number of 'Wells'. The view gets the whole model with all the wells in it, so my question is how I can populate the tabs with the data from the correct well. For example, when I click on the tab for "Well 1", it should show me the id, timestamp, image and so on for that particular well. The wells are simply "Well 1", "Well 2", "Well 3" and so on..

Here's the model for the well:

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

Any hints?

UPDATE:

I've added this inside a tab:

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

UPDATE 2:

How do I tell my JS which id to use? Two elements can't have the same id, and writing a function for every element in the tab doesn't sound optimal to me.

These two tabs:

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

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

Upvotes: 0

Views: 281

Answers (2)

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

In your for each, add the data attributes for your properties.

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

You can use the attributes of the clicked li item when needed

now for getting the attributes

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

Upvotes: 1

CodeCaster
CodeCaster

Reputation: 151586

Doing the assumption that you use some kind of library that toggles the respective div's visibility if you click the according li, you can print your tabs just as you print the menu:

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

Upvotes: 0

Related Questions