FC2ブログ

記事一覧

ListView で明細毎の RadioButton の複数選択を禁止する方法 -GroupNameの一意設定- | asp.net


今回は asp.net の ListView においてRadioButton が複数選択できてしまう問題を解消したいと思います。
フロント側の jQuery でも実装できますが、サーバーコントロールでポストバックしなくても動作可能にできる方法がありましたので今回はサーバーコントロールをカスタムする方法で実装します。


aspnet_listview_radiobutton_01.png


前提条件
・Windows 7 Professional 以降 / Windows Server 2008 R2 以降
・Visual Studio 2010 Professional 以降
・VB.NET
・.Net Framework 4.0 以降



1.複数選択できる原因

asp.net において LsitView または GridView の明細部分では、サーバーコントロールの ID や Name は明細毎に一意の名称が自動的に設定されます。

ListView に RadioButton を配置して GroupName="TestGroup" と設定したとしても、以下の図の様に、ListView1$ctrl0$TestGroup といった値に変更されてしまい、行毎に GroupName が異なることから複数選択が可能な状態になってしまいます。

aspnet_listview_radiobutton_02.png



2.カスタムコントロールの実装

デフォルトの RadioButton では GroupName が一意とならないことで問題が発生しますので、一意となるような カスタムコントロール(RadioButton の派生クラス)を作成します。

(1)ファイル > 追加 > 新しいプロジェクト から新しいプロジェクト「BaseLibrary.vbproj」を追加します。
※プロジェクトの名称は任意です。

aspnet_listview_radiobutton_03.png


(2)新しいプロジェクト「BaseLibrary.vbproj」に System.Web 名前空間の参照設定を追加します。

aspnet_listview_radiobutton_05.png


(3)新しいプロジェクトに新しいクラス「BaseRadioButton.vb」を追加します。
※クラスの名称は任意です。

aspnet_listview_radiobutton_04.png


(4)「BaseRadioButton.vb」クラスに以下のソースコードを追加します。
基底クラスの Render メソッドをオーバーライドして GroupName を書き換えています。

BaseRadioButton.vb
Option Explicit On
Option Strict On
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
<Assembly: TagPrefix("BaseLibrary.Controls", "custom")>
Namespace Controls
<ToolboxData("<{0}:BaseRadioButton runat=""server"" ID=""BaseRadioButton1"" GroupName=""RadioGroup1"" />")>
Public Class BaseRadioButton
Inherits RadioButton

Protected Overrides Sub Render(ByVal writer As HtmlTextWriter)
'出力先を独自のTextWriterとして出力する
MyBase.Render(New WriterWrapper(writer, Me))
End Sub

End Class

'''<summary>
'''属性を変更して出力するためのTextWriter
'''</summary>
Public Class WriterWrapper
Inherits HtmlTextWriter

Private _control As BaseRadioButton
Public Sub New(ByVal writer As HtmlTextWriter, ByVal control As BaseRadioButton)
MyBase.new(writer)
'コントロールのインスタンスを保持する
Me._control = control
End Sub

'''<summary>
'''属性を追加する
'''</summary>
'''<param name="key">属性を表す列挙値</param>
'''<param name="value">属性に設定する値</param>
'''<remarks>
'''RadioButtonが属性の設定のために本メソッドを呼び出すため、本メソッドで変更したい属性値を設定する
'''</remarks>
Public Overrides Sub AddAttribute(ByVal key As HtmlTextWriterAttribute, ByVal value As String)
Select Case key
Case HtmlTextWriterAttribute.Name
'ラジオボタンのグループを表す
'ユニークとせず、もともとプロパティで設定した値を出力する
MyBase.AddAttribute(key, _control.GroupName)
Case HtmlTextWriterAttribute.Value
'POST時に出力する値を表す
'コントロールを識別する必要があるため、ユニークとする
MyBase.AddAttribute(key, _control.UniqueID)
Case Else
MyBase.AddAttribute(key, value)
End Select
End Sub
End Class

End Namespace



aspnet_listview_radiobutton_06.png



3.ListView への実装

(1)新しいプロジェクト「BaseLibrary.vbproj」をビルドします。

(2)ツールボックスから BaseRadioButton を選択して aspx ページにドラッグします。BaseRadioButton が見つからない場合は、ツールボックス内を右クリックして、「アイテムの選択」> 「参照」ボタン > 「BasrLibrary\bin\Debug\BaseLibrary.dll」を選択して表示させます。

(3)ListView を実装しているページに作成したカスタムコントロールが埋め込まれます。

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ListViewTest.aspx.vb" Inherits="ListViewTest.ListViewTest" %>
<%@ Register Assembly="BaseLibrary" Namespace="BaseLibrary.Controls" TagPrefix="custom" %>
<asp:ListView ID="ListView1" runat="server" ItemPlaceholderID="itemPlaceHolder1">
<ItemTemplate>
<tr runat="server">
<td runat="server" class="radio-field">
<custom:BaseRadioButton ID="rdoSelect" runat="server" GroupName="TestGroup"/>
</td>
</tr>
</ItemTemplate>
</asp:ListView>


aspnet_listview_radiobutton_07.png


以上で ListView の明細毎に複数選択ができないような RadioButton が実装できます。





最後までお読みいただきありがとうございます。
いかがでしたでしょうか。他にも asp.net に関連する記事を投稿しておりますのでよろしければご参考くださいませ。




関連記事

コメント

コメントの投稿

カテゴリ別記事一覧

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語・データベース】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
Oracle10g SQLServer2008R2 SQLAnywhere8/11/16
ActiveReport CrystalReport ReportNet(IBM)
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。