Où formuler le html quand on utilise asp.net mvc et jquery ?

Question

Je travaille actuellement sur des prototypes pour un site web que je souhaite créer. Une partie de ce site sera assez lourde en javascript. En ce moment, je suis en train d'apprendre le combo jquery et ASP.Net MVC framework.

Le problème que je rencontre est de savoir où je dois former le html généré pour les requêtes ajax. Par exemple, au chargement d'une page, je veux charger une liste à puces appelée #subject_list en fonction du projet chargé (par exemple, si je navigue vers /Projet/Manage/3, l'identifiant du projet est 3). De la façon dont je le vois (et j'ai appris les deux façons), je peux former le fichier

• éléments de deux façons :

  1) Créez un objet JSON sur le serveur avec les données de chaque objet que la liste représente, et sur le client, formez l'objet <li> pour chaque élément de l'objet JSON et l'ajouter au html de la #subject_list.

  2) Créez le <li> sur le serveur (en utilisant des vues partielles ou des chaînes construites à partir de données) et de renvoyer le html directement à jquery, puis de demander à jquery de placer ce html dans la liste #subject_list.

  Il semble maintenant que la méthode 2 serait plus performante, car elle évite au client d'avoir à manipuler les chaînes de caractères et confie cette tâche au serveur (qui est exécuté à partir de code c# compilé plutôt que de javascript interprété).

  Cependant, je ne parviens pas à trouver comment détecter les erreurs de manière fiable avec la deuxième méthode. Par exemple, si la connexion à la base de données a échoué, si la requête a échoué, si un météore détruit la planète, etc... Je veux pouvoir renvoyer une erreur et afficher cette erreur dans une boîte de dialogue modale. À moins que je ne regarde mal les choses (ce qui est possible), il semble que si je veux utiliser la deuxième méthode, je dois coder mon javascript pour qu'il s'attende à du html et donc ne pas avoir la possibilité de détecter si un message d'erreur s'est produit.

  Quelle est donc la meilleure façon de former du html en utilisant asp.net et jquery ?

  Merci !

Answer 1

Dans tous les cas, vous allez utiliser un POST jQuery pour récupérer le json/html du serveur en mode ajax. Utilisez l'option error: dans l'application jQuery $.ajax( pour gérer une réponse qui a échoué.

Edita:
Il s'agit d'une fonction assez simple qui ajoute/met à jour les commentaires sur les images miniatures à partir d'un tableau html :

                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();                                
                            }
                        });                             
                    }
                }

Je pense que l'idéal serait que votre ajax jQuery gère les réponses HTTP de la série 500 de manière appropriée. C'est probablement plus "MVC-ish" ;)

Answer 2

Je pense que la méthode 2 est la meilleure, mais comme vous l'avez dit, si vous retournez text/html il n'y a pas de paramètre pour dire quel est l'état actuel de la requête (ok/erreur), mais il y a une approche qui nécessite que vous fassiez un petit hack sur le ViewEngine et il vous permettra de rendre des vues partielles au format String, de cette façon vous pouvez retourner une structure JSON avec l'état ainsi qu'un morceau de HTML (la vue partielle).

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

Vous pouvez y jeter un coup d'œil aquí .

Answer 3

Cela dépend si vous devez également fournir une version non-Ajax. Si vous avez besoin de cela, alors une manière très productive est de fournir une vue partielle pour les clients ajax ou une vue ordinaire pour les autres clients. (votre numéro 2)