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

1) Create a JSON object on the server with the data for each object the list is representing, and on the client form the <li> string for each item in the JSON object and append it to the #subject_list's html.

2) Create the <li> elements on the server (using partial views or strings built from data) and return the html directly to jquery, then have jquery put that html into the #subject_list.

Now it seems like method 2 would be better performance wise, as it keeps the client from having to do the string manipulation and puts the task on the server (which is run from compiled c# code rather than interpreted javascript).

However, I can't seem to figure out how to detect errors reliably with the 2nd method. For example, if the database connection failed, query failed, meteor destroys the planet, etc... I want the ability to return an error and display that error in a modal dialog. Unless I am looking at things wrong (which is possible), it seems that if I want to use the 2nd method, I am coding my javascript to expect html and thus don't have the option to detect if an error message occurred.

So what is the best way to form html when using asp.net and jquery?

Thanks!

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'. ;)

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.

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)