ASP.NET MVC rendering partial view with jQuery ajax

ajax, asp.net-mvc, jquery, partial-views

Solution

All `load` does is return HTML from a server, so why not just append to a temporary div and then get the HTML from it on success?

var $dummy = $("<div>");
$dummy.load("MyController/Details", function(response, status, xhr) {
    var $container = appendContainer();
    if (status != "success") {
        $container.html('an error has occured');
    }
    else
    {
        $container.html($dummy.html());
    }
    $dummy.remove();
});

UPDATE:

If you're expecting an exception then you should handle it. If you're basically allowing the error to occur just to get `status != "success"` then that's a serious code smell. You should catch the error and return a different PartialView.

public ActionResult Details(int id)
{
    try
    {
        DetailsViewModel model = 
            ModelBuilder.GetDetailsViewModel(id, _repository);
        return PartialView("Details", model);
    }
    catch (SomeException ex)
    {
        return PartialView("Error", ex.Message);
    }
}

Then you're guaranteed to always get a valid HTML response and if you don't, then your basic error `an error occured` will come into play.

Problem

I have a controller action which renders a partial view: ``` public ActionResult Details(int id) { DetailsViewModel model = ModelBuilder.GetDetailsViewModel(id, _repository); return PartialView("Details", model); } ``` and I'm loading the returned content into a dynamic element as follows: ``` $container = appendContainer(); // adds a div to the dom with the correct id $container.load("MyController/Details", function(response, status, xhr) { if (status != "success") { $(container).html('an error has occured'); } }); ``` so this creates a div, and then loads the returned content into that div. I want to alter this slightly so that the container div is only created if the call to the controller is succesful. So: - jQuery calls the controller action - controller returns PartialView, or null if Id not found - If PartialView is returned, the container is created and loaded with the returned content. - If the controller doesn't find the Id, no content is created and an alert is displayed. I'd appreciate any pointers on how I could best acheive this.

Original source