代码之家 › 专栏 › 技术社区 › Joseph Sturtevant

在ASP.NET中汇总GridView

gridview ajax javascript asp.net

Joseph Sturtevant · 技术社区 · 16 年前

在我的一个ASP.NET Web应用程序中,我正在使用 BulkEditGridView (允许同时编辑所有行的网格视图)实现订单。在我的网格中,我有一列计算每个项目的总计(成本x数量)和页面底部的总计字段。但是,目前,这些字段只在每次回发时刷新。我需要动态更新这些字段,这样当用户更改数量时,总计和总计更新将反映新值。我尝试使用Ajax解决方案来完成这一点,但是异步回发会干扰页面的焦点。我认为存在一个纯粹的客户端解决方案,我希望社区中的某个人能够分享。

2 回复 | 直到 16 年前

Aaron Powell 16 年前

如果您的计算可以在javascript中重现,那么最简单的方法是使用jquery获取所有类似的项目:

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

或者,如果您的计算太复杂而不能用JavaScript(或者时间限制阻止了它),那么对Web服务的Ajax调用是最好的方法。假设我们有这样的Web服务:

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

您将需要一些JavaScript来调用WebService,您可以使用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

WebDude 16 年前

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

希望这有意义,有帮助