ASP.NET Core MVC Show hide partial views

Question

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?

As a working solution/workaround I'm rendering both partialviews, but added a "Mode" variable to the model. In each partialview I check the "Mode" and return appropriate html code — TheMixy
– TheMixy, Commented May 30, 2019 at 12:30

Nan Yu · Accepted Answer · 2019-05-31 05:48:12Z

2

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 .

answered May 31, 2019 at 5:48

Nan Yu

27.7k9 gold badges75 silver badges157 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

TheMixy Over a year ago

thank you. I'll take a look at the code sample and get back with the result

TheMixy Over a year ago

I took a closer look to what you suggest, but if I understand correctly when I hide/show partial views (sections) using ajax (jquery) all of the html code still gets rendered (even from the hidden partial views)?

Nan Yu Over a year ago

@TheMixy , use javascript to show/hide the partial , if you don't want to render the other view , just delete the content in div : $("#div1").empty()

TheMixy Over a year ago

Thank you. Should I open a new thread for an additional question? (unobtrusive ajax validation does not show/work in ajax loaded partial view (edit) form...) ?

Nan Yu Over a year ago

It's better to start new thread and post your current codes .

|

Collectives™ on Stack Overflow

ASP.NET Core MVC Show hide partial views

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related