Как получить загрузочные вкладки, используя RenderAction для загрузки по требованию

Question

У меня есть несколько вкладок на странице, которые одновременно загружают частичное представление, прежде чем что-либо отобразится.Некоторые вкладки запрашивают намного дольше, чем другие, поэтому это задерживает загрузку всей страницы (или любой вкладки, которую пользователь действительно хочет видеть).Я пробовал кучу разных вещей с AJAX, но все, кажется, требуют действий URL.Я видел подобные вопросы, заданные ранее, но не там, где частичные представления вызываются RenderAction.Как мне адаптировать использование HTML.RenderAction для загрузки вкладок только при нажатии?

<ul class="nav nav-pills centered"> 
     <li role="presentation" class="h4 active"><a href="#tab_facultyInfo" data-toggle="pill">Info</a></li>
     <li role="presentation" class="h4"><a href="#tab_facultySplits" data-toggle="pill">Splits</a></li>
     <li role="presentation" class="h4"><a href="#tab_facultyLeaves" data-toggle="pill">Leaves</a></li>
</ul>

<div class="tab-content tab-profile" id="tabs">
     <div class="tab-pane col-md-12 active fade in panel panel-default" id="tab_facultyInfo">
          @{Html.RenderAction("GetFacultyInfo", "Person", new { ID = ID });}
     </div>
     <div class="tab-pane col-md-12 active fade in panel panel-default" id="tab_facultySplits">
          @{Html.RenderAction("GetFacultySplits", "Person", new { ID = ID });}
     </div>
     <div class="tab-pane col-md-12 active fade in panel panel-default" id="tab_facultyInfo">
          @{Html.RenderAction("GetFacultyLeaves", "Person", new { ID = ID });}
     </div>
</div>

Это выдержка из контроллера:

public ActionResult GetFacultyInfo(string ID)
{
     ....
     return PartialView("Faculty/_Info");
}

Answer 1

Html.RenderAction выполняется на стороне сервера, он будет отображать все, и вы можете показывать скрытую информацию только для той отображаемой информации, если вы хотите загрузить ее во время щелчка, вам нужно использовать функцию на стороне клиента.

Используя ajax-нагрузку (https://www.w3schools.com/jquery/jquery_ajax_load.asp),, которую вы можете загрузить частичным на определенной вкладке после нажатия

образец загрузки ajax:

    $(selector).load(URL,data,callback);

пример вашей ситуации:

    var refreshCartUrl = "@Url.Action("GetFacultyInfo", "Controllername",new { id = id })";
    $('.tab_facultyInfo').load(refreshCartUrl);