Render Partial View Using jQuery in ASP.NET MVC

by

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>

More Related Contents:

  1. Concat two arrays But concat is not working
  2. JQuery – $ is not defined
  3. Passing data to a bootstrap modal
  4. Required field validations not working in JQuery Popup MVC 4
  5. How to open a URL in a new Tab using JavaScript or jQuery? [duplicate]
  6. How can I detect if Flash is installed and if not, display a hidden div that informs the user?
  7. Why would multiple simultaneous AJAX calls to the same ASP.NET MVC action cause the browser to block?
  8. C# Web method is not calling in javascript
  9. Passing data to a jQuery UI Dialog
  10. Disabling the button after once click
  11. jQuery $.cookie is not a function
  12. How to keep cascade dropdownlist selected items after form submit?
  13. Is it any limit for POST data size in Ajax?
  14. Cannot handle 302 redirect in ajax and why? [duplicate]
  15. jQuery post request (not AJAX)
  16. How to use jQuery UI Calendar/Date PIcker for week rather than day?
  17. jQuery: How to traverse / Iterate over a list of object
  18. Difference between $.post and $.ajax?
  19. What is jQuery Unobtrusive Validation?
  20. Submit form using AJAX in Asp.Net mvc 4
  21. ASP.NET MVC Partial view ajax post?
  22. How to post ASP.NET MVC Ajax form using JavaScript rather than submit button
  23. Post JavaScript array with AJAX to asp.net MVC controller
  24. How do I check if an element is hidden in jQuery?
  25. jQuery CSS plugin that returns computed style of element to pseudo clone that element?
  26. Jquery check if element is visible in viewport [duplicate]
  27. Adding CSRFToken to Ajax request
  28. jQuery.getScript alternative in native JavaScript
  29. How to stop an animated gif from looping
  30. Is there a ‘has focus’ in JavaScript (or jQuery)?

Leave a Comment