Question

我的网站上有一些标签会在加载页面后立即加载。我不要那个。我想要在按下它时立即加载每个标签内容。到目前为止，我已通过以下方式解决了这个问题：

我有一个标签如下：

<li><a data-Toggle="tab" href="#Alarm">Larm</a></li>

当我按下此选项卡时，它会指向Alarm-div，如下所示：

<div id="Alarm" class="tab-pane fade">
   <a class="alarmTab" asp-controller="Customer" asp-action="LoadAlarm" asp-route-id="@Model.Plants.First().STATION">Hämta larm</a>
   <div class="larm2" id="larm2"></div>
</div>

在这个div中，我创建了一个名为alarmTab的链接，它调用了一个动作LoadAlarm，如下所示：

public async Task<IActionResult> LoadAlarm(string id)
{
  return ViewComponent("Events", new { id = id});
}

我还有一个JS，它在larm2-div中显示ViewComponent的结果。

整个程序有效。但是，我希望只要按下警报标签就会发生这种情况，而不必按下超链接alarmTab。有什么想法吗？

Answer 1

单击选项卡链接时，可以对服务器进行ajax调用。

向链接添加html5数据属性，以便我们可以存储一个值，指示是否已加载选项卡窗格所需的内容。

<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
        <a class="contentLink" style="display: none;" 
         data-loaded="0"  asp-controller="Home" asp-action="LoadAlarm" 
         asp-route-id="1">Hämta larm</a>
        <div class="content" ></div>
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">
        <a class="contentLink" style="display: none;" 
           data-loaded="0"  asp-controller="Home" asp-action="LoadAlarm"
           asp-route-id="2">Hämta larm</a>
        <div class="content" ></div>
    </div>
</div>

现在，当显示选项卡内容窗格时，读取链接标记帮助程序生成的href值，并在data-loaded属性值为0时进行ajax调用。一旦我们从服务器获得响应，请更新data-loaded值为1并更新内容div的内部html。

$(function() {

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        var target = $(e.target).attr("href");
        var $c = $(target).find(".contentLink");
        var $content = $(target).find(".content");
        if ($c.data("loaded") === 0) {
            var url = $c.attr("href");
            $.get(url, function (r) {
                $content.html(r);
                $c.data("loaded",1);
            });
        } 
    });
});

您现在可以修改上面的代码以加载页面上的活动选项卡的内容。这个想法也是如此。

单击时加载选项卡内容

1 个答案: