ASP.Net ラベルの内容をすぐに更新したい

質問

大変お世話になっております。
昨年は大変お世話になり、多大なご教授をいただきました。
本年も何卒よろしくお願いいたします。

前々からお聞きしようと思っていたのですが、
処理によってラベルの内容がすぐに反映しないのですが
どのようにすればすぐに反映するのでしょうか？

例えば下記のような場合は、ラベルの内容を初期化したいのですが、
それがされるのは、ボタンの処理後になります。
ボタン処理の前にラベルを更新するにはどうすればいいのでしょうか？

もしかしたら　大変初歩的な質問かもしれませんが、
何卒よろしくお願いいたします。

Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles RecDateButton.Click

　　Me.Label1.Text = ""

　　ここからボタンの処理が開始します

End Sub

回答No.10

todo36 · ベストアンサー

クライアント側で、ボタンがクリックされた瞬間に行う。
具体的には、クライアント側でボタンのonclickイベントで行う。

<input type="submit" onclick="document.getElementById('Label1').innerText = ''">

サーバーコントロールにクライアントイベント記述用のOnClientClickプロパティがあるので、そこに書く。
ポストバック時では遅いので、一回目のリクエストのときにonclickイベント付のボタンをブラウザに返す。

protected void Page_Load(object sender, EventArgs e)
{
Button1.OnClientClick = "document.getElementById('" + Label1.ClientID + "').innerText = ''";
}

サーバー側イベントとクライアント側イベントは別物だといことを理解するべし。

ユーザーがボタンをクリック
→ボタンのクライアントイベント(onclick)
→formのsubmit
→ブラウザがPOST
→ASP.NETがポストバックを受け取る
→Page_Loadやらいろいろ
→ボタンのサーバーイベント(Click)
→Renderやらいろいろ
→ブラウザにHTMLを返す
→ブラウザ側の表示

お礼

todo36 さん　お世話になります。
サンプルプログラムありがとうございました。

完全にやりたい事が実現できました。
ASP.Net には動作順番、Javaスクリプト、表示のさせ方など工夫と知識が必要だと改めて知る事ができました。

ありがとうございました。

回答No.9

WebSurfer

> ボタン処理の前にラベルを更新するにはどうすればいいのでしょうか？

できません。

Button1_Click メソッドはサーバー側で動きますが、すべてのコードがサーバー側で実行されてからその結果としての html コードがブラウザに返されます。

そのへんは基本なので、勉強して理解してください。その理解がないと、いつまで経っても初心者レベルから抜け出せません。

（AJAX を使うという方法があるかもしれませんが、今回のケースで AJAX が使えるかはわかりません。）

補足

WebSurfer さん　お世話になります。

なるほど裏技で逃げるとそこから抜け出せなくなるのかもしれませんね。今回の事で、クリックメソッドの動作の順番もお教えいただき改めて、結果としてHtmlとして出力され表示させるプロセスを理解いたしました。ただ、同じボタンを幾度かクリックする必要がある場合、その結果を表示するラベルの値をクリック時にクリアするなどの処理は必須かなと思い今回の質問にいたしました。ASPの概念として今回のような場合、どのように処理を進めればよかったのかなどご指摘がありましたら、お教えくださいますようよろしくお願い申し上げます。

回答No.8

kokorone

kokorone です。RecDateButtonのＯｎＣｌｉｃｋイベントではなく、RecDateButtonのサーバー側処理に埋め込むのです。
サンプルを作成してみました。

サーバー側は、ＶＢで作成しています。

Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles RecDateButton.Click

　　Me.Label1.Text = ""

'ここから
'ボタンクリックのJavaScriptを埋め込みます。
Dim script As New System.Text.StringBuilder
script.Append("<script>")
script.Append(" var ButtonSub = document.getElementById('" & ButtonSub.ClientID & "');" & vbCrLf)
script.Append(" ButtonSub.click();" & vbCrLf)
script.Append(" " & vbCrLf)
script.Append("</script>" & vbCrLf)
'二重登録防止の判定
If (Not ClientScript.IsClientScriptBlockRegistered("sub001")) Then
ClientScript.RegisterStartupScript(Me.GetType, "sub001", script.ToString)
End If
'ここまで
End Sub

補足

kokorone さん　大変お世話になります。
コーディング例も記載していただき、誠にありがとうございました。

上記プログラムで疑似的にボタンクリックでラベルの値をクリアすることができました。
ありがとうございました。
ただ、問題が２点ほどございました。

(1)　ボタンをVisible を　False にするとエラーになってしまいます。　うまく隠す方法が必要。

(2)　マスターページに NavigationMenu があるとクリック後の処理が終わるまでメニューが（通常横並び）縦に表示されてしまう点がありました。

(1)に関してはなんとかできそうですが、(2)に関してはお手上げな感じです。もし(2)に関しまして何か解決策がございまいたら、改めてご指摘いただけますようよろしくお願いいたします。

回答No.7

onos

> ちなみに、下記をPage_Load時に書いてみたのですが、動作しないみたいなのですが、やっぱり的外れなやり方でしょうか？

生成されたHTMLを確認してみましょう。
ボタンのOnClickがどんなふうになってるか、そのスクリプトで正しく動くかどうかみてみればいいはず。

補足

onosさん　お世話になります。

スクリプトを単体で実行する方法がわかりませんでした。
調べて確認したいと思っております。

回答No.6

kokorone

１）見えないボタンを設置する
２）既存の可視ボタンをクリックしたとき、ラベルをクリアする。さらに、ＪａｖａＳｃｒｉｐｔで、見えないボタンをクリックさせる
３）見えないボタンのサーバー側のクリックイベントで、従来のボタンイベントを行う。

この方法なら、お望みの処理が実現できます。

お断り：諸事情により、昼間は、このサイトへの投稿ができないため、補足があれば、夜間とさせていただきます。

補足

kokoroneさん　お世話になります。
補足対応の件、了解いたしました。
ありがとうございます。

ButtonSubというボタンを作成し、VisibleをFalseにし、クリックイベントにプログラムを記述しました。

このボタンクリックを呼び出すメソッドを、元のボタンのButton1 のOnClientClick　に

document.getElementById('ButtonSub').click();

上記を設定し実行してみたのですが、エラーが表示されました。

0x800a138f - Microsoft JScript 実行時エラー: プロパティ 'click' の値を取得できません: オブジェクトは Null または未定義です。

と表示されたのですが、上記スクリプトに間違いがあるのでしょうか？
もしかして　まったく勘違いしておりましたでしょうか？
何卒よろしくお願いいたします。

回答No.5

onos

くみたててるスクリプトは処理の部分だけで関数名とかが書いてないので、それを追加しましょう。
あと、スクリプトの出力はASP.NETがもともと持っている機能としてのスクリプト出力を使うか、リテラルコントロールを適切な箇所にはって、そこに書き出してあげればOKです。

> submit="関数名()"

これ、大丈夫かな？
ASP.NETのボタンは状況により自動的にスクリプトをレンダリングすることもあるので、こういった追記は気をつけましょうね。

補足

onosさん　お世話になります。
どこかに似たような具体例ってないでしょうか？
今回はハードルが高そうです；；

ちなみに、下記をPage_Load時に書いてみたのですが、動作しないみたいなのですが、やっぱり的外れなやり方でしょうか？
なかなか難しいです

　　Dim js As New System.Text.StringBuilder
　　With js
　　　　.Append("var doc = documnet;")
　　　　.Append("var value = "";")
　　　　.Append("var label = doc.getElementById('" & Me.Label1.ClientID & "');")
　　　　.Append("label.innerHTML = value;")
　　End With
　　Me.Button1.OnClientClick = js.ToString

回答No.4

onos

> いろいろ調べ、下記を発見したのですが、Button1_Clickイベントに記述しても何も変わらないのですが、

これ、ブラウザ側で動作させるためのスクリプトを文字列として組み立ててるだけですね。
Button1_Clickイベントに記述しても意味ないです。
このスクリプトは事前にブラウザに出力しておく必要がありますし、ボタンクリック時にこのスクリプトを起動するための部分も書かないといけないです。

補足

onos さん　お世話になります。

なるほど、そうでしたか・・・
ブラウザに事前に出力するということは、
aspx.vb に記述するのではなく、HTMLに直接記述する形になる感じでしょうか？

ボタンクリック時にスクリプトを起動するためには、以下で良いとして、
submit="関数名()"

------------------------------------------------
この部分をどうやって上の　submit="関数名()" と関連させれば良いかなかなか難しいですね

Dim js As New System.Text.StringBuilder
　　With js
　　　　.Append("var doc = documnet;")
　　　　.Append("var value ="" ;")
　　　　.Append("var label = doc.getElementById('" & Me.Label1.ClientID & "');")
　　　　.Append("label.innerHTML = value;")
　　End With

回答No.3

onos

> ボタンのクリックイベントの　Me.Label1.Text = "" の後に、強制的にポストバックさせるなどの関数などないのでしょうか？

ちょっと混乱されているようです。
現状のプログラムの動きを解説すると、

ボタンクリック -> リクエストがサーバに投げられる-> イベントの処理開始 -> ラベルクリア -> ボタンの処理 -> サーバでの処理終了 -> ブラウザにHTMLを返す -> ブラウザ側の表示更新

こういう形になります。

私の提案としては、ボタンクリック直後にリクエストをサーバに投げる前にスクリプトでラベルをクリアしたらどうか？ という話を書きました。

ASP.NET側のイベントは、サーバにリクエストがあがってこないことには開始されませんから、この中でブラウザ側の表示を変えよう、というのはもともとできない相談です。
なので、
「サーバ側の処理とブラウザ上での処理、その順番とかをよく考えてみてください。」
と書いた、ということになります。

補足

onos さん　お世話になります。
なるほど、処理の順番がわかりました。
ご指摘通りだと、ASP.NETで何かしようにもできませんね！
いろいろ調べ、下記を発見したのですが、Button1_Clickイベントに記述しても何も変わらないのですが、もしかして記述する場所やタイミングが違うなどが原因でしょうか？
もしかしたら考え方自体間違っていたでしょうか？
何かございましたら、ご指摘いただけますと助かります。

Dim js As New System.Text.StringBuilder
　　With js
　　　　.Append("var doc = documnet;")
　　　　.Append("var value ="" ;")
　　　　.Append("var label = doc.getElementById('" & Me.Label1.ClientID & "');")
　　　　.Append("label.innerHTML = value;")
　　End With

回答No.2

onos

> 例えば下記のような場合は、ラベルの内容を初期化したいのですが、
> それがされるのは、ボタンの処理後になります。
> ボタン処理の前にラベルを更新するにはどうすればいいのでしょうか？

ボタンクリック時にJavaScriptでラベルの内容を書き換えておく、ぐらいしか対応できないかな？
サーバ側の処理とブラウザ上での処理、その順番とかをよく考えてみてください。

補足

onosさん　大変お世話になります。
今年もご指導お願いいたします。

ASP.netがサーバー処理ということですね！
関数を分けても同じなので、どうしたものかなと思っておりました。ボタンのクリックイベントの　Me.Label1.Text = ""
　の後に、強制的にポストバックさせるなどの関数などないのでしょうか？

なかなか難しいのですね

回答No.1

trajaa

質問文中のコードによれば、ボタンクリックのイベントでクリアをしている

>ボタン処理の前にラベルを更新するにはどうすればいいのでしょうか？
という事は
ボタンのクリックイベントの前にクリアしたいということか？

イベントが発生する前には何の処理も出来ません

『ボタン処理の前』というのが具体的にはどのような意味で考えているのだろうか？

補足

trajaa さん　お世話になります。
下記のようにイベントの中でのラベルの更新ということになります。

Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles RecDateButton.Click

　　Me.Label1.Text = ""

　　ここからボタンの処理が開始します

End Sub