- PR -

[ASP.NET] ServerコントロールのイベントをJavaScriptで拾う。

投稿者投稿内容
KIMERA
大ベテラン
会議室デビュー日: 2003/02/28
投稿数: 112
お住まい・勤務地: 兵庫県・大阪府
投稿日時: 2003-10-18 16:32
こんにちわ。

WinXPプロのIIS6.0とVB.NET2003を使ってASP.NETの開発をしております。

aspxファイル内でJavaScriptを使用してイベントを発生させたいのですが、コントロール類が全てサーバーコントロールなために、個々の名前を取得できずに困っています。

Formに関してはidをnameとして取得できているのですが、TextBoxが取得できないのです。
仕様の都合上HTMLコントロールにはできないようなのですが、なんとか方法はないものでしょうか?
Jitta
ぬし
会議室デビュー日: 2002/07/05
投稿数: 6267
お住まい・勤務地: 兵庫県・海手
投稿日時: 2003-10-19 07:31
引用:

KIMERAさんの書き込み (2003-10-18 16:32) より:

aspxファイル内でJavaScriptを使用してイベントを発生させたいのですが、コントロール類が全てサーバーコントロールなために、個々の名前を取得できずに困っています。


 サーバーコントロールが処理するイベントの場所と、JavaScriptが処理するイベントの場所を理解されていますか?

 JavaScriptで受けたいなら、runat="server"の記述を消せば、一応クライアントで処理できるとは思います。←これは試していないので不明

追加
 サーバサイドで処理するから「サーバコントロール」なので、クライアントで拾うのは無理かと。例えば、<asp:button onclick="javascript:click()">などとすると、「jvascript:clickというメソッドがありません」のようなエラーとなります。イベント以外の関数で、コントロール名を拾うには、ちょっとしたこつがいります。

 あと、例えば、いったんサーバに戻した後、Response.WriteやPage.ScriptBlockかな?に、目的のjavascript関数を実行させるスクリプトを登録するという方法も、あるような?

[ メッセージ編集済み 編集者: Jitta 編集日時 2003-10-19 17:25 ]
KIMERA
大ベテラン
会議室デビュー日: 2003/02/28
投稿数: 112
お住まい・勤務地: 兵庫県・大阪府
投稿日時: 2003-10-20 09:37
おはようございます。
Jittaさん、いつもありがとうございます。

引用:
サーバーコントロールが処理するイベントの場所と、JavaScriptが処理するイベントの場所を理解されていますか?



一応は理解しているつもりなのですが^^;
もう少し勉強してみます。

引用:
JavaScriptで受けたいなら、runat="server"の記述を消せば、一応クライアントで処理できるとは思います。←これは試していないので不明



これは知りませんでした。
こっちの方法でやってみようかと思います。
ありがとうございました。


[ メッセージ編集済み 編集者: KIMERA 編集日時 2003-10-20 09:38 ]
KIMERA
大ベテラン
会議室デビュー日: 2003/02/28
投稿数: 112
お住まい・勤務地: 兵庫県・大阪府
投稿日時: 2003-10-20 11:43
ん〜む、どうもうまくいきません。
もう少し知恵をお貸しください。

とりあえず、何の為にこんなことをしているのかということを明確しようと思います。
もしかしたら、そのためにこんなことをしようとしていること自体がタブーなのかも・・・。

DropdownListが1つとTextBoxが3つ、Labelが1つあります。
TextBoxには任意の金額がそれぞれ入力され、Labelには合計金額が表示されるようなしくみです。
現在の仕様ではDropdownListより計算方法(足し算・引き算・掛け算・割り算)を選択し、各々のTextBoxのチェンジイベントにて金額の整合性チェックをしたあと、3つのTextBoxの金額を計算してLabelに表示させるということをしています。

VBコードで全て簡単にこなせるのですが、一つ問題があり、TextBox入力中にDropdownListにフォーカスをやるとAutoPostbackの仕様で画面が固まってしまいます。
この問題は過去にいくつか例が出ていたかと思います。MSに問い合わせたところ、バグ認識済みだということなのですが・・・。

それで、このバグを回避するためにクライアントサイドで処理をしてしまえばいいか。と思ったわけです。
しかし、これだけ単純なものだとなんとかできても、実践で使うものは同じフォーム内にサーバー側で処理がされるコントロールもあり、この方法と組み合わせるということが不可能でした。
なんとか画面が固まらないようにしたいのですが、何かよい方法はないものでしょうか?
インラインコードで記述すればなんとかなりそうな気もするのですが・・・。
KIMERA
大ベテラン
会議室デビュー日: 2003/02/28
投稿数: 112
お住まい・勤務地: 兵庫県・大阪府
投稿日時: 2003-10-20 14:48
途中報告です。
インラインコードでいろいろやってみましたが、結局はサーバーで処理をしてしまう以上、結果は変わりませんでした。
そこで、多少強引な方法ですが次のやり方でがんばってみようかと思います。

JavaScriptにあるタイマーを使用して、ロード時から数秒毎にTextBoxの値を計算して吐き出す。

というようなことです。
とりあえず、こんなことくらいしか思いつかないのでやってみようと思います。
Crime
常連さん
会議室デビュー日: 2002/08/26
投稿数: 34
お住まい・勤務地: Japan
投稿日時: 2003-10-20 15:30
こんにちは。

ちょっと質問なのですが、DropDownListにもAutoPostBackが設定してある。
ということで宜しいのでしょうか。
----以下、AutoPostBackが設定してある。という場合---

処理の内容を見る限り加減乗除の変更があったとき、
毎回TextBoxの内容を変更させて結果を算出する。といったことは無いと思います。

ユーザビリティの問題が出てくるかもしれませんが、
DropDownListのAutoPostBackを解除した場合、現在発生しているエラーは出ないのですかね。
(※すいません。あまり調べてません。)
※もの凄く主観になりますが、あまりJavaScriptで処理を特化させることは
 後のメンテナンスにもあまり良い影響を残せないと思います。(別人がメンテする。等)

3つのTextBoxが全てAutoPostBackの場合、毎回毎回画面が再描写され、
あまり見栄えが良くないと思ってしまうのは私だけでしょうか。

私の提案としては、
「計算ボタン」をつけることにより、DropDownListのAutoPostBackを外す。
(いっそのことTextBoxのAutoPostBackも外す。)
を挙げさせていただきます。

計算結果の即時反映ということに問題があるのであれば、
1.DropDownListのロード時の値をJavaScriptで保持
 (TextBoxに関してはAutoPostBack有効でも良いかも?
  有効で無い場合は同じく保持、又はValidateで値の有効性、未入力チェック)
2.次ページに移動(計算終了後、次に行う処理)等の画面遷移前に
 ロード時の値と現在値の比較。
3.値が違う場合、「計算ボタン」を押して下さいのAlert
 値が同一の場合、実際に次の処理に遷移。

上記方法であればScriptのコードは多少ながらも簡略化できると思うのですが。

KIMERAさんの思っていることと全然的外れだったらごめんなさい。
KIMERA
大ベテラン
会議室デビュー日: 2003/02/28
投稿数: 112
お住まい・勤務地: 兵庫県・大阪府
投稿日時: 2003-10-20 15:51
Crimeさん、どうもありがとうございます。

おっしゃるとおり、DropdownListにはAutoPostBackがTrueで設定されており、さらに計算途中でいちいち変える人もいないのは目に見えていますよね。

あくまでやりたいことのために例としてひっぱっただけなので、そのあたりはスルーしていただければ幸いです。

あと、DropdownListのAutoPostBackはFalseにはできません。
今現在の例で言うと、Falseにしてしまうことで、「どんな計算をするのか?」という選択処理が行えないからです。

正直、全ての計算を一つ一つのボタンにゆだねるか、最後にまとめて処理してしまえばいいとは自分でも思います。
が、今回はそういうのを考えずになんとか動的にやってしまいたのです。
また、AutoPostBackによる再描画を防ぐ為でもあります。

今現在、全てのAutoPostBackを外し、JavaScriptでなんとか代用するようにやっています。
自分で納得のいくものができましたら後ほど報告に参ります。
ありがとうございました。
ophiuchus
会議室デビュー日: 2003/08/27
投稿数: 11
投稿日時: 2003-10-20 16:43
かなり無茶なやり方ではありますが、__doPostBackを自分で記述してしまっては
如何でしょうか?JScript1.jsをプロジェクトに追加してコードビハインドで
それを出力するようにしています。
DropDownListの値やTextBoxの値は取得できました。

しかし、、、
こんな事して良いんだろうか。

コード:

' ----- JScript1.js -----
function __doPostBack(eventTarget, eventArgument) {
alert(document.all.item(eventTarget).value);
var theform;
if (window.navigator.appName.toLowerCase().indexOf("netscape") > -1) {
theform = document.forms["Form1"];
}
else {
theform = document.Form1;
}
theform.__EVENTTARGET.value = eventTarget.split("$").join(":");
theform.__EVENTARGUMENT.value = eventArgument;
theform.submit();
}
' ----- JScript1.js -----

Private Sub Page_Load(略...
Page.RegisterClientScriptBlock("SCR", "<script language=javascript src='JScript1.js'></script>")
End Sub



[ メッセージ編集済み 編集者: ophiuchus 編集日時 2003-10-20 16:46 ]

スキルアップ/キャリアアップ(JOB@IT)