Where to form html when using asp.net mvc and jquery?

Answer 1

Either way you're going to use a jQuery POST to get the json/html from the server ajax style. Use the error: property in the jQuery $.ajax( function to handle a failed response.

Edit:
This is a fairly simple function that adds/updates comments on thumbnail images from a html table:

             function commentImage(pgiID) {
                 var commentText =  $("table.gallery td a#"+pgiID).attr("title");

                    var newComment = prompt("Create or update the photo comment:",commentText);
                    if(newComment!=null) {
                        // post comment back to server
                     $("div#"+pgiID+" a").hide();
                     $("div.photoAdminBlock img.loading"+pgiID).show();                            
                        $.ajax({
                            type:       "POST",
                            url:        "/Activities/UpdateImageComment",
                            data:       {id: pgiID, commentText: newComment},
                            success:    function() {
                                // set title attr
                             $.getJSON("/Activities/GetPgiComment/"+pgiID,null,function(data, textStatus) {
                                        $("table.gallery td a#"+pgiID).attr("title",data);
                                        $("div.photoAdminBlock img.loading"+pgiID).hide();
                                        $("div#"+pgiID+" a").show();
                                        $("table.gallery td a#"+pgiID).trigger("click");
                                 });                                    
                            },
                            error:      function(XMLHttpRequest, textStatus, errorThrown) {
                                alert("There was an error when trying to update the comment.\nPlease refresh this page and try again or contact support.");
                                $("div.photoAdminBlock img.loading"+pgiID).hide();
                                $("div#"+pgiID+" a").show();                                
                            }
                        });                             
                    }
             }

I think the ideal thing would be to have your jQuery ajax handle 500-series HTTP responses appropriately. This is prob more 'MVC-ish'. ;)

Answer 2

I think the 2 method is the way to go, but just like you said, if you return text/html there is no parameter to tell what is the current state of the request (ok/error), but there is one approach that require you to do a little hack on the ViewEngine and it will let you render partial Views to String format, that way you can return a JSON structure with the state along with a piece of HTML(the partial view).

   return Json(new { 
      result = "success", 
      timestamp = DateTime.UtcNow, 
      html = this.RenderToString("View", Model) 
    });

You can take a look at it here.

Answer 3

I depends if you also need to deliver a non-Ajax version. If you need that, then a very productive way is to deliver a partial view for ajax clients or a ordinary view for other clients. (your number 2)