在ASP.NET中总计GridView

时间:2020-03-06 14:51:31  来源:igfitidea点击:

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

解决方案

一种解决方案是在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"中调用

希望有意义并有所帮助

如果计算结果可以用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