ASP.NET Webアプリケーションの1つで、BulkEditGridView(すべての行を同時に編集できるGridView)を使用して注文フォームを実装しています。グリッドには、各アイテムの合計(コストx数量)を計算する列と、ページの下部にある総計フィールドがあります。ただし、現在、これらのフィールドはポストバックごとにのみ更新されます。ユーザーが数量を変更すると、合計と総計が新しい値を反映するように更新されるように、これらのフィールドを動的に更新する必要があります。これを実現するためにAJAXソリューションを使用しようとしましたが、非同期のポストバックがページのフォーカスを妨げます。純粋にクライアント側のソリューションが存在することを想像しており、コミュニティの誰かが共有できることを願っています。
2 に答える
計算を 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
}
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
1つの解決策は、RowDataBoundメソッドでJavaScriptを作成して、テキストボックスが変更されたときにそれらの合計を常に更新することです。
したがって、RowDataBound中に、追加する必要のあるテキストボックスを追加するjavascript文字列をメモリに構築し始めます。RowDataBoundの優れている点は、TextBox.ClientIdを呼び出すことで、これらのテキストボックスのクライアント側IDを取得できることです。このJavaScriptをページに追加してから、このスクリプトを呼び出すために必要な各テキストボックスにonkeyupイベントも追加します。
つまり、次のようなものです(これは、グリッドビューからの行にバインドされたイベントです)
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クラスを使用して、テキストボックス「MyAddUpJavaScriptMethod」のonkeyupによって呼び出されるメソッドをページに追加します。
それが理にかなっていて、役立つことを願っています