Render Partial View Using jQuery in ASP.NET MVC

You can't render a partial view using only jQuery. You can, however, call a method (action) that will render the partial view for you and add it to the page using jQuery/AJAX. In the below, we have a button click handler that loads the url for the action from a data attribute on the button and fires off a GET request to replace the DIV contained in the partial view with the updated contents.

$('.js-reload-details').on('click', function(evt) {    evt.preventDefault();    evt.stopPropagation();    var $detailDiv = $('#detailsDiv'),        url = $(this).data('url');    $.get(url, function(data) {        $detailDiv.replaceWith(data);             });});

where the user controller has an action named details that does:

public ActionResult Details( int id ){    var model = ...get user from db using id...    return PartialView( "UserDetails", model );}

This is assuming that your partial view is a container with the id detailsDiv so that you just replace the entire thing with the contents of the result of the call.

Parent View Button

 <button data-url='@Url.Action("details","user", new { id = Model.ID } )'         class="js-reload-details">Reload</button>

User is controller name and details is action name in @Url.Action(). UserDetails partial view

<div id="detailsDiv">    <!-- ...content... --></div>

I have used ajax load to do this:

$('#user_content').load('@Url.Action("UserDetails","User")');

@tvanfosson rocks with his answer.

However, I would suggest an improvement within js and a small controller check.

When we use @Url helper to call an action, we are going to receive a formatted html. It would be better to update the content (.html) not the actual element (.replaceWith).

More about at: What's the difference between jQuery's replaceWith() and html()?

$.get( '@Url.Action("details","user", new { id = Model.ID } )', function(data) {    $('#detailsDiv').html(data);}); 

This is specially useful in trees, where the content can be changed several times.

At the controller we can reuse the action depending on requester:

public ActionResult Details( int id ){    var model = GetFooModel();    if (Request.IsAjaxRequest())    {        return PartialView( "UserDetails", model );    }    return View(model);}