CODEWITHSUNDEEP
javascriptc#jqueryasp.net-mvcrazor
Rob
Rob

Reputation: 163

How to create dynamic IDs from a foreach loop

I have a list of tabs in a foreach loop. Is there a way I can dynamically add ID's? So that when I click on each of the tabs it loads up a new panel.

Tab Menu

<ul class="nav tabs-left tabs-border fullblock">
@foreach (var registrationtarget in Model.Tenants.OrderBy(x => x.Name))
{
    <li class="active">
        <a href="#" data-toggle="tab" aria-expanded="false" title="@registrationtarget.Name"><p class="registrationtarget">@registrationtarget.Name<br />@registrationtarget.TenantGroupName</p>@registrationtarget.CAEIPINumber</a>
    </li>
}

Main View

<article class="row">
    <h1 class="pageTitle artistHeader fw200 mb20 mt10">@ViewBag.Title</h1>
    <div class="col-md-12">

        <div class="row rowflex;">

            <div class="col-md-2 padzero">

                <div class="panel panel-visible" id="tabContainer">

                    @Html.Partial("_VerifiedSongsTabMenu", Model)

                </div>
            </div>
            <div class="col-md-10 padzero">
                <div class="panel panel-visible" id="tableContainer">

                    @Html.Partial("_VerifiedSongsList", Model)

                </div>
            </div>
        </div>
    </div>
</article>

Table with ID

<div class="tab-block mb25">
@*Panel Body*@
<div class="tab-content">
    <div id="tab14_1" class="tab-pane active">
        <div class="panel-body pn">
            <table class="table table-striped table-hover dataTable admin-form theme-primary verifiedsongsTable" cellspacing="0" width="100%" role="grid">
                <thead id="tableHeader">

I know that its possible to do it using JQuery, but as I have a list of tabs I am unsure of what the best approach would be to get the tabs changing the content when clicked.

Upvotes: 0

Views: 1217

Answers (1)

GeorgeB
GeorgeB

Reputation: 848

You could try using ActionLinks:

@Html.ActionLink("Title", "ActionName", "ControllerName", new { area = "" }, new { @class = "Tab"})

Then in the controller you can return the new view:

public virtual ActionResult ActionName()
    {
        return View(); //this will return ActionNameView.cshtml
    }

Upvotes: 2

Related Questions