ASP.NET

  • 15 Şub 2007

AJAX DragPanel Extender
Merhaba arkadaşlar, bu makalemizde ajax control toolkit’in nesnelerinden DragPaneel Extender kontrolünü inceleyeceğiz.

AJAX DragPanel Extender

DragPanel Extender WenForm üzerindeki kontrolleri web form üzerinde baska bir yere sürüklenmesini saglar. DragPanel Panel nesnesini hedef alır ve "Drag Handle" gibi kullanmak için kontrole eklenen ek paramatreler alır.

Bu kontrolü özellikle web sayfalarımızın reklam bannerlarında kullanırız. Buda sitemize hareketlilik kazandırır. Bende bu makalemde bu nesneniyi reklam banner örnegini kullanarak anlatacagım.

Kullanımı:

<ajaxToolkit:DragPanelExtender
ID="DPE1" runat="server"
TargetControlID="Panel3"
DragHandleID="Panel4"  />

Özellikleri:

    TargetControlID - Tasınacak olan Panel'in ID'si
    DragHandleID - Tasınacak panel için Tasınacagı panelin ID'si. Kullanıcı paneli bu panelin içerisinde bi yere tasıyabilecek.

Örnek:
Evet arkadaslar örnegimizde Reklam bannerlerini form üzerinde ordan oraya tasıyacagız  : )

Ilk olarak bir AJAX projesi açalım.


 
Daha Sonra sayfamıza 2 adet panel ekleyelim ve içerisine reklamını aldıgımız firmanın logosunu koyalım. Ayrıca bir adet de DragPanel Extender nesnesi ekleyelim.
Benim yaptıgım form asagıdaki gibidir.


 
Panel için yazdıgım kodlar;

    <asp:Panel ID="Panel1" runat="server" Direction="LeftToRight" HorizontalAlign="Left"
                ScrollBars="Horizontal" Width="100%" Height="800px">           
                    <asp:Panel ID="Panel3" runat="server" BorderStyle="Solid" BorderWidth="2px" Width="242px">
                        &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
                        <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="Small"
                            Text="Kurtlar Vadisi Terör" ForeColor="#C00000"></asp:Label>
                        <br />
                        <br />
                        &nbsp; &nbsp;
                        <asp:Image ID="Image1" runat="server" ImageUrl="~/70866.jpg" /><br />
                        <br />
                </asp:Panel>
       </asp:Panel>

Panelimizi yani reklam bannerimizi tasınabilir hale getirelim.

<cc1:DragPanelExtender ID="DragPanelExtender11" runat="server"  DragHandleID="Panel1"
             TargetControlID="Panel3" />

Simdi projemizi çalıstıralım.
 


Reklam bannerimizi tasıyalım;


 
Evet reklam bannerimizi ordan oraya savurduk : )

Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı 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

  • 15 Şub 2007

AJAX UpdatePanelAnimation Extender
Merhaba arkadaşlar, bu makalemizde ajax control toolkit’in nesnelerinden UpdatePanelAnimation Extenderi ve özelliklerini inceleyeceğiz.

AJAX UpdatePanelAnimation Extender

Updatepanelanimation sayfalarımıza framework içerisinde tanımlı olan animasyonları uygulamamıza izin veren Ajax kontrolüdür. Bir update islemi tamamlandıgında yada update islemi devam ederken buna baglı olarak animasyonların oynatılmasını saglar.

Postback basladıgında OnUpdating animasyonu çalısır fakat Postback sona erdiginde OnUpdated animasyonu çalısır.

Not: Update Panelin UpdateMode özelligi always olarak ayarlanmalı çünkü postback tamamlandıgında OnUpdated animasyonu çalısacak.

Oynatılan Animasyonlar, XML kullanarak tanımlanır. Frameworkdaki animasyonları kullanmak için; (Using Animation) 

http://ajax.asp.net/ajaxtoolkit/Walkthrough/UsingAnimations.aspx  adresine tıklayınız.

Animasyonların propertylerine erismek için(Animasyon Reference);

http://ajax.asp.net/ajaxtoolkit/Walkthrough/AnimationReference.aspx Adresine tıklayınız.

Kullanımı:

<ajaxToolkit:UpdatePanelAnimationExtender ID="ae"

  runat="server" TargetControlID="up">

     <Animations>

        <OnUpdating> ... </OnUpdating>

        <OnUpdated> ... </OnUpdated>

    </Animations>

</ajaxToolkit:UpdatePanelAnimationExtender>

Özellikleri:
  • TargetControlID - Animasyonu oynatmak için kullanılacak olan UpdatePanel'inn ID'si.
  • OnUpdating - Update islemi gerçeklesirken gerçeklesecek olan animasyon.
  • OnUpdated - Update islemi bittiginde gerçeklesecek olan animasyon.
Örnek:

Örnegimizde SQLDataSource ile Databaseimize baglanıp kayıtlar arasında gezinecegiz. Sayfamız degisirken yada herhangi bir update islemi yapılırken animasyonumuzu oynatacagız.

Ilk olarak bir ajax projesi olusturalım.



Projemizi olusturduktan sonra Sayfamıza bir adet SQLDataSource ekleyelim. AdventureWorks databaseine baglanım person.contact tablosundaki verileri görüntüleyecegiz. Ben Firstname, MiddleName, LastName ve EmailAddress alanlarını aldım.



Daha sonra projemize bir adet Gridview ekleyelim ve DataSourceID özelligini ekledigimiz SQLDataSource1 olarak seçelim.

Daha sonra sayfamıza bir adet updatepanel ve updatepanelanimation nesnelerini ekleyelim. Benim tasarladıgım sayfa asagıdaki gibidir.



Evet simdi Update Panelimiz postback oldugunda çalısacak olan animasyonumuz için gerekli kodları yazalım.

Animasyon 1:

            <cc1:UpdatePanelAnimationExtender

                ID="UpdatePanelAnimationExtender1"

                runat="server"

                TargetControlID="UpdatePanel1">

                <Animations>

                     <OnUpdated>

                         <FadeOut Duration=".5" Fps="20" />

                    </OnUpdated>

                    <OnUpdating>

                         <FadeIN Duration=".5" Fps="20" />

                    </OnUpdating>

                </Animations>

            </cc1:UpdatePanelAnimationExtender>

Farklı bir animasyon daha verebiliriz.

Animasyon 2:

            <cc1:UpdatePanelAnimationExtender

                ID="UpdatePanelAnimationExtender1"

                runat="server"

                TargetControlID="UpdatePanel1">

                <Animations>

                     <OnUpdated>

                          <Pulse  Duration=".5" minimumOpacity=".3" maximumOpacity="2"/>

                    </OnUpdated>

               </Animations>

            </cc1:UpdatePanelAnimationExtender>

Evet simdi testimizi yapalım.



2. sayfaya geçiyoruz ve postback devam ederken sizin için yakaladıgım görüntü asagıdak gibidir.



Evet biraz daha donuk bir görüntü ile karsımızda. Sizde denediginizde gerçekten çok güzel bir animasyon efekti oldugunu göreceksiniz J Isterseniz diger animasyonları deneyebilirsiniz.

Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı 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

  • 15 Şub 2007

AJAX MaskedEdit ve MaskedEditValidator Extender
Merhaba arkadaşlar bu makalemde AJAX Control Toolkit nesnelerinden MaskedEdit ve MaskedEditValidator Extender nesnelerini inceleyeceğiz.

MaskedEdit:

MaskedEdit kontrolü textbox üzerinde giris denetimleri saglayan bir ajax nesnesidir. Bu nesne textboxlara uygulandıgında seçilen veri tipine baglı olarak kullanıcının girecegi deger maskelenir. Girilen verilerin dogrulanması için MaskedEditValidator nesnesini kullanırız.

Bu nesneyi nerelerde kullanabiliriz? Bana kalırsa hemen hemen her yerde. Tarih girislerinde, para birimi girislerinde, sadece yazı yada sadece numeric degerleri girmek istedigimiz 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 deger
            L - Harf
            $ - Harf yada bosluk
            C - Custom karakter(büyük küçük harf duyarlı)
            A - Custom karakter yada harf
            N - Custom karakter yada numeric deger
            ? - herhangi bir karakter

  • Maskeleme Araçları
             /    - Tarih Ayıracı
             :    - Zaman ayıracı
             .    - Ondalok ayıracı
             ,    - Binlik ayıracı
  • DisplayMoney: Para biriminin nasıl gösterilecegini belirler. (sol, sag, none)
  • InputDirection: Veri girisinin baslangıç yönünü belirler.
  • MaskType: Maskeleme tipini belirtir.
            None - Valdiation yok
            Number - Numeric validation
            Date - Tarih validation
            Time - Zaman validation
  • MessageValidatorTip: Textboxın içerigi degistiginde görüntülenecek mesaj.

MaskedEditValidator:

Maskelenen textboxdaki verilerin dogrulugunu 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 baslangıç degeri. Varsayılanı bostur
  • IsValidEmpty - Textbox bossa requiredfield validator'ı çalısır.
  • MaximumValue - Maskeleme için max. Deger. (CompareValidator çalısır)
  • MinimumValue - Maskeleme için min. Deger. (CompareValidator çalısır)
  • MessageEmpty - RequiredValidator çalıstıgında verillecek mesaj
  • MaximumValueMessage - Max degerden büyük bir deger girildiginde verilecek mesaj. (CompareValidator çalısır)
  • MinimumValueMessage - Min degerden büyük bir deger girildiginde verilecek mesaj. (CompareValidator çalısır)
  • InvalidValueMessage - Geçersiz deger girildiginde görüntülenecek mesaj
  • TooltipMessage - textbox üzerinde gelince yada bosken görüntülenecek olan tooltip degeri.
  • ValidationExpression - Veriyi dogrulamak için kullanılan Regular expression.
Örnek:

Örnegimizde tarih alanına veri girerek istedigimiz kritere uygun olup olmadıgını kontrol edip verilerin dogrulanmasını, eger girilen veri yanlısssa kullanıcının bilgilendirilmesini saglayacagız.

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



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

Maskeleme islemi




Validation islemi



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



Simdi belirtilen tarihten büyük bir tarih girelim;



Simdi belirtilen tarihten küçük bir tarih girelim;



Evet gerçekten çok kullanıslı 2 kontrol. Ufak tefek bugları var ama zamanla düzeleceginden hiç kuskum yok :)

Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı 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