ASP.NETでGridViewを合計する

Question

ASP.NET Webアプリケーションの1つで、 BulkEditGridView （すべての行を同時に編集できるGridView）を使用して注文フォームを実装します。グリッドには、各アイテムの合計（コストx数量）を計算する列と、ページの下部にある総計フィールドがあります。ただし、現在、これらのフィールドはすべてのポストバックでのみ更新されます。ユーザーが数量を変更すると、合計と総計が新しい値を反映するように更新されるように、これらのフィールドを動的に更新する必要があります。私はこれを達成するためにAJAXソリューションを使用しようとしましたが、非同期ポストバックはページのフォーカスに干渉します。純粋にクライアント側のソリューションが存在することを想像し、コミュニティの誰かが共有できることを期待しています。

Answer 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
}

Webサービスを呼び出すにはJavaScriptが必要です。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

Answer 2

1つの解決策は、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によって呼び出されるメソッドをページに追加します＆quot; MyAddUpJavaScriptMethod＆quot;

意味があり、役立つ希望