FC2ブログ

記事一覧

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


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


aspnet_control_span_01.png


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



1.span タグが出力される原因

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



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

span を出力するかどうか設定できるプロパティと、CssClass を Input タグの Class に振り替える機能を実装する カスタムコントロール(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 メソッドをオーバーライドして 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



3.aspx への実装

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

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

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

(4)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>



aspnet_control_span_03.png


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





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




関連記事

コメント

コメントの投稿

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

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

※ニックネームでも良いので必ずご入力ください。

    

※必ずご入力ください。

    
    

※必ずご入力ください。

※技術的な質問には環境やエラーについて正確かつ詳細にお教えください。

・正確なエラーの内容

・Windowsのバージョン番号

・Visual Studioのバージョン

・機器の型番

・アプリやソフトのバージョン

    

カテゴリ別記事一覧

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりの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

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