2008-09-29 6 views
2

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 formulaire de commande. Dans ma grille, j'ai une colonne qui calcule le total pour chaque article (coût x quantité) et un grand champ total au bas de la page. Actuellement, cependant, ces champs ne sont actualisés qu'à chaque post-retour. J'ai besoin que ces champs soient mis à jour dynamiquement afin que les utilisateurs modifient les quantités, les totaux et la mise à jour totale pour refléter les nouvelles valeurs. J'ai essayé d'utiliser des solutions AJAX pour y parvenir, mais les post-back asynchrones interfèrent avec l'accent mis sur la page. J'imagine qu'une solution purement axée sur le client existe, et j'espère que quelqu'un dans la communauté pourra partager.Totalisation d'un GridView dans ASP.NET

Répondre

3

Si vos calculs peuvent être reproduits en JavaScript la méthode la plus simple serait d'utiliser jQuery pour obtenir tous les articles comme celui-ci:Si vos calculs sont trop complexes pour être exécutés en JavaScript (ou que les contraintes de temps l'empêchent), un appel AJAX à un service Web est le meilleur moyen de le faire. Disons que nous avons notre webservice comme ceci:

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

Vous aurez besoin d'un JavaScript pour appeler le webservice, vous pouvez le faire soit avec jQuery ou MS AJAX. Je vais vous montrer un combo de 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 plus d'informations sur la méthode complète Sys.Net.WebServiceProxy.invoke: http://www.asp.net/AJAX/Documentation/Live/ClientReference/Sys.Net/WebServiceProxyClass/WebServiceProxyInvokeMethod.aspx

1

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

Donc, pendant le RowDataBound, commencez à créer une chaîne javascript en mémoire qui ajoutera les zones de texte que vous avez besoin d'ajouter. Ce qui est bien dans RowDataBound, c'est que vous pouvez obtenir les identifiants côté 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 dont vous avez besoin pour appeler ce script.

donc quelque chose comme (ce qui est une ligne événement lié d'une 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 + "; 
    } 
} 

Ensuite, une fois que vous avez construit ce script ensemble, utilisez votre classe Page.ClientScript pour ajouter une méthode pour vous la page qui sera être appelé par votre onkeyup dans vos zones de texte « MyAddUpJavaScriptMethod »

l'espoir qui fait sens et aide