- PR -

ユーザコントロールのTable ID変更

投稿者投稿内容
けい
常連さん
会議室デビュー日: 2004/12/03
投稿数: 47
お住まい・勤務地: 神奈川県
投稿日時: 2007-08-09 20:58
いつもお世話になります。
VS.net2005でWeb開発をしています。
ある画面で困っています。複雑なデータをn件もたなければいけないため、ユーザコントロールを作成しました。ユーザコントロール内のHTML のtblSocial,tblTransをそのテーブル内がもつドロップダウンリストの値によって表示、非表示させたいと考えています。
ここまでは以下のJavascript、SetEnableで実現できたのですが、ユーザコントロールが複数になった場合にうまく動きません。というのも親画面で動的にユーザコントロールを追加してもユーザコントロール内のTableIDが常に同じだからです。
2件目のドロップダウンを変更してもテーブルの表示、非表示は常に1番目のユーザコントロールにのみ発生します。というのもHTMLソースで見ると全てのユーザコントロールで<Table id ="tblSocial"....>と同じだからです。コントロールは違うIDが自動的に振られているのに。。。

これはそもそもやりかたが間違っているのか、またテーブルIDを変更する方法があればご教授願います。
-----非表示、表示を制御するソース---------
function SetEnable(ddl){
var tblSocial=document.getElementById('tblSocial');
var tblTrans=document.getElementById('tblTran');
switch(ddl.selectedIndex){
//会議
case 0:
tblSocial.style.display="inline";
tblTrans.style.display = "none";
case 1:
tblSocial.style.display="inline";
tblTrans.style.display = "none";
break;
//タクシー
case 2:
tblSocial.style.display = "none";
tblTrans.style.display="inline";
break;
//その他
case 3:
tblSocial.style.display = "none";
tblTrans.style.display="none";
break;
//指定なし
default:
tblSocial.style.display = "none";
tblTrans.style.display="none";
break;
}
}
けい
常連さん
会議室デビュー日: 2004/12/03
投稿数: 47
お住まい・勤務地: 神奈川県
投稿日時: 2007-08-10 09:49
補足です。なぜテーブルにしたかというと、Enable変更時のPostbackを避けるためなるべくクライアントで処理を行うという方向だったのですが、PanelやViewではJavascript側で認識されないようだ、ということがわかりました。これが認識されればおそらく.netの標準コントロールで、動的に作成しても固有のIDを持つためIDが同じでうまく動作しないといった問題も起こらなかったと思うのですが。。。。
ご存知の方、情報をお持ちの方宜しくお願い致します。
まるく
大ベテラン
会議室デビュー日: 2004/01/09
投稿数: 181
投稿日時: 2007-08-10 10:16
ID がユニークになるよう配慮しておかないと、ユーザコントロールを利用する親画面で、tblSocial という ID を使えなくなりますね(暗黙の制約が発生)。
とりあえず以下の措置でどうでしょか。

1.ユーザコントロールの ascx 内に記載している JavaScript に、ユーザコントロール自体の ID を付与する。
コード:

//例
var tblSocial=document.getElementById('<%=Me.ID%>_tblSocial');



2.ユーザコントロールが出力する TABLE タグの ID にも同様の措置をする(StringBuilder などで直接 TABLEタグを出力している場合)。
または、System.Web.UI.HtmlControls.HtmlTableを利用するようにする(runat="server"を付与)。後者の場合は、

コード:

//例
var tblSocial=document.getElementById('<%=Me.tblSocial.ClientID%>');



とか。

[ メッセージ編集済み 編集者: まるく 編集日時 2007-08-10 13:11 ]
かるあ
ぬし
会議室デビュー日: 2003/11/16
投稿数: 1190
お住まい・勤務地: センガワ→ムサシノ
投稿日時: 2007-08-10 10:54
引用:

けいさんの書き込み (2007-08-10 09:49) より:
補足です。なぜテーブルにしたかというと、Enable変更時のPostbackを避けるためなるべくクライアントで処理を行うという方向だったのですが、PanelやViewではJavascript側で認識されないようだ、ということがわかりました。


これはどういう意味ですか?
Panel や View はクライアントで描画されるときは単なる div になります。
の例のように style.display = "none" などにする分には問題ないと思うのですが。。。
_________________
かるあ のメモスニペット
けい
常連さん
会議室デビュー日: 2004/12/03
投稿数: 47
お住まい・勤務地: 神奈川県
投稿日時: 2007-08-10 13:40
>まるく様
ありがとうございました。IDの変更ができました。
var tblSocial=document.getElementById('<%=Me.ID%>_tblSocial');
var tblTrans=document.getElementById('<%=Me.ID%>_tblTran');
<table id='<%=Me.ID%>_tblSocial'...

しかし、また別の問題がでてきました。これで正しく動作すると思ったのですがい。。
ユーザコントロールが複数ある状態でどのユーザコントロールのドロップダウンを変更しても一番下のユーザコントロールの表示が切り替わるのです。
ためしに
alert('<%=Me.ID%>');
を出してみると常に最後に追加した'uc3'と表示されてしまいます。
すっかり混乱してしまいます。HTMLもJavascriptもあまり得意ではなく、苦労しています。わかりにくい説明ですみませんが、ぜひご教授願います。

>かるあ様
Panel, Viewを使うとdocument.getElementByIdで値が'undefined'と取れなかったのです。やり方が間違っているのでしょうか。。
まるく
大ベテラン
会議室デビュー日: 2004/01/09
投稿数: 181
投稿日時: 2007-08-10 14:21
この実装では、当然 SetEnable メソッドもユーザコントロール毎に識別してそれぞれのものを呼び出さなくてはならないのですが、意識できてます?

あとすみませんが、さっきの書き込みに編集を加えています。どうやら無関係っぽいですが、一応再確認ください。
けい
常連さん
会議室デビュー日: 2004/12/03
投稿数: 47
お住まい・勤務地: 神奈川県
投稿日時: 2007-08-10 17:00
>まるく様

以下で試しましたが
>'tblSocial' は 'ASP.transaction_pms01trs050_pms01trs050uc_ascx' のメンバではありません。
のエラーになります。
-------------------------------------------------------------------------------//例
var tblSocial=document.getElementById('<%=Me.tblSocial.ClientID%>');


以下のようにしてうまくいきました。
-------------------------------------------------------------------------------var tblSocial=document.getElementById('<%=Me.ID%>_tblSocial');

>当然 SetEnable メソッドもユーザコントロール毎に識別してそれぞれのものを呼び出さなくてはならないのですが、意識できてます?

できていませんでした。そうすると呼び出す関数名も個々に変えないといけないということですか。難しそうな気がします。サーバ側の処理にするべきなのか、と考え中です。

まるく
大ベテラン
会議室デビュー日: 2004/01/09
投稿数: 181
投稿日時: 2007-08-10 17:19
引用:

以下で試しましたが
>'tblSocial' は 'ASP.transaction_pms01trs050_pms01trs050uc_ascx' のメンバではありません。
のエラーになります。


サーバコントロールを用いてなかったようですから、そうなりますね。

引用:

できていませんでした。そうすると呼び出す関数名も個々に変えないといけないということですか。難しそうな気がします。サーバ側の処理にするべきなのか、と考え中です。



単に、ユーザコントロールのIDで修飾すれば良いです。つまり

function <%=Me.ID%>_SetEnable(ddl){

などとしたうえで、同じユーザコントロール内の DropDownList のイベントからこいつを呼ぶようにすれば。。。

#本当は、RegisterClientScriptBlockなどを用いて
# SetEnable 本体を吐き出すようにし、SetEnable
#の呼び出しパラメータに、tableタグのIDをセット
#するようにすれば、同じような JavaScript 関数
#が3つも出力されずにすむのですが。。。
#余裕があったら工夫してみてください。

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