How to load different views in same content div tag without refreshing entire page

Question

I know must be possible to load different PartialViews in same div tag in my visual studio solution, I just can't get it. Here's a pic of what i want to make. I'm using razor to get the html, but can't figure out how to do it.

My html for the first option is like this

> <li><div id="abmPlan"><i class="fa fa-dashboard fa-fw"></i> ABM
> Plan</div></li>

My content wrraper is this

 <div id="page-wrapper"></div>

Suppose I have a test1 view in my menu controller just for testing.

I have already tried Doing it with actionLink but this creates a button and i don't want that cause I already have my markup good and running. Besides the menu dissapears and only shows my partial view in the body of the layout.

Thanks in advance!

Answer 1

Ok so I finally did it. Here's the code.

 $('#abmPlan').on('click', function (e) {
        var base = window.location.origin + '/Plan/_ObtenerVistaPlan';
        $('#contenidoMenuAdministrador').load(base  );
    });

There was an issue with the URL, so I had to get the base URL and then set the corresponding path. Thanks to those who answered and tried to help me!