Comment faire un post onclientclick en utilisant jQuery avec asp.net

Question

Je souhaite recréer la publication du panneau de mise à jour sans utiliser de panneau de mise à jour pour effectuer la publication. Quelle est la méthode générique pour ce faire?

Par exemple, sur Stackoverflow, lorsque vous répondez positivement ou négativement à une question, une publication est postée pour mettre à jour la base de données et je parierais qu'ils n'ont pas utilisé de panneau de mise à jour.

Qu'est-ce que j'ai?

J'ai une table avec des données de table. Lorsque je clique sur l'élément td dans une colonne complète, je souhaite effectuer une mise à jour de la base de données et mettre également à jour un gridview sur la page elle-même. La grille affiche tous les éléments actuellement cliqués dans la table car elle a été mise à jour via "notre méthode".

Vous recherchez une bonne méthode générique que je pourrais utiliser pour beaucoup de publications asynchrones sans panneau de mise à jour.

Answer 1

Le fonctionnement de Stack Overflow diffère de cet article CodeProject de deux manières importantes.

• Stack Overflow effectue sa demande AJAX par rapport à une action du contrôleur ASP.NET MVC, et non à une page ASPX autonome. Vous pourriez considérer cela comme l'analogue MVC d'une méthode de page ASP.NET AJAX. Dans les deux cas, la méthode ASPX sera à la traîne en termes de performances.

• La demande AJAX de Stack Overflow renvoie un résultat sérialisé JSON, et non du texte brut arbitraire ou du code HTML. Cela rend sa gestion côté client plus normalisée et généralement plus propre.

Par exemple: lorsque j'ai voté pour cette question, une requête XmlHttpRequest a été adressée à / questions / 171000 / vote, avec un "voteTypeId". de 2 dans les données POST.

Le contrôleur qui a traité la demande a ajouté mon vote à une table quelque part, puis a répondu avec ce JSON:

{"Success":true,"NewScore":1,"Message":"","LastVoteTypeId":2}

En utilisant ces informations, ce JavaScript prend en charge la mise à jour de l'affichage côté client:

var voteResult = function(jClicked, postId, data) {
  if (data.Success) {
    jClicked.parent().find("span.vote-count-post").text(data.NewScore);
    if (data.Message)
      showFadingNotification(jClicked, data.Message);
  }
  else {
    showNotification(jClicked, data.Message);
    reset(jClicked, jClicked);

    if (data.LastVoteTypeId) {
      selectPreviousVote(jClicked, data.LastVoteTypeId);
    }
  }
};

Si vous utilisez WebForms, l'exemple des méthodes de page d'appel que vous avez trouvées sur mon blog est tout à fait approprié.

Toutefois, je vous suggérerais de considérer un service Web pour toute fonctionnalité centralisée (comme cet exemple de vote), au lieu de méthodes de page. Les méthodes de page semblent légèrement plus faciles à écrire, mais elles présentent également des inconvénients en matière de réutilisation et tendent à fournir une illusion de sécurité supplémentaire qui n’existe pas vraiment.

Voici un exemple de la même chose que vous avez trouvée, mais avec des services Web (les commentaires sur ce message ont en réalité conduit au message que vous avez trouvé):

http: // encosia .com / 2008/03/27 / using-jquery-to-consume-aspnet-json-web-services /

Answer 2

Vous pouvez simplement utiliser un appel AJAX standard pour accomplir cela. Créez une page .aspx qui met à jour la base de données dans sa méthode Page_Load et affiche les informations souhaitées (telles que la valeur de la base de données actuelle après la mise à jour) au format XML. Faites ensuite un appel AJAX à cette page en utilisant jQuery.

Vous pouvez également renvoyer un fragment HTML (c'est-à-dire un GridView mis à jour) et utiliser jQuery pour insérer le code HTML mis à jour dans la page en cours.

Modifier: L'échantillon 2 sur cette page devrait être très proche de ce que vous voulez:
http://www.codeproject.com/KB/ajax/AjaxJQuerySample.aspx

Answer 3

Cette link est ce que j’ai trouvé être la meilleure chose à faire et me permet d’utiliser du javascript et des méthodes Web.