JavaScriptからASP.netにより動的に番号を振ら れた項目を参照する方法
いきなりASP.netの話。DataView、DataTable等をbindして動的に作成された表の中にあるhtmlコントロールに付与されるIDには、動的に採番されたClientIDが付与されてしまう。このためJavaScriptである特定行にあるhtmlコントロールのIDを取得した場合には少し工夫が必要である。例えば以下のような画面があった場合。。。ーーーーーーーー仕入先1 区分1 区分2仕入先2 区分1 区分2ーーーーーーーーhtmlとして実際設定されている各htmlコントロールのIDは以下のようになっている。。。ーーーーーーーーgrid1_ctl1:shiiresaki grid1_ctl1:kubun1 grid1_ctl1:kubun2grid1_ctl2:shiiresaki grid1_ctl2:kubun1 grid1_ctl2:kubun2ーーーーーーーーhtmlが生成される前のaspxファイルには「_ctl1:」の記述は存在せず、この部分がASP.netにより動的に生成されたIDということになる。この際にJavaScriptなどでhtmlコントロールのIDをピンポイントで参照するのがやや難しい。htmlコントロールには動的にClientIDが振られるため、何行目のhtmlコントロールは何というIDが振られるかがわからないからだ。例えば、区分1がコンボボックスだったとして、区分1のリストを修正し、ロストフォーカスした際に区分1に設定されている値と区分2に設定されている値から判断し区分1のコンボボックスに色をつけるようなi処理を組み込むJavaScriptを考えてみる。aspx側の記述ーーーーーーーー <asp:DropDownList id="kubun1" onBlur="Checkkubun1(id)" runat="server"/>ーーーーーーーーJavaScript側の記述ーーーーーーーーfunction Checkkubun1(obj){ if (document.getElementById(obj).value == "" ) ) { document.getElementById(obj).style.backgroundColor = '#ff1493'; }else { document.getElementById(obj).style.backgroundColor = '#ffffff'; }}ーーーーーーーーまずはaspx側の解説から。Checkkubun1にの引数として渡してあるIDとはkubun1の動的に採番されたIDを渡すことができる。つまり仕入先1の区分1の場合は「grid1_ctl1:kubun1」がJavaScriptに引き渡される。（実際はgrid1_ctl1:kubun1のオブジェクトそのものが引き渡される。）そしてJavaScript側ではobjを参照することにより「grid1_ctl1:kubun1」コントロールに設定されている値を取得することが可能となる。ここで問題なのが区分2の値の取得方法である。同一の仕入先の要素として画面上に表示されている区分1と2だが、二つの項目には特に関連性はない。実は「grid1_ctl1:shiiresaki」コントロールには区分1と区分2の値は設定されているが、JavaScript側から「grid1_ctl1:kubun1」コントロールは「grid1_ctl1:shiiresaki」コントロールの一部だということは判断できない。そこで今回考えたのは区分1のClientIDより区分2のClientIDを作成してしまうということだ。objとして渡された「grid1_ctl1:kubun1」には実際nameプロパティとして「grid1_ctl1:kubun1」という値を持っている。上記のhtmlをみてもらえればわかるが、同一の仕入先内にある要素(区分1、区分2)のClientIDの先頭はすべて同じ値になっている。今回でいえば区分1、2ともに「grid1_ctl1:」までは同一の値である。そこでJavaScriptより区分2のhtmlコントロールのIDは区分1の「grid1_ctl1:」と区分2の固定ID、すなわち「kubun2」を結合したものになる。そこでJavaScriptは以下のように作成してみた。JavaScript側の記述ーーーーーーーーfunction Checkkubun1(obj){ // kubun1の動的に生成されたClientIDのkubun1をkubun2へ変換しkubun2の動的ClientIDを作り出す var kubun2_clientid = document.getElementById(obj).name.replace('kubun1','kubun2') // ClientIDがわかったので、仕入先1の区分2の値をピンポイントで取得可能となった。 var kubun2_clientid_value = document.getElementById(kubun2_clientid).value if (document.getElementById(obj).value == "" && kubun2_clientid_value == "") ) { document.getElementById(obj).style.backgroundColor = '#ff1493'; }else { document.getElementById(obj).style.backgroundColor = '#ffffff'; }}ーーーーーーーーこれで区分1コンボボックスを変更した際、区分1と区分2の値により判断しコンボボックスに色をつける処理が完成した！めでたし。＃結構苦労したよ。。昨日の時点ではできないかと思った。。。
