Render Partial View Using jQuery in ASP.NET MVC

G

8

235

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?

Gethsemane answered 15/10, 2009 at 3:22 Comment(3)

You could have a look at below article as well. tugberkugurlu.com/archive/… It follows a different approach and enhances the way. – Bathsheba 9/9, 2011 at 21:34

Stupid question. Is UserDetails a partial view as a cshtml page: UserDetails.cshtml? I am trying to load a partial view . And normally I would use: @Html.Partial("~/Views/PartialViews/FirstPartialViewTwo.cshtml") – Seismism 4/1, 2018 at 3:39

@GeorgeGeschwend, Nothing is stupid here, till someone can respond to it. UserDetails(UserDetails.cshtml) is the Partial View inside the User Controller. As in the comments of the marked answer, its better to use Url.Action instead of hard coding the full path of the view. – Gethsemane 11/1, 2018 at 13:35

G

163

I have used ajax load to do this:

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

Gethsemane answered 12/11, 2009 at 11:37 Comment(12)

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. – Shelving 3/11, 2010 at 19:33

You could do $('#user_content').load('@Url.Content("~/User/UserDetails")') to get around that- i often use this method if i need the javascript to slap on the querystring params at the end of the url – Kappa 30/4, 2012 at 10:8

In this answer, UserDetails is a name of an action, not a partial view, right? – Reece 11/6, 2012 at 23:2

Yes. UserDetails is the name of an action which returns a PartialView. – Gethsemane 12/6, 2012 at 4:7

@Gethsemane : Urls should always be evaluated using @Url.Action("ActionName","ControllerName", new { area = "AreaName" } ) instead doing Handcoding. – Nahshun 21/6, 2013 at 18:5

@PKKG. @Url.Action() only evaluates in Razor. this doesn't work if OP wants to put their code in a separate js file and reference it. – Jacquijacquie 3/7, 2013 at 21:6

@Jacquijacquie : can't i initialize the js variable in View and access it in Js File ?? – Nahshun 4/7, 2013 at 6:11

@PKKG: Sure you can do that, but that defeats putting all your js code in it's own file. – Jacquijacquie 4/7, 2013 at 15:31

@prasad i need to send model of partial view to action then do some tasks finally update model and send back to partial and update partial. How could i send model for example as form.serialize in load? i think it's impossible, but if you have any idea please share. – Anodize 11/4, 2014 at 9:25

Be careful of this solution. IE has tends to cache the content of the partial view. Since there is no parameter here that disables the cache, you can find yourself loading stale data. – Sort 6/5, 2015 at 15:43

@Gethsemane what is #user-content here? – Adolf 16/4, 2017 at 7:42

@Adolf its the id of a div element – Gethsemane 17/4, 2017 at 5:50

S

303

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>

Shelving answered 15/10, 2009 at 3:26 Comment(22)

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. – Blaineblainey 8/11, 2009 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. – Shelving 8/11, 2009 at 13:4

any idea how this would work with Razor? tried $.get( "@Url.Action(\"Manifest\",\"Upload\", new { id = " + key + " })", function(data) { $("<div/>").replaceWith(data); } ); – Ho 24/5, 2011 at 19:23

@Patrick - I'd use single quotes (double is harder to read) for the JS. Regardless you don't need to "quote" the quote characters or construct a string -- just let the UrlHelper do it's work. See my updated example. – Shelving 24/5, 2011 at 19:28

Works awesome thanks! Why is it caching the Partial View? In my partial view I'm simply outputting the current date and time. – Affinity 6/1, 2012 at 13:52

My bad, the issue was that the element was replaced and was no longer available for replacement the second time. – Affinity 6/1, 2012 at 14:23

Superb solution. And fixed a treeview state issue for me – Cypripedium 6/7, 2012 at 20:11

Looking at the supplied Controller code - Any chance the 'Partial' is supposed to be 'PartialView'? I'm getting an error as described here: #17206388 – Prentiss 20/6, 2013 at 10:14

@Prentiss nice catch! Updated. – Shelving 20/6, 2013 at 13:2

@tvanfosson, please consider the usage of .html. I was forced to create some trick $('#partialView').children('span').replaceWith('<span>' + data + '</span>'); to always have a span to replace with the new content. Best Luis – Cletuscleve 21/6, 2013 at 15:55

@Custódio it's just an example, but the idea would be that the partial itself would be an entire container, i.e., be wrapped with <div id="detailsDiv">...</div>, then you would simply replace the entire container with the new view. If your partial doesn't include the container then just use $('#detailsDiv').html(data); – Shelving 21/6, 2013 at 17:5

How to access "model" from within javascript ? – Aggri 16/8, 2013 at 15:46

Very good stuff. I wonder if the first poster's idea has any merit? It'd be nice to address the replaceWith challenge for completeness. – Mcgaha 29/12, 2013 at 2:19

Is there a way to avoid inline javascript using this solution? – Ricks 12/1, 2014 at 16:17

@Ricks - there's no requirement for inline JavaScript with this. All of the JavaScript can be in separate files. – Shelving 13/1, 2014 at 15:0

@Shelving So javascript supports razor? – Ricks 13/1, 2014 at 15:50

@Ricks I see what you mean, but really that's only for this particular example. It's hard to show how you'd hook it together otherwise. In reality I'd probably use data attributes for the glue. – Shelving 13/1, 2014 at 17:25

I use this method to load a table. But now for some reason my Jquery data-table is not working? And I think it has to do with loading the content in. – Foramen 27/2, 2014 at 11:43

@Foramen - if you're reloading the entire table, you might need to reapply the plugin since the DOM elements it was originally connected to have been replaced. It might be better to connect it to a method that returns the data as JSON, datatables.net/examples/data_sources/server_side.html – Shelving 27/2, 2014 at 12:50

@Shelving I tried this example with a cshtml page. Well it didn't work. I a guessing I need to try another approach(?). I left the div empty thinking it would load the partial view into the <div id="detailsDiv">. I debugged through the jquery and the Action method and that part works. but after I return: return PartialView("UserDetails", model); in the Details action method the div is empty. What am I doing wrong? this might be the wrong approach(?). Do you or anyone have any ideas? – Seismism 4/1, 2018 at 3:27

@GeorgeGeschwend I'm confident that this method works. Check to see if you're seeing errors in the console. Check if the jQuery selectors find the elements you're expecting (with the browser debugger). Make sure that the partial view you're returning via AJAX really contains the data you expect. – Shelving 4/1, 2018 at 14:8

@Shelving So for what I was doing, it worked (!) finally. It boiled down to a spelling error. eye roll $detailDiv is what I had created as a var in jquery, ergo: var $detailDiv = $('#detailsDiv'),... and later in the jquery I had $detailsDiv...ergo: $detailsDiv.replaceWith(data); so that screwed me up royally. Thanks its a great example! :) – Seismism 5/1, 2018 at 3:55

G

163

I have used ajax load to do this:

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