Changing partial views in the same view based on menu

Question

I am creating a website of static pages in MVC5. I want to update the "content" div on the right side , based on the menu item clicked which is on the left side of the page without refreshing the whole page. I have used one partial view for the menu part and for each item in menu , I have created partial views .

Answer 1

You could use something like this where 'yourMenuItem', 'partialUrl' and 'rightPanel' refer to the menu option to be clicked, the URL of partial returning the content and the target div where content is to be inserted:

$('#yourMenuItem').on('click', function(event) {
    event.preventDefault();
    event.stopPropagation();   
    $.get("/partialUrl", function(data) {
        $("#rightPanel").replaceWith(data);
    });
});

You should probably use @(Url.Action("Action", "Controller")) to derive the partial URL.