javascript - 如何从 foreach 循环创建动态 ID

Question

我在 foreach 循环中有一个选项卡列表。有没有办法可以动态添加ID？这样，当我单击每个选项卡时，它会加载一个新面板。

标签菜单

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

主视图

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

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

我知道可以使用 JQuery 来做到这一点，但由于我有一个选项卡列表，我不确定让选项卡在单击时更改内容的最佳方法是什么。

Answer 1

您可以尝试使用 ActionLinks:

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

然后在 Controller 中您可以返回新 View :

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