How do I render the partial view using jquery?

We can render the partial View like this:

<% Html.RenderPartial("UserDetails"); %>

How can we do the same using jquery?

link|flag

76% accept rate

3 Answers

up vote 14 down vote accepted

I have used ajax load to do this:

$('#user_content').load('/User/UserDetails');
link|flag
2  
Generally I think you're better off going with the Url.Action helper instead of hard-coding the path. This is going to break if your web site is in a subdirectory rather than at the root. Using the helper fixes that problem and allows you to add parameters with dynamically set values. – tvanfosson Nov 3 at 19:33

You can't. You can, however, call a method (action) that will render the partial view for you.

$.get( '<%= Url.Action("details","user", new { id = Model.ID } %>',
       function(data) {
           $('#detailsDiv').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 Partial( "UserDetails", model );
}
link|flag
I keep getting bad request with this example code your gave. I copied as is and just changed the Controller action it should go to. I am not sure what "user" is for. – chobo2 Nov 8 '09 at 5:55
I just used some "likely" controller and action names since you didn't include any code that we could go by. Just replace "details" with your action and "user" with your controller name. – tvanfosson Nov 8 '09 at 13:04
Thanks again for a great answer tvanfosson. – Mike Nov 3 at 19:28

You'll need to create an Action on your Controller that returns the rendered result of the "UserDetails" partial view or control. Then just use an Http Get or Post from jQuery to call the Action to get the rendered html to be displayed.

link|flag

Your Answer

 
or
never shown

Not the answer you're looking for? Browse other questions tagged or ask your own question.