AJAX MaskedEdit ve MaskedEditValidator Extender
15.02.2007 11:22:19
Merhaba arkadaşlar bu makalemde AJAX Control Toolkit nesnelerinden MaskedEdit ve MaskedEditValidator Extender nesnelerini inceleyeceğiz.
Puan:
     
MaskedEdit:

MaskedEdit kontrolü textbox üzerinde giriş denetimleri sağlayan bir ajax nesnesidir. Bu nesne textboxlara uygulandığında seçilen veri tipine bağlı olarak kullanıcının gireceği değer maskelenir. Girilen verilerin doğrulanması için MaskedEditValidator nesnesini kullanırız.

Bu nesneyi nerelerde kullanabiliriz? Bana kalırsa hemen hemen her yerde. Tarih girişlerinde, para birimi girişlerinde, sadece yazı yada sadece numeric değerleri girmek istediğimiz her yerde bu nesneyi kullanabiliriz.

Kullanımı:

<ajaxToolkit:MaskedEditExtender
    TargetControlID="TextBox2" 
    Mask="99,999.99"
    MessageValidatorTip="true" 
    OnFocusCssClass="MaskedEditFocus" 
    OnInvalidCssClass="MaskedEditError"
    MaskType="Number" 
    InputDirection="RightToLeft" 
    AcceptNegative="Left" 
    DisplayMoney="Left"/>

  • Maskeleme Karakterleri
            9 – Sadece numeric değer
            L - Harf
            $ - Harf yada boşluk
            C - Custom karakter(büyük küçük harf duyarlı)
            A - Custom karakter yada harf
            N - Custom karakter yada numeric değer
            ? – herhangi bir karakter

  • Maskeleme Araçları
             /    - Tarih Ayıracı
             :    - Zaman ayıracı
             .    - Ondalok ayıracı
             ,    - Binlik ayıracı
  • DisplayMoney: Para biriminin nasıl gösterileceğini belirler. (sol, sağ, none)
  • InputDirection: Veri girişinin başlangıç yönünü belirler.
  • MaskType: Maskeleme tipini belirtir.
            None – Valdiation yok
            Number - Numeric validation
            Date – Tarih validation
            Time - Zaman validation
  • MessageValidatorTip: Textboxın içeriği değiştiğinde görüntülenecek mesaj.

MaskedEditValidator:

Maskelenen textboxdaki verilerin doğruluğunu kontrol etmek için kullanılan kontroldür.

Kullanımı:

 
<ajaxToolkit:MaskedEditValidator
    ControlExtender="MaskedEditExtender2"
    ControlToValidate="TextBox2" 
    IsValidEmpty="False" 
    MaximumValue="12000" 
    EmptyValueMessage="Number is required"
    InvalidValueMessage="Number is invalid" 
    MaximumValueMessage="Number > 12.000"
    MinimumValueMessage="Number < -100" 
    MinimumValue="-100" ValidationGroup="Demo1"
    Display="Dynamic" 
    TooltipMessage="Input a number: -100 up to 12.000"/>

Özellikleri:
  • ControlToValidate – Kontrol edilecek olan textbox’ın ID’si
  • ControlExtender – Maskeleme yapan Extenderin ID’si
  • ClientValidationFunction – Custom validator içim kullanolan fonksiyon
  • InitialValue – Validation’un başlangıç değeri. Varsayılanı boştur
  • IsValidEmpty – Textbox boşşa requiredfield validator’ı çalışır.
  • MaximumValue – Maskeleme için max. Değer. (CompareValidator çalışır)
  • MinimumValue - Maskeleme için min. Değer. (CompareValidator çalışır)
  • MessageEmpty – RequiredValidator çalıştığında verillecek mesaj
  • MaximumValueMessage – Max değerden büyük bir değer girildiğinde verilecek mesaj. (CompareValidator çalışır)
  • MinimumValueMessage - Min değerden büyük bir değer girildiğinde verilecek mesaj. (CompareValidator çalışır)
  • InvalidValueMessage – Geçersiz değer girildiğinde görüntülenecek mesaj
  • TooltipMessage – textbox üzerinde gelince yada boşken görüntülenecek olan tooltip değeri.
  • ValidationExpression – Veriyi doğrulamak için kullanılan Regular expression.
Örnek:

Örneğimizde tarih alanına veri girerek istediğimiz kritere uygun olup olmadığını kontrol edip verilerin doğrulanmasını, eğer girilen veri yanlışşsa kullanıcının bilgilendirilmesini sağlayacağız.

Örneğimize geçelim ve yeni bir Ajax Projesi açalım. Sayfamıza script manager, textbox, MaskedEditExtender, MaskedEditValidationExtender koyalım.



Şimdi maskleme ve validation için gerekli kodları yazalım. Bunun için HTML kod kısmına geçelim.

Maskeleme işlemi




Validation işlemi



Projemizi çalıştıralım; ve Geçersiz bir tarih girelim



Şimdi belirtilen tarihten büyük bir tarih girelim;



Şimdi belirtilen tarihten küçük bir tarih girelim;



Evet gerçekten çok kullanışlı 2 kontrol. Ufak tefek bugları var ama zamanla düzeleceğinden hiç kuşkum yok :)

Bu makalenin de sonuna geldik, başka bir makalede görüşmek üzere başarı ve iyi günler dilerim.

Sem GÖKSU
MCP | MCAD.NET | MCTS

Örnek Kodlar için mail adresimi kullanabilirsiniz

askisem@hotmail.com

Kaynaklar

http://ajax.asp.net
 
Puan: