ASP.NET AJAX の UpdatePanel 利用時、RadioButtonList の SelectedIndexChanged が発生しない件の回避策

先日、ASP.NET AJAX の UpdatePanel 利用時、RadioButtonList の SelectedIndexChanged が発生しないことがある という記事を投稿したが、とりあえず回避策が見つかった。

そもそもの本現象の原因だが、ASP.NET の RadioButtonList コントロールが、AJAX の技法による UpdatePanel のような"部分更新"を想定していないことだ。まぁ、もっともなことで致し方ないと思う。

具体的には、AutoPostBack=true を指定された RadioButtonList コントロールについて、Selected=true を指定された ListItem を含んでいる場合、レンダリングされる HTML はこんな感じだ（※雰囲気を掴んでもらうためにデフォルメしているので、実際はもう少々異なる）。

<input type=radio name=RadioButtonList1$0 checked value="コウテイペンギン">
<input type=radio name=RadioButtonList1$1 onclick=__doPostBack(...) value="オウサマペンギン">
<input type=radio name=RadioButtonList1$2 onclick=__doPostBack(...) value="アデリーペンギン">

初期選択されている ListItem に該当する input 要素について、onclick イベントにポストバックを実行する JavaScript 関数が接続されていないわけである。部分更新の概念がない時代では、これでページ全体が書き換えられるので、なんら支障なく、目的の動作を果たしていたわけだ。

さてここまでわかったので、初期選択されている ListItem に該当する input 要素についても、onclick イベントにて ASP.NET ポストバック関数を呼び出すようにすれば、冒頭で示唆した問題を回避できるものと考えた。

---

まずは、ポストバックのための JavaScript 関数呼び出しはどのようなコードを書けばよいのか、である。

ClientScriptManager クラスには GetPostBackEventReference メソッド が用意されており、このメソッドを使えば、ポストバックのための JavaScript コード文字列が手に入る。
しかしややこしいことに、RadioButtonList コントロールの HTML レンダリング結果は複数の input type=radio 要素に分散するので、個々の input 要素についての JavaScript コードが必要になるはずだ。
ところが、GetPostBackEventReference メソッドは Control に対しての JavaScript コードを返してくれるのみで、個々の ListItem に対する JavaScript コードを返してくれることはないようだ（メソッドの引数には Control型しか受け付けない）。

私にはこれ以上わからなかったので、ここは妥協して、ASP.NET が出力した HTML をのぞき見て、"window.setTimeout('__doPostBack(\'(コントロールのUniqueID)$(ListItem の ItemIndex)\',\'\'),0" という文字列を手作りすることとした（ ASP.NET の仕様が変われば通用しなくなるので、本来は禁じ手だが）。

---

次は、こうして作成した JavaScript コードを、input checked 要素の onclick 属性に書き出すようにすることだ。サーバー側のコードで、次のようにやればうまくいくようだ。

RadioButtonList1.SelectedItem.Attributes["onclick"] = "javascript:"+script;

---

以上の措置を講じることで、冒頭で述べた不具合は回避することができるようになった。

なお、この対策でも実は万全ではない。input type=radio 要素の onclick イベントでポストバックを発生させているので、選択済みの項目をマウスでクリックすることにより、ラジオボタンリストの選択が変化していなくてもポストバックが発生してしまうのだ。（私が確認した範囲では、SelectedIndexChanged サーバー側イベントは、そのイベント名のとおり、選択変更が発生した場合にのみ発生しているようだ。しかし、ViewState などの要因が関与しているかもしれない）

不用意なマウスクリックでもポストバックが発生してしまうので、サーバー側の負荷が心配だが、たいていのコードにおいては、それ以上の不具合・問題は発生しないであろう。ということで、私の手元では、ここまでの措置に留めることとした。

問題回避後のサンプルを作成したので、下記に設置しておく。

http://www.gentoo.dev-asp.net/samples/04FixNoActionWhenSelIdxChanged/