span タグを出力しないラジオボタンの作成方法 -RadioButton & CheckBox without span-

span タグを出力しないラジオボタンの作成方法 -RadioButton & CheckBox without span- | asp.net

2019/02/06
00:15

今回は asp.net のサーバーコントロール（主に RadioButton / CheckBox ）において HTML に出力された際に span タグが追加されてしまう問題を解消したいと思います。
asp.net の場合はサーバーコントロールが HTML に表示された際に、ネイティブな HTML のタグに変換されて表示されますが、RadioButton が input タグに変換されるのは良いのですが、CssClass を設定すると span タグでラップされてしまいます。CSS や jQuery の兼ね合いで span タグに覆われていると正しく動作しない場合もありますので span タグを出力しない様に派生コントロールを作成してみました。

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

１．span タグが出力される原因

RadioButton や CheckBox では CssClass を設定すると span タグが出力されます。逆に CssClass を設定しなければ span タグは出力されませんが、Input タグや Label タグにはスタイルを適用したい場合があります。

２．カスタムコントロールの実装

span を出力するかどうか設定できるプロパティと、CssClass を Input タグの Class に振り替える機能を実装するカスタムコントロール（RadioButton の派生クラス）を作成します。

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

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

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

（４）「BaseRadioButton.vb」クラスに以下のソースコードを追加します。
基底クラスの Render メソッドをオーバーライドして span タグを打ち消し、Inputタグに class を設定しています。

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=""rdoControlId1"" />")>
    Public Class BaseRadioButton
        Inherits RadioButton

        Public Property RenderSpan As Boolean = True

        Protected Overrides Sub Render(ByVal writer As HtmlTextWriter)

            '出力先を独自のTextWriterとして出力する
            MyBase.Render(New RadioButtonWriterWrapper(writer, Me))

        End Sub

    End Class

    '''<summary>
    '''属性を変更して出力するためのTextWriter
    '''</summary>
    Public Class RadioButtonWriterWrapper
        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>
        ''' spanタグを出力しない
        ''' </summary>
        ''' <param name="name"></param>
        ''' <param name="key"></param>
        ''' <returns></returns>
        Protected Overrides Function OnTagRender(name As String, key As HtmlTextWriterTag) As Boolean

            If Me._control.RenderSpan = False AndAlso
                key = HtmlTextWriterTag.Span Then
                Return False
            End If

            Return MyBase.OnTagRender(name, key)

        End Function

        '''<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.Class
                    'spanタグを出力しない場合、InputのClassにCssClassの値を振り替えます。
                    If Me._control.RenderSpan = False Then
                        Me._control.InputAttributes.Add("class", _control.CssClass)
                    Else
                        MyBase.AddAttribute(key, value)
                    End If

                Case Else
                    MyBase.AddAttribute(key, value)

            End Select

        End Sub

    End Class

End Namespace

３．aspx への実装

（１）新しいプロジェクト「BaseLibrary.vbproj」をビルドします。

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

（３）aspx ページに作成したカスタムコントロールを埋め込みます。

（４）RenderSpan="False"と設定し、CssClassに設定した値が Input タグに設定されていることを確認します。

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ListViewTest.aspx.vb" Inherits="ListViewTest.ListViewTest" %>
<%@ Register Assembly="BaseLibrary" Namespace="BaseLibrary.Controls" TagPrefix="custom" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">

    <div class="asp.net native RadioButton">
        <asp:RadioButton ID="rdoYes" runat="server" Text="Yes" CssClass="test" GroupName="GroupName1" />
        <asp:RadioButton ID="rdoNo"  runat="server" Text="No"  CssClass="test" GroupName="GroupName1" />
    </div>    
    <div class="asp.net native CheckBox">
        <asp:CheckBox ID="chkYes" runat="server" Text="Yes" CssClass="test"/>
        <asp:CheckBox ID="chkNo"  runat="server" Text="No"  CssClass="test"/>
    </div>
    <div class="asp.net custom RadioButton">
        <custom:BaseRadioButton ID="rdoYesEx" runat="server" Text="Yes" CssClass="test" GroupName="GroupName2" RenderSpan="False"/>
        <custom:BaseRadioButton ID="rdoNoEx"  runat="server" Text="No"  CssClass="test" GroupName="GroupName2" RenderSpan="False"/>
    </div>    
    <div class="asp.net custom CheckBox">
        <custom:BaseCheckBox ID="chkYesEx" runat="server" Text="Yes" CssClass="test" RenderSpan="False"/>
        <custom:BaseCheckBox ID="chkNoEx"  runat="server" Text="No"  CssClass="test" RenderSpan="False"/>
    </div>
</form>
</body>
</html>

以上で span タグを出力しない RadioButton が実装できます。

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

関連記事

リピーターの明細毎のデータを取得・更新する方法 -How to get the dataitem value of all rows in repeater- | asp.net
多階層構造のリピーターコントロールにデータバインドする方法 -How to bind multilayer dataset to repeater- | asp.net
span タグを出力しないラジオボタンの作成方法 -RadioButton & CheckBox without span- | asp.net
ボタンのテキストを改行させる方法 | asp.net
ListView で明細毎の RadioButton の複数選択を禁止する方法 -GroupNameの一意設定- | asp.net

JSON形式の文字列データをクラスに変換する方法 -デシリアライズ- | VB.NET ホーム WAPM-1266R (AirStation Pro) のレビュー -Wifi アクセスポイント-| Buffalo

コメントの投稿

※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。

　入力されていないコメントには返信しませんのであらかじめご了承くださいませ。

ITブログ時々なんでもブログ