Totaliser un GridView dans ASP.NET

Question

Dans l'une de mes applications Web ASP.NET, j'utilise un BulkEditGridView (un GridView qui permet d’éditer toutes les lignes en même temps) pour implémenter un bon de commande. Dans ma grille, j'ai une colonne qui calcule le total pour chaque article (coût x quantité) et un champ de total général au bas de la page. Actuellement, toutefois, ces champs ne sont actualisés qu'à chaque post-retour. Il faut que ces champs soient mis à jour de manière dynamique afin que les utilisateurs modifient les quantités, les totaux et la mise à jour du total général pour refléter les nouvelles valeurs. J'ai essayé d'utiliser des solutions AJAX pour accomplir cela, mais les post-back asynchrones interfèrent avec le focus sur la page. J'imagine qu'il existe une solution purement axée sur le client et j'espère que quelqu'un de la communauté pourra partager.

Answer 1

Si vos calculs peuvent être reproduits en JavaScript, la méthode la plus simple consiste à utiliser jQuery pour obtenir tous les éléments tels que:

$("#myGridView input[type='text']").each(function(){
  this.change(function(){
    updateTotal(this.value);
  });
});

Ou si vos calculs sont trop complexes pour être effectués en JavaScript (ou que des contraintes de temps l’empêchent de le faire), alors un appel AJAX à un service Web est la meilleure solution. Disons que nous avons notre service Web comme ceci:

[WebMethod, ScriptMethod]
public int UpdateTotal(int currTotal, int changedValue){
  // do stuff, then return
}

Vous aurez besoin de JavaScript pour appeler le service Web. Vous pouvez le faire avec jQuery ou MS AJAX. Je vais montrer une combinaison des deux, juste pour le plaisir:

$("#myGridView input[type='text']").each(function(){
  this.change(function(){
    Sys.Net.WebServiceProxy.invoke(
      "/Helpers.asmx",
      "UpdateTotal",
      false,
      { currTotal: $get('totalField').innerHTML, changedValue: this.value },
      showNewTotal
    );
  });
});

function showNewTotal(res){
  $get('totalField').innerHTML = res;
}

Consultez ce lien pour obtenir des informations complètes sur la méthode Sys.Net.WebServiceProxy.invoke: http://www.asp.net/AJAX/Documentation/Live/ClientReference/Sys.Net/WebServiceProxyClass/WebServiceProxyInvokeMethod.aspx

Answer 2

Une solution consiste à créer du javascript dans votre méthode RowDataBound afin de mettre à jour constamment ces totaux lorsque les zones de texte changent.

Donc, pendant le RowDataBound, commencez à créer une chaîne javascript en mémoire qui additionnera les zones de texte à ajouter. Ce qui est bien dans RowDataBound, c'est que vous pouvez obtenir l'identifiant client de ces zones de texte en appelant TextBox.ClientId. Ajoutez ce javascript à la page, puis ajoutez également un événement onkeyup à chaque zone de texte requise pour appeler ce script.

Donc, quelque chose comme (c'est un événement lié à une ligne depuis un gridview)

private string _jscript;
protected void gridview_RowDataBound(object sender, GridViewRowEventArgs e)
{
   if (e.Row.RowType == DataControlRowType.DataRow)
   {
      //Get your textbox
      Textbox tb = e.Row.FindControl("tbAddUp");
      //Add the event that you're going to call to this textbox's attributes
      tb.Attributes.Add("onkeyup", "MyAddUpJavaScriptMethod();");
      //Build the javascript for the MyAddUpJavaScriptMethod
      jscript += "document.getElementById('" + tb.ClientId + '").value + ";
   }
}

Puis, une fois que vous avez construit tout ce script, utilisez votre classe Page.ClientScript pour ajouter une méthode à votre page, qui sera appelée par votre onkeyup dans vos zones de texte " MyAddUpJavaScriptMethod "

.

L’espoir est logique et utile