ASP.NET Core MVC Показать скрыть частичные представления - PullRequest
Новая
       24

ASP.NET Core MVC Показать скрыть частичные представления

0 голосов
/ 30 мая 2019

У меня есть страница Контакт / Индекс, разделенная на два столбца (для каждого столбца один PartialView).Слева я показываю список всех моих контактов, а справа информацию о выбранном / нажатом контакте из указанного списка.

... и предварительный просмотр отлично работает -> после того, как пользователь щелкнет записьиз списка я просто вызываю '@ Url.Action' для действия в моем контроллере, которое возвращает частичное представление с деталями.


    <div class="row">
      <div class="col-md-8 col-sm-12">
        <div id="sectionList">
          @{await Html.RenderPartialAsync("_PartialList", Model.Contacts);}
        </div>
      </div>

      <div class="col-md-4 col-sm-12">
        <div id="sectionPreview" style="display: block">
          @{await Html.RenderPartialAsync("_PartialPreview", Model.Contact);}
        </div>

        <div id="sectionEdit" style="display: none">
          @{await Html.RenderPartialAsync("_PartialEdit", Model.Contact);}
        </div>
      </div>
    </div>

Но у меня проблема с редактированием.В форме сведений у меня есть кнопка для редактирования, и когда пользователь щелкает ее, я хочу скрыть PartialView для предварительного просмотра (id = "sectionPreview") и показать один для редактирования (id = "sectionEdit").

Я уже пытался поиграть с сохранением различных стилей (disply: block или none) во ViewBag и применением этого к каждому разделу, но это не похоже на правильный подход, потому что все PartialViews (даже с отображением, установленным на none) все ещеполучить отрисовку.

Каков наилучший способ / практика, чтобы сделать эту работу?

Ответы [ 2 ]

1 голос
/ 31 мая 2019

Другой подход заключается в использовании ajax для загрузки частичного представления. На стороне клиента используйте ajax для вызова функции на стороне сервера и передачи параметра фильтра (id).На стороне сервера вы можете запросить базу данных с идентификатором и вернуть PartialView с моделями.

Затем при успешном использовании функции обратного вызова Ajax вы можете загрузить html частичного представления в связанную область на странице, используя jQuery: 

success: function (result) {
    $("#searchResultsGrid").html(result);
}

И скрыть связанный div, например: 

$("#sectionPreview").hide();

Вы можете нажать здесь для примера кода.

0 голосов
/ 30 мая 2019

Могу ли я предложить вам использовать навигацию начальной загрузки в этом случае. Поэтому при нажатии на другое представление оно будет скрывать текущее представление 

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

Вы можете прочитать больше здесь

...