아래 동영상은 마소의 ASP.net 에서 퍼온것입니다.
아래글은 Nx 블로그에서 퍼온글 입니다.
FilteredTextBox 컨트롤은 TextBox 컨트롤에 특정 값만 입력할 수 있는 기능을 제공하는 컨트롤입니다. 즉, 어떠한 TextBox 컨트롤에는 숫자만, 다른 TextBox 컨트롤에는 문자만 입력이 가능한 기능을 제공하는 TextBox 컨트롤을 사용할 때 유용합니다. 기존에는 자바스크립트를 사용하여 유효성 검사를 체크하는 함수를 호출하곤 했는데 FilteredTextBox 컨트롤을 사용하면 그러한 불편을 겪지 않아도 됩니다.
먼저, FilteredTextBox 컨트롤이 가지고 있는 속성부터 알아보도록 하겠습니다.
TargetControlID="TextBox3"
FilterType="Custom, Numbers"
ValidChars="+-=/*()." />
이탤릭체의 속성은 옵션으로 사용할 수 있는 속성입니다.
속성에 대한 설명은 다음과 같습니다.
1. TargetControlID : 동작할 TextBox 컨트롤의 ID입니다.
2. FilterType : TextBox 컨트롤에 적용될 필터의 타입입니다. "Numbers", "LowercaseLetters", "UppercaseLetters", "Custom" 중 하나의 값을 지정하면 되며, "Custom" 속성을 지정하면 ValidChars 속성을 사용하여, 입력할 문자를 설정할 수 있습니다. 또한 "Custom"을 지정하면, 다른 "Numbers", "LowercaseLetters", "UppercaseLetters"와 같은 설정값을 동시에 사용할 수 있습니다.
3. ValidChars : TextBox 컨트롤에 입력할 문자를 정의합니다.
그럼, 웹 폼을 하나 생성하고, 다음과 같이 코드를 작성합니다.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FilteredTextBox.aspx.cs" Inherits="FilteredTextBox" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>제목 없음</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<table border="0" cellpadding="0" cellspacing="0" style="background-color:#959695;" width="600px">
<tr style="height: 30px" valign="middle">
<td style="width: 100%; font-size: 11pt; color: White;" align="center" colspan="3">
FilteredTextBox Controls
</td>
</tr>
<tr style="height: 30px" valign="middle">
<td style="width: 1%">
</td>
<td style="width: 98%; background-color: White; font-size: 9pt;" align="left">
숫자만 입력 가능 : <asp:TextBox ID="txtText1" runat="server" Width="300px"></asp:TextBox>
</td>
<td style="width: 1%">
</td>
</tr>
<tr style="height: 30px" valign="middle">
<td style="width: 1%">
</td>
<td style="width: 98%; background-color: White; font-size: 9pt;" align="left">
소문자만 입력 가능 : <asp:TextBox ID="txtText2" runat="server" Width="300px"></asp:TextBox>
</td>
<td style="width: 1%">
</td>
</tr>
<tr style="height: 30px" valign="middle">
<td style="width: 1%">
</td>
<td style="width: 98%; background-color: White; font-size: 9pt;" align="left">
숫자 + 정의된 문자(-)만 입력 가능 : <asp:TextBox ID="txtText3" runat="server" Width="300px"></asp:TextBox>
</td>
<td style="width: 1%">
</td>
</tr>
<tr style="height: 2px" valign="middle">
<td style="width: 100%;" align="center" colspan="3">
</td>
</tr>
</table>
<cc1:FilteredTextBoxExtender
ID="FilteredTextBoxExtender1"
runat="server"
TargetControlID="txtText1"
FilterType="numbers">
</cc1:FilteredTextBoxExtender>
<cc1:FilteredTextBoxExtender
ID="FilteredTextBoxExtender2"
runat="server"
TargetControlID="txtText2"
FilterType="LowercaseLetters">
</cc1:FilteredTextBoxExtender>
<cc1:FilteredTextBoxExtender
ID="FilteredTextBoxExtender3"
runat="server"
TargetControlID="txtText3"
FilterType="Custom, numbers"
ValidChars="-">
</cc1:FilteredTextBoxExtender>
</form>
</body>
</html>
3개의 TextBox 컨트롤을 웹 폼에 위치시키고, 또한, 3개의 FilteredTextBoxExtender 컨트롤을 위치시킨 후 각각의 FilteredTextBoxExtender 컨트롤의 TargetControlID를 TextBox 컨트롤의 ID로 지정합니다. 첫 번째 TextBox 컨트롤에는 숫자만 들어가게 하도록, FilteredTextBoxExtender1의 FilterType 속성을 "Numbers"로 정의하고, 두 번째 TextBox 컨트롤에는 소문자만 들어가게 하도록, FilteredTextBoxExtender2의 FilterType 속성을 "LowercaseLetters"로 정의합니다. 또한, 세 번째 TextBox 컨트롤에는 전화번호나 우편번호처럼 숫자와 숫자 사이에 "-" 문자만 들어갈 수 있도록 FilteredTextBoxExtender3의 FilterType 속성을 "Custom, Numbers"로 지정하고, ValidChars 속성을 "-"로 정의합니다.
이제, 웹 브라우저에서 확인해보면 각 FilteredTextBoxExtender 컨트롤에 정의된 FilterType에 맞는 문자 또는 숫자만 각 TextBox 컨트롤에 입력되는 것을 확인할 수 있습니다.
그림 1. FilteredTextBoxExtender 컨트롤이 정의된 TextBox 컨트롤
이상으로 FilteredTextBox 컨트롤에 대해서 알아보았고, 다음 포스트에서 다른 AJAX 컨트롤에 대해서 알아보도록 하겠습니다.
출처 : http://blog.naver.com/handssjh?Redirect=Log&logNo=140041393735&vid=0
