【ASP.NET】JavaScriptで変更した値をポストバック後にも保持する

【ASP.NET】JavaScriptで変更した値をポストバック後にも保持する:

使いどころ

サーバー側で処理するまでもないちょっとした処理をjsで行いたいことがよくある。

例えば下記のように、ユーザーが購入数（TextBox）の数字を変えると、合計金額（Label）の値が自動的に「単価 x 購入数」の金額になるような表示を作りたいとする。

購入数：[　　3]個　←TextBox

単価　：　100円　←Label

合計金額：300円　←Label

JavaScript_TextBox購入数.onchange

// TextBox購入数の数値が変わるとLabel合計金額の数値が変わる 
function(){ 
    document.getElementById('Label合計金額').textContent =  
        document.getElementById('TextBox購入数').textContent 
        * document.getElementById('Label単価').textContent; 
} 

ところが、jsでラベルの値を変えても、何らかのポストバックが発生するとに元に戻ってしまう。

ポストバックの仕様

実はポストバック時に現在の値が送信されるものとされないものがあり、それはその要素の種類によって決まっている。

例えばTextBoxなどは、ユーザーによって値が書き換えられることが想定されるため、ポストバック時に現在値が送信される。そのため、特に何もプログラミングしなくても最新の値が適用される。

逆にLabelなどは、基本的に値が変わることはありえないと想定されているため、ポストバック時に現在の値が送信されない。そのため、初期値が適用される。

HiddenFieldを使う

ということで、ポストバック時に現在の値が送信される種類のコントロールであるHiddenFieldを使う。

クライアント側ではラベルとヒドゥンフィールドの両方の値を変更し、サーバー側ではPageLoadイベントの中でラベルの文字列をヒドゥンフィールドの値で上書きする。

JavaScript_TextBox購入数.onchange

function(){ 
    const total =  
        document.getElementById('TextBox購入数').textContent 
        * document.getElementById('Label単価').textContent;  
    document.getElementById('Label合計金額').textContent = total; 
    document.getElementById('Hidden合計金額').value = total; 
} 

C#_コードビハインド側でもPageLoad時に逐一HiddenFieldの値で書き換える

protected void Page_Load(object sender, EventArgs e) 
{ 
    Label合計金額.Text = Hidden合計金額.Value; 
}