Q&A
ソースは ``` と ``` で囲ってください。インデントされて見やすくなりますので。（他人に見てもらえる努力をしましょう）
asp.net(VB)で質問があります。
諸事情により、GridViewでラジオボタンを使い、入力をしたいと思っております。
Webで気に入ったラジオボタンのデザイン(css)を見つけ、自分なりに編集してみたのですが、
GridViewに複数レコードが存在する場合、ラジオボタンを編集すると、２行目以降の
ラジオボタンの選択項目を選択しても、１行目に反映がされてしまいます。
解決方法などありましたら、教えていただければ幸いです。
(1行目で"出勤"が選択された状態で、２行目以降の"遅刻","出張"..exをClickしても、
１行目の"遅刻","出張"..exが選択状態になります。)
ソース(asp.net):
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ユーザID" DataSourceID="odsUserList"> <Columns> <asp:BoundField DataField="ユーザID" HeaderText="ユーザID" ReadOnly="True" SortExpression="ユーザID" /> <asp:BoundField DataField="氏名" HeaderText="氏名" ReadOnly="True" SortExpression="氏名" /> <asp:TemplateField AccessibleHeaderText="状態"> <ItemTemplate> <div class="RDO"> <input name="s3" id="select1" value="1" type="radio"> <label for="select1">出勤</label> <input name="s3" id="select2" value="2" type="radio"> <label for="select2">遅刻</label> <input name="s3" id="select3" value="3" type="radio"> <label for="select3">出張</label> <input name="s3" id="select4" value="4" type="radio"> <label for="select4">有給</label> <input name="s3" id="select5" value="5" type="radio"> <label for="select5">欠勤</label> </div> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>
css:
.RDO input{ display: none; } .RDO label{ display: block; float: left; cursor: pointer; width: 80px; margin: 0; padding: 12px 5px; border-right: 1px solid #abb2b7; background: #bdc3c7; color: #555e64; font-size: 14px; text-align: center; line-height: 1; transition: .2s; } .RDO label:first-of-type{ border-radius: 3px 0 0 3px; } .RDO label:last-of-type{ border-right: 0px; border-radius: 0 3px 3px 0; } .RDO input[type="radio"]:checked + label { background-color: #a1b91d; color: #fff; }
環境
OS:Windows7
Visual Studio:2010
.net Framework:4.7.03056
SQL Server:2017
あと、開発環境（OS, .NET Visual Studio のバージョンなど）を書いてください。特に .NET のバージョンが重要です。
「２行目の ラジオボタンを変更」というのは具体的にどのように実現しようとしましたか？
VS2010 では .NET 4.0 までしか使えないはずですが。4.0 と言うことで良いのですか？
ラジオボタンということなので、各行に 5 つずつあるボタンを一つのグループとして、グループの中では一つのボタンしか選択できない、各グループは独立して動く(一行目と二行目のグループは独立して動く) と理解してましたが、違うのですか？
あと、ひとつお願いですが、質問の本文をコメントもに応じて変更した際は、質問者さんもコメント欄にその旨書いてください。
ご指摘、誠にありがとうございます。また、失礼いたしました。以降、質問の際は気を付けさせていただきます。
また、ラジオボタンの件は仰る通りです。.netのバージョンの件はヘルプのバージョン情報に書いてあるものをそのまま、記述してしまいました。失礼いたしました。今後のためにも勉強しておきます。
回答1件
1
ベストアンサー
上の質問への私のコメント、
ラジオボタンということなので、各行に 5 つずつあるボタンを一つのグループとして、グループの中では一つのボタンしか選択できない、各グループは独立して動く(一行目と二行目のグループは独立して動く)
・・・のようにしたいのだと理解してレスしておきます。
html の input type-"radio" を複数使うのではなく、RadioButtonList コントロールを使ってはいかがですか？
具定例は以下の通りです。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="0052-RadioButtonListInGridView.aspx.cs" Inherits="_0052_RadioButtonListInGridView" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWINDConnectionString %>" SelectCommand="SELECT EmployeeID, FirstName + ' ' + LastName AS FullName FROM Employees" > </asp:SqlDataSource> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1"> <Columns> <asp:BoundField DataField="EmployeeID" HeaderText="ユーザー ID" InsertVisible="False" ReadOnly="True" SortExpression="EmployeeID" /> <asp:BoundField DataField="FullName" HeaderText="氏名" ReadOnly="True" SortExpression="FullName" /> <asp:TemplateField HeaderText="状態"> <ItemTemplate> <asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow"> <asp:ListItem Selected="True" Value="1">出勤</asp:ListItem> <asp:ListItem Value="2">遅刻</asp:ListItem> <asp:ListItem Value="3">有給</asp:ListItem> <asp:ListItem Value="4">出張</asp:ListItem> <asp:ListItem Value="5">欠勤</asp:ListItem> </asp:RadioButtonList> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </form> </body> </html>
そうすれば、上記 RadioButtonList からレンダリングされる input type="radio" の name 属性は行のグループの中では同じ、行の違う別のグループでは異なるように ASP.NET が自動的に設定してくれます。
以下の画像がその結果です。
たぶん、この後ポストバックするなりして選択結果をサーバー側で取得して処置することを考えていると思いますが、その場合 RadioButtonList を使うのメリットが出てくるはずです。
質問者さんのやりたいことが上記とは異なる場合が、どこがどのように違うのか具体的に書いくれればまた考えて回答します。
ただし今日は時間が無いので、回答は明日以降になります。
投稿2018/09/13 08:19
総合スコア17642
回答へのコメント
返信が遅くなり申し訳ありません。
その後ですが、原因がわかりました。
GridViewがHtmlになると、Nameプロパティが全行同じまま、展開(?)され、同じグループになるため、
質問の現象が発生していたようです。
そのため、RowDataBoundイベントでNameプロパティを変えれば良いとは思ったのですが、SurferOnWwwさんの仰ったRadioButtonListコントロールの方が便利そうなので、
RadioButtonListコントロールを利用させていただこうかと思います。
いろいろと失礼な点があり、申し訳ありませんでした。
今後は気をつけさせていただく所存でございます。
ありがとうございました。
> GridViewがHtmlになると、Nameプロパティが全行同じまま、展開(?)され、同じグループになるため、
質問の現象が発生していたようです。
そこのところ誤解があるのではないかと思います。
質問者さんのコードで言うと ItemTemplate の中の <div class="RDO"> ... </div> というコードはただの文字列としてそのままリテラルコントロールに取り込まれ、ASP.NET が html ソースをレンダリングする際リテラルコントロールの中身はそのまま一字一句違わないように出力するから、GridView の全行で全く同じになるということです。
runat="server" 要素を付与してサーバーコントロールにすると話は違ってくるはずです。決してお勧めではありませんが・・・
