[ASP.NET 自訂控制項]TextBox自訂屬性控制文字以全形或半形呈現
如題，轉全形半形這個需求幾乎只有在中文世界用的到。然而在.NET的VB類別裡，Strings.StrConv()，是有支援全形半形轉換的。
但是這樣通常還不能滿足客戶的需求，客戶要的是在TextBox上Key in完，就要轉形，即使是複製貼上後也要能夠轉形，這時候還是靠javascript最方便。
所以這邊介紹一下，自訂一個屬性來控制該TextBox的文字要以全形還是半形來呈現。NoSet為不做處理，保留原本文字型態。
Step1：
我們一樣先新增一個類別庫專案，名稱假設叫做Joey，新增一個類別，叫做JoeyTextBox。
Namespace Joey
Public Class JoeyTextBox
Inherits TextBox
End Class
End Namespace
Step2：
新增一個列舉型別，叫做ConvertWideNarrowType，來供外界設定要以什麼型態呈現文字。
''' <summary>
''' TextBox值是否要轉為全形或半形
''' </summary>
''' <remarks></remarks>
Public Enum ConvertWideNarrowType
NoSet = 0
Wide = 1
Narrow = 2
End Enum
Step3：
新增一個屬性，叫做ConvertWideNarrow。
''' <summary>
''' TextBox值是否要轉為全形或半形
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public Property ConvertWideNarrow() As ConvertWideNarrowType
Get
If Me.ViewState.Item("ConvertWideNarrow") Is Nothing Then
Return ConvertWideNarrowType.NoSet
Else
Return CType(Me.ViewState.Item("ConvertWideNarrow"), ConvertWideNarrowType)
End If
End Get
Set(ByVal Value As ConvertWideNarrowType)
Me.ViewState.Item("ConvertWideNarrow") = Value
End Set
End Property
Step4：
在OnPreRender事件時，註冊javascript，並將文字轉形。
Protected Overrides Sub OnPreRender() Overrides Sub OnPreRender(ByVal e As System.EventArgs)
MyBase.OnPreRender(e)
'全形
If Me.ConvertWideNarrow = ConvertWideNarrowType.Wide Then
Me.Text=Strings.StrConv(Me.Text, VbStrConv.Wide)
Page.ClientScript.RegisterClientScriptInclude("ConvertType","TestJavaScript.js")
Me.Attributes.Add("onKeyUP", "unAsc(event,'" + Me.ClientID + "')");
'半形
ElseIf Me.ConvertWideNarrow = ConvertWideNarrowType.Narrow Then
Me.Text=Strings.StrConv(Me.Text, VbStrConv.Narrow)
Page.ClientScript.RegisterClientScriptInclude("ConvertType","TestJavaScript.js")
Me.Attributes.Add("onKeyUP", "Asc(event,'" + Me.ClientID + "')");
End If
End Sub
Step5：
接著在TestJavaScript.js裡面，加上要轉形的function。(這邊全形半形轉換，是透過查表)
//符號 英文半形全形對照表
var asciiTable = "!\"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~";
var big5Table = "%uFF01%u201D%uFF03%uFF04%uFF05%uFF06%u2019%uFF08%uFF09%uFF0A%uFF0B%uFF0C%uFF0D%uFF0E%uFF0F%uFF10%uFF11%uFF12%uFF13%uFF14%uFF15%uFF16%uFF17%uFF18%uFF19%uFF1A%uFF1B%uFF1C%uFF1D%uFF1E%uFF1F%uFF20%uFF21%uFF22%uFF23%uFF24%uFF25%uFF26%uFF27%uFF28%uFF29%uFF2A%uFF2B%uFF2C%uFF2D%uFF2E%uFF2F%uFF30%uFF31%uFF32%uFF33%uFF34%uFF35%uFF36%uFF37%uFF38%uFF39%uFF3A%uFF3B%uFF3C%uFF3D%uFF3E%uFF3F%u2018%uFF41%uFF42%uFF43%uFF44%uFF45%uFF46%uFF47%uFF48%uFF49%uFF4A%uFF4B%uFF4C%uFF4D%uFF4E%uFF4F%uFF50%uFF51%uFF52%uFF53%uFF54%uFF55%uFF56%uFF57%uFF58%uFF59%uFF5A%uFF5B%uFF5C%uFF5D%uFF5E";
//onKeyUP，轉全形
function unAsc(event,objID)
{
if(window.event.keyCode>36 && window.event.keyCode<41 ){
return;
}
else{
var objTxt = document.getElementById(objID);
objTxt.value=unAscValue(objTxt.value);
}
}
//onKeyUP，方向鍵不作處理，轉半形
function Asc(event,objID)
{
if(window.event.keyCode>36 && window.event.keyCode<41 ){
return;
}
else{
var objTxt = document.getElementById(objID);
var text=event.srcElement.value;
if(text==null ){
return;
}
var result = "";
for (var i = 0; i < text.length; i++) {
var val = escape(text.charAt(i));
var j = big5Table.indexOf(val);
result += (((j > -1) && (val.length == 6)) ? asciiTable.charAt(j / 6) : text.charAt(i));
}
objTxt.value=result;
return result;
}
}
//轉全形
function unAscValue(vstrValue)
{
var text=vstrValue;
var result = "";
for ( var i = 0 ; i < text.length ; i ++ )
{
var val = text.charAt(i) ;
var j = asciiTable.indexOf(val) * 6 ;
result += ( j > -1 ? unescape(big5Table.substring( j , j + 6 ) ) : val );
}
return result;
}
Step6：
大功告成，接著只需建置類別庫，就會產生一顆Joey.dll。在網站裡加入參考Joey.dll之後，工具箱就會多一個JoeyTextBox。
將JoeyTextBox拖曳至頁面上，即可設定ConvertWideNarrow屬性，
設定為Wide則轉全形;設定為Narrow，則轉半形;預設為NoSet，不轉形。
blog 與課程更新內容，請前往新站位置：http://tdd.best/
