クリック時のタブ内容の読み込み

Question

私のウェブサイトには、ページが読み込まれるとすぐに読み込まれるいくつかのタブがあります。私はそれを望んでいない。私はむしろ、各タブコンテンツが私がそれを押すとすぐにロードされることを望みます。私は、次のようにこれまでのところ、これを解決した：

次のように私はタブがあります。

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

私はこのタブに押すと、それはこのようになりますアラーム-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要素の中で、私はこのようになりますアクションLoadAlarmを呼び出しalarmTabと呼ばれるリンク、作成しました：

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

を

私は、larm2-div内のViewComponentの結果を表示するJSも持っています。

この手順全体が機能します。しかし、ハイパーリンク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); 
      }); 
     } 
    }); 
}); 

上記のコードを変更して、ページlaodのアクティブなタブのコンテンツを読み込むことができるようになりました。アイデアも同様です。