FC2ブログ

記事一覧

ボタンのテキストを改行させる方法 | asp.net


今回は asp.net の ボタンコントロール においてデフォルトでは名称の値に改行を含ませることができない問題を解消してみたいと思います。
サーバーコントロールの場合、値にインライン式を使用することもできず、CSSで改行するように設定しても正しく改行されません。この問題は生成されるHTMLタグが input タグであることが根本の原因の様で、HTMLの input タグでも同様の現象が発生していますので、button タグにして Text の値を開始タグと終了タグの間に出力できるようなカスタムコントロールを作成することにより実現しました。


aspnet_button_br_01.png 


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



1.改行表示できない原因

asp.net において button コントロールは、IIS によりクライアントに向けて出力された HTML コードの中では input タグで出力され、Text の値は Value 属性となって表示されます。その Value 属性の中では 全ての改行コードが無効となり、改行表示することはできないのです。

しかしながら、HTML の button タグでは開始タグと終了タグの間で記述することにより改行コード(<br>)を含めることが可能です。



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

デフォルトの Button では input タグで生成されることで問題が発生しますので、button タグで生成されるように カスタムコントロール(System.Web.UI.WebControls.Button の派生クラス)を作成します。

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

aspnet_listview_radiobutton_03.png


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

aspnet_listview_radiobutton_05.png


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

aspnet_listview_radiobutton_04.png


(4)「BaseButton.vb」クラスに以下のソースコードを追加します。
基底クラスの TagKey プロパティをオーバーライドして、button タグを生成し、AddParsedSubObject メソッドをオーバーライドして リテラルで名称を出力しています。

BaseButton.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}:BaseButton runat=""server"" ID=""BaseButton1"" Text=""""/>")>
Public Class BaseButton
Inherits Button

Private _text As String = String.Empty

Public Shadows Property Text As String
Get
Return _text
End Get
Set(value As String)
_text = value
MyBase.Text = value
End Set
End Property

Protected Overrides ReadOnly Property TagKey As HtmlTextWriterTag
Get
Return HtmlTextWriterTag.Button
End Get
End Property

Protected Overrides Sub AddParsedSubObject(ByVal obj As Object)
Dim ltrCtrl = DirectCast(obj, LiteralControl)
If ltrCtrl Is Nothing Then
Return
End If

Me.Text = ltrCtrl.Text

End Sub

Protected Overrides Sub RenderContents(ByVal writer As HtmlTextWriter)
writer.Write(Me.Text)
End Sub

End Class

End Namespace


aspnet_button_br_03.png



3.ASPX ページへの実装

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

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

(3)該当の ASPX ページに作成したカスタムコントロールが埋め込まれます。

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Test.aspx.vb" Inherits="Test" %>
<%@ Register Assembly="BaseLibrary" Namespace="BaseLibrary.Controls" TagPrefix="custom" %>
<custom:BaseButton ID="BaseButton1" runat="server" Text='OK<br>2行目' CssClass="button enable" />


aspnet_button_br_02.png


以上で asp ボタンの Text に <br>を含めることで名称が改行される Button が実装できます。





最後までお読みいただきありがとうございます。
いかがでしたでしょうか。他にも 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

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