Actualiser les informations de la table à l'aide de jQuery et ASP.NET MVC

Question

J'ai une page simple qui affiche les adresses e-mail d'un utilisateur dans un tableau. J'ai aussi une zone de texte sous la table et un bouton "Ajouter". Actuellement, j'utilise un message de formulaire simple qui est géré par un contrôleur qui va ajouter l'adresse e-mail à la base de données et recharger la page. Cela fonctionne bien, mais je cherche à rationaliser le processus en utilisant jQuery et AJAX afin que la page n'a pas besoin d'être rafraîchie.

Quelle est la meilleure façon de procéder? J'imagine que je vais devoir configurer un écouteur d'événement pour l'événement click du bouton, effectuer un appel AJAX à une URL comme "Email/Ajouter". Là où je me perds, c'est de déterminer quel type d'information retourner de cette action du contrôleur et comment cette information peut être analysée du côté client pour mettre à jour la table des adresses de courrier électronique. Y a-t-il de bons exemples?

Answer 1

Vous devez utiliser XML ou JSON. Je préfère JSON car il est facile d'analyser le côté javascript.

Dans le gestionnaire de clics pour le bouton d'ajout, effectuez un appel AJAX à un chemin d'accès MVC spécifie quel e-mail a été ajouté. Faites le code pour ce chemin insérez l'email spécifié. Ensuite, il suffit de retourner un résultat:

{ 
    result: 'SUCCESS', 
    description: 'Email Added.' 
} 

Ensuite, dans votre rappel AJAX, analyser le résultat comme ceci:

//This function abstracts away the strangeness in dealing with the eval method and returning JSON objects 
//If there is a better way, let me know 
function ParseJSON(jsonText) { 
    var ret = null; 
    eval('ret = '+jsonText); 
    return ret; 
} 

var ret = ParseJSON(response.value);; 

if(ret.result == 'SUCCESS') { 
    //Add a new TR to your table here 
} else { 
    //Display the error message here 
    // alert(ret.description); 
} 

Le résultat de « succès » signifie que le serveur déjà ajouté l'e-mail à base de données. Donc, nous ajoutons simplement la ligne dans notre table dynamiquement avec JavaScript et vous n'avez pas besoin d'actualiser la page.

Answer 2

Si vous souhaitez utiliser jquery, vous pouvez retourner une vue partielle et insérer le code HTML de retour dans votre document actuel. ajaxloading div contient un gif de chargement rotatif. La valeur renvoyée est insérée dans une table en tant que dernière valeur. La vue renvoie un morceau de html entre tr-tags.

$("#ajaxLoading").show(); 

    $.ajax({ 
     type: "POST", 
     url: "/Hoofdgroepen/Add", 
     data: "nummer=" + nummer + "&omschr=" + omschr, 
     dataType: "html", 
     success: function(result) { 
      //alert(result);         
      $("tr:last").after(result); 
      $("#ajaxLoading").hide(); 
      $("#hfdgrpForm").resetForm(); 
     } 
    }); 

Answer 3

Lorsque vous appliquez la anwser de EnganderedMassa, vous pouvez aussi la capacité côté client avec un micro-template. C'est une technique utilisée par John Resig/jQuery dieu pour analyser et formater les ensembles de données renvoyés par un article. Votre table est un endroit parfait pour y parvenir.

Voici deux articles de blog qui utilisent cette technique (ils sont basés sur .Net, mais légers sur le côté .Net).

Encosia - JTemplate

.Net and John Resig's micro template