在 ASP.NET 中汇总一个 GridView答案

【问题标题】：Totaling a GridView in ASP.NET在 ASP.NET 中汇总一个 GridView
【发布时间】：2010-09-13 22:12:44
【问题描述】：

在我的一个 ASP.NET Web 应用程序中，我使用BulkEditGridView（允许同时编辑所有行的 GridView）来实现订单。在我的网格中，我有一列计算每个项目的总数（成本 x 数量）和页面底部的总计字段。但是，目前，这些字段仅在每次回发时刷新。我需要动态更新这些字段，以便当用户更改数量时，总计和总计更新以反映新值。我曾尝试使用 AJAX 解决方案来完成此操作，但异步回发会干扰页面上的焦点。我想存在一个纯粹的客户端解决方案，我希望社区中的某个人可以分享。

【问题讨论】：

标签： asp.net javascript ajax gridview

【解决方案1】：

如果您的计算可以在 JavaScript 中重现，最简单的方法是使用 jQuery 来获取所有项目，如下所示：

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

或者，如果您的计算过于复杂而无法在 JavaScript 中完成（或者时间限制阻止了它），那么对 Web 服务的 AJAX 调用是最好的方法。假设我们的网络服务是这样的：

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

您需要一些 JavaScript 来调用 Web 服务，您可以使用 jQuery 或 MS AJAX 来完成。我将展示两者的组合，只是为了好玩：

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

查看此链接以获取有关 Sys.Net.WebServiceProxy.invoke 方法的完整信息：http://www.asp.net/AJAX/Documentation/Live/ClientReference/Sys.Net/WebServiceProxyClass/WebServiceProxyInvokeMethod.aspx

【讨论】：

【解决方案2】：

一种解决方案是在您的 RowDataBound 方法中构建一些 javascript，以便在文本框更改时不断更新这些总数。

因此，在 RowDataBound 期间，开始在内存中构建一个 javascript 字符串，它将添加您需要添加的文本框。 RowDataBound 的好处是您可以通过调用 TextBox.ClientId 来获取这些文本框的客户端 ID。将此 javascript 添加到页面，然后还将 onkeyup 事件添加到调用此脚本所需的每个文本框。

类似（这是来自 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 + ";
   }
}

然后，一旦您构建了整个脚本，请使用您的 Page.ClientScript 类向您的页面添加一个方法，该方法将由您的 onkeyup 在您的文本框“MyAddUpJavaScriptMethod”中调用

希望有意义并有所帮助

【讨论】：