ASP.NET Core MVC Show hide partial views

问题

I have a Contact/Index page split into two columns (for each column one PartialView). On the left I show the list of all my contacts and on the right the details of the selected/clicked contact from the said list.

...and the preview works great -> after a user clicks a record from the list I just call a '@Url.Action' for an action in my controller that returns a partial view with the details.


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

But I'm having a problem with 'edit'. On the details form I have a button for EDIT and when a users clicks it I want to HIDE the PartialView for preview (id="sectionPreview") and SHOW the one for edit (id="sectionEdit").

I already tried playing around with saving different styles (disply: block or none) to ViewBag and applying that to each section, but it doesn't feel like the right approach, because all the PartialViews (even with display set to none) still get rendered.

What is the best way/practice to make this work?

回答1:

Another approach is to use ajax to load the partial view .On client side use ajax to call server side function and pass the filter parameter(id) . On server side , you can query the database with ID and return PartialView with models .

Then in success callback function of Ajax , you can load the html of partial view to related area in page using jQuery :

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

And hide related div like :

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

You can click here for code sample .

回答2:

May I suggest you to use bootstrap nav navigation in this case. So when you click another view it will hide the current view

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

You can read more here

来源：https://stackoverflow.com/questions/56374272/asp-net-core-mvc-show-hide-partial-views

标签

asp.net-mvc

asp.net-core

partial-views