FilteredTextBoxExtender Numbers only (ป้อนได้เฉพาะตัวเลข)


 

Download source:
http://cid-7d608959d854cb28.skydrive.live.com/embedrowdetail.aspx/SourcesCode/Ajax|_FilteredTextBoxExtender|_13-10-2008.zip

มีหลายๆ ครั้งที่เหล่านักพัฒนามักประสบปัญหากับการควบคุมกล่องข้อความ ให้รับข้อมูลได้เฉพาะในแบบฉบับที่ระบบต้องการ เช่นการบังคับให้ผู้ใช้งานสามารถป้อนข้อมูลได้เฉพาะตัวเลข หรือป้อนได้เฉพาะตัวอักษรเป็นต้น

 

วันนี้เราไปบังคับให้ผู้ใช้งานป้อนข้อมูลได้เฉพาะตัวเลขกันครับ โดยใช้ FilteredTextBox คอนโทรลที่บรรจุมาใน ASP.NET AJAX Control Toolkit :(ศึกษาข้อมูลเพิ่มเติมได้ที่นี่ครับ)

เราสร้างโปรเจ็กต์ ASP.Net แล้วทำการลากคอนโทรล Label และ TextBox อย่างละ 1 อัน และลาก ScriptManager ไปวางใต้แท็ก form ดังรูป

1

เบื้องหลัง VS2008 จัดการให้เราเป็นแบบนี้:

<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>ป้อนได้เฉพาะตัวเลข:<br />
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </div>
    </form>
</body>

 

ทำการเพิ่มคอนโทรล FilteredTextBox เข้าไปที่ กล่องข้อความโดยคลิกที่สมาร์ทแท็ก > แล้วเลือกเมนู Add Extender…

2

 

จะมีหน้าต่าง Extender Wizard จากนั้นให้หา FilteredTextBoxExtender เลือกและกด OK

3

 

ปรับพลอเพอร์ตี้ FilteredTextBoxExtender โดยคลิกบน TextBox1 แล้วขยายเมนู TextBox1_FilteredTextBoxExtender ตรงพลอเพอร์ตี้ ValidChars ให้ป้อนใส่ข้อมูลเฉพาะที่เราต้องการให้คอนโทรล TextBox รับได้เช่นในบทความใช้ตัวเลข 0-9 และ . ดังรูป 

4

หลังจากเราปรับสรรพสิ่งเรียบร้อยแล้ว VS2008 จัดการให้เราดังนี้:

<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>ป้อนได้เฉพาะตัวเลข:<br />
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <cc1:FilteredTextBoxExtender ID="TextBox1_FilteredTextBoxExtender"
            runat="server" Enabled="True" TargetControlID="TextBox1"
            ValidChars="1234567890.">
        </cc1:FilteredTextBoxExtender>
    </div>
    </form>
</body>

 

ทดสอบรัน และป้อนข้อมูล กล่องข้อความสามารถกรองข้อมูลตามที่เราต้องการได้

5

 

Download source:
http://cid-7d608959d854cb28.skydrive.live.com/embedrowdetail.aspx/SourcesCode/Ajax|_FilteredTextBoxExtender|_13-10-2008.zip

 

แหล่งข้อมูลอ้างอิง:

เอามาจากที่นี่ครับท่านผู้อ่านเข้าไปศึกษาเพิ่มได้ยังมีตัวอย่างอีกมากมายคอยอยู่ครับ

Ajax-control-toolkit

เกี่ยวกับ

Nuchit Atjanawat is a Microsoft MVP, GreatFriends Community Leader, WindowsITPro Columnist(Mr.Nano), Silverlight Business Application Instructor, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession. He has a very good skill over Silverlight, LightSwitch, C#, XAML & Blend. He shares his technical findings, tutorials in his technical blog. Follow his Blog and Facebook page to be updated on latest articles. - Technical Blog: https://janawat.wordpress.com - WindowsITPro Columnist(Mr.Nano): http://windowsitpro.net - The GreatFriends.Biz Community Discussion Board (nano): http://greatfriends.biz - witter: https://twitter.com/janawat - Facebook Page: https://www.facebook.com/nuchit - Instructor: http://bit.ly/GF250-01, http://bit.ly/GF150-02

เขียนใน AJAX
One comment on “FilteredTextBoxExtender Numbers only (ป้อนได้เฉพาะตัวเลข)
  1. Daracha พูดว่า:

    ขอบคุณมากๆครับ แก้ปัญหา error ของผมได้ด้วยครับDetail:Bugs at FilterTextBox ที่เป็น FilterType="Numbers" เวลาดึง data ที่เป็น Number(10.2) จากค่า xxx.00 มันจะอ่านเป็น xxx00 แทนเนื่องจากมันไม่อนุญาติ “.” เพราะมันจะคอย Filter เฉพาะตัวเลข มันเลยอ่านเป็น xxx00 ทุกครั้งพอมัน Save Data มันเลยยาวขึ้นเรื่อยๆครับ ถ้ามีการ Update หน้านั้นหลายๆครั้ง ทำให้หน้านั้น Error เพราะ Field Value Larger Than ….

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

In Archive
%d bloggers like this: