|
■No81706 (hi さん) に返信
> できれば、ラジオボタンをクリックした際に実行される、ラジオボタン押し直しのJavaScript 内で、
> WebSurfer様の例でいうと、「PriductIDを取得しLabel1.textにセットする」という処理を行いたいです。
クライアント側で JavaScript / jQuery を使って行うということであれば、以下のようにしてみては
いかがですか？
（以下の説明は参考にされているブログの記事のコードがベースです）
クライアント側で行うと言うことは ASP.NET がレンダリングした html ソースを考えて、それから
ProductID を JavaScript / jQuery を使って取得し、Label1 に表示すると言うことになります。
ASP.NET が RadioButton コントロールを html コードに変換すると input type="radio" になりま
すが、何もしなければその input 要素には ProductID 情報は含まれません。
なので、input 要素に属性を追加して、それに ProductID 情報を設定してやります。例えば、追加
する属性の名前を data とすると、GridView の RowDataBound イベントで以下のようにして設定で
きます。
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
Control control = e.Row.FindControl("RadioButton1");
if (control != null)
{
// Attributes プロパティではダメ。
// input 要素に data 属性が直接設定されず <span> ... </span> で
// input 要素が囲われ span 要素に data 属性が追加さてしまうので
// InputAttributes プロパティを使うこと。
((RadioButton)control).InputAttributes["data"] =
((System.Data.DataRowView)e.Row.DataItem)["ProductID"].ToString();
}
}
}
そうすると、ASP.NET がレンダリングする html ソースは以下のようになるはずです。
<input id="GridView1_RadioButton1_0"
type="radio"
name="GridView1$ctl02$RadioButton1"
value="RadioButton1"
data="1" />
それができれば、あとはラジオボタンの change イベントでクリックされたラジオボタンがある
GridView の列の ProductID 情報を data 属性から取得して Label1 に表示できます。
具体的には、ブログの記事の「2013/8/31 追記」の方の JavaScript / jQuery のコードに以下
のように追加すれば OK です。
$(function () {
$('#<%=GridView1.ClientID%> input:radio').change(
function () {
$('#<%=GridView1.ClientID%> input:radio').
removeAttr("checked");
$(this).attr('checked', 'checked');
// 以下の 2 行を追加
var id = $(this).attr('data');
$('#<%=Label1.ClientID%>').html(id);
});
});
|