Totalizando un GridView en ASP.NET

Question

En una de mis aplicaciones web ASP.NET, estoy usando un BulkEditGridView (un GridView que permite editar todas las filas al mismo tiempo) para implementar un formulario de pedido. En mi cuadrícula, tengo una columna que calcula el total de cada artículo (costo x cantidad) y un campo de total general en la parte inferior de la página. Actualmente, sin embargo, estos campos solo se actualizan en cada post-back. Necesito que estos campos se actualicen dinámicamente para que a medida que los usuarios cambien las cantidades, los totales y la actualización del total general se reflejen en los nuevos valores. He intentado usar las soluciones AJAX para lograr esto, pero los post-back asíncronos interfieren con el enfoque en la página. Me imagino que existe una solución puramente del lado del cliente, y espero que alguien de la comunidad pueda compartir.

Answer 1

Si sus cálculos se pueden reproducir en JavaScript, el método más sencillo sería usar jQuery para obtener todos los elementos como este:

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

O si sus cálculos son demasiado complejos para ser ejecutados en JavaScript (o las restricciones de tiempo lo impiden), entonces una llamada AJAX a un servicio web es la mejor manera. Digamos que tenemos nuestro servicio web como este:

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

Necesitará algún JavaScript para invocar el servicio web, puede hacerlo con jQuery o MS AJAX. Mostraré una combinación de ambos, solo por diversión:

$("#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;
}

Consulte este enlace para obtener información completa sobre el método Sys.Net.WebServiceProxy.invoke: http://www.asp.net/AJAX/Documentation/Live/ClientReference/Sys.Net/WebServiceProxyClass/WebServiceProxyInvokeMethod.aspx

Answer 2

Una solución es crear algunos javascript en tu método RowDataBound para actualizar constantemente esos totales cuando cambian los cuadros de texto.

Entonces, durante RowDataBound, comience a construir una cadena de javascript en la memoria que agregará los cuadros de texto que necesita agregar. Lo bueno de RowDataBound es que puede obtener los ID del lado del cliente de estos cuadros de texto llamando a TextBox.ClientId. Agregue este javascript a la página, luego agregue también un evento onkeyup a cada cuadro de texto que necesite para llamar a este script.

Entonces, algo como (esto es un evento vinculado a una fila desde una vista de cuadrícula)

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 + ";
   }
}

Luego, una vez que hayas creado todo el script, usa tu clase Page.ClientScript para agregar un método a tu página a la que llamará tu onkeyup en tus cuadros de texto " MyAddUpJavaScriptMethod "

Espero que tenga sentido y ayuda