AJAX ve AJAX kontrolleri her geçen gün artarak kullanılmaya ve hayatımızı kolaylaştırmaya devam ediyor.
Zamanında scripting diller ile uzun zaman harcayarak yada DHTML dünyasında derinliklerde dolaşarak yaptığımız işlemleri, artık AJAX teknolojisi ise üstelik ASP.NET ve ADO.NET uyumlu olarak kolaylıkla yapabiliyoruz.

ASP.NET AJAX 1.0 Beta 2 ile birlikte AJAX dünyasındaki kontroller


Şimdilik bunlardan ibaret. Fakat AJAX’ a gösterilen ilgiye bakılırsa siz bu makaleyi okurken bile yeni kontroller ekleniyor olabilir. Şimdi durumu biraz daha ileri götürüp bu kontrollerden bazılarını inceleyelim.
İşe yeni bir Asp.NET AJAX projesi açarak başlıyoruz fakat web sitelerimizi oluştururken genelde AJAX projesi olarak oluşturmadığımız için hemen söyliyeyim, AJAX projesi oluşturmak zorunda değiliz. Çünkü herhangibir AJAX kontrolü kullandığınızda uygulamanızın bin dizininde Ajaxcontroltoolkit dll dosyasının oluştuğunu göreceksiniz.
Bu da artık Ajax kontrollerinizi uygulamalarınızda kullanabilirsiniz anlamına gelmektedir.

Accordion Kontrolü :

<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" FramesPerSecond="45"

SelectedIndex="0" Width="400px">

<Panes>

<cc1:AccordionPane runat="server">

<Header>

başlık 1

</Header>

<Content>

içerik 1

</Content>

</cc1:AccordionPane>

<cc1:AccordionPane runat="server">

<Header>

başlık 2

</Header>

<Content>

içerik 2

</Content>

</cc1:AccordionPane>

</Panes>

</cc1:Accordion>

Şeklinde yazılır. Panes düğümü altına yerleştirilen her accordionpane bir akordion parçası olarak görülmektedir. Accordionpane düğümü içerisine yazılan header ilgili alanın başlık kısmını, content ise yine ilgili alanın içerik kısmını ifade eder.
Accordion kontrolünün FramesPerSecond özelliği item lar arasındaki geçişin hızını, selectedindex başlangıç item değerini belirlemekte kullanılır.

Drag Panel Kontrolü :

Uygulamalarımızda bir panelin sürükle - bırak yöntemiyle başka bir yere taşımasına ihtiyaç duyuyorsanız drag panel kontrolü tam size kullanımı kolay ve sorunsuz bir kontrol .

<asp:Panel runat="server" ID="pnl1" BackColor="LemonChiffon" BorderStyle="Dotted" BorderWidth="1px" Font-Names="Trebuchet MS" ForeColor="Maroon">

Bu Paneli sürükle-Bırak yöntemiyle taşıyabilirsiniz.

</asp:Panel>

<cc1:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="pnl1">

</cc1:DragPanelExtender>

Animation Kontrolü :

Değişik animasyon seçenekleri sunan bir Ajax kontrolü, Panele tıkladığızda kırmızıdan siyaha doğru dönüşen kısa bir renklendirme animasyonu göreceksiniz.
Kullanım şekli ;

<asp:Panel runat="server" ID="MyPanel" BackColor="LemonChiffon" BorderStyle="Dotted" BorderWidth="1px" Font-Names="Trebuchet MS" ForeColor="Maroon">

xxxxxx<br />

xxxxxxxx<br />

xxxxxxx<br />

</asp:Panel>

<cc1:AnimationExtender id="MyExtender"

runat="server" TargetControlID="MyPanel">

<Animations>

<OnClick>

<Sequence>

<EnableAction Enabled="false" />

<Color AnimationTarget="MyContent"

Duration="1"

StartValue="#FF0000"

EndValue="#666666"

Property="style"

PropertyKey="backgroundColor" />

<Color AnimationTarget="MyContent"

Duration="1"

StartValue="#FF0000"

EndValue="#666666"

Property="style"

PropertyKey="backgroundColor" />

<EnableAction Enabled="true" />

</Sequence>

</OnClick>

</Animations>

</cc1:AnimationExtender>

DropShadow Kontrolü :

Bağlandığı panele gölge veren Ajax kontrolüdür. Kullanımı son derece kolaydır.

<asp:Panel ID="Pnl2" runat="server" BackColor="NavajoWhite" Width="150px" Height="80px">

Bu Panel<br />

.8 Saydamlıkta, <br />

yuvarlak köşeli<br />

gölgeli bir paneldir.<br />

</asp:Panel>

<cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="pnl2" Opacity=".8" Rounded="true" TrackPosition="true" >

</cc1:DropShadowExtender>

Bu kodun neticesinde ekran çıktısı şu şekilde olacaktır.



TextBoxWatermark Kontrolü :

Bu kontrol hedef belirlenen bir textbox kontrolü üzerine yine sizin belirleyeceğiniz style şekilleriyle kaplama yapar. Bu kaplama işlemi textbox kontrolünün aktif olması (tıklanılması, içine yazı yazılması) ile birlikte sona erer.

<style>

.txtclass

{

.border-left: 1px silver thin solid;

.border-right: 1px silver thin solid;

.border-top: 1px silver thin solid;

.border-bottom: 1px silver thin solid;

.background-color:steelblue;

.color:white;

.font-family:Trebuchet MS,Trebuchet MS;

}

</style>

<asp:TextBox runat="server" ID="txt1"></asp:TextBox>

<cc1:TextBoxWatermarkExtender runat="server" TargetControlID="txt1" WatermarkText="adınızı yazınız." WatermarkCssClass="txtclass"></cc1:TextBoxWatermarkExtender>

Yukarıdaki kod sonucu ekrana şöyle bir görüntü gelecektir.

Ekran görüntüsünden de anlayacağınız gibi textbox kontrolü 1. şekilde style class ını kullanarak kaplanmış durumda. 2. şekilde ise textbox kontrolüne tıklandığı için normal halini almış durumda.

RoundedCorners Kontrolü :

Bu kontrol adındanda anlaşılacağı gibi hedef belirtilen bir panel kontrolünü köşeli hale getirir. Radius özelliği değiştirilerek panelin köşelerinin round (yuvarlaklık) ayarı değiştirilebilir.

<asp:Panel ID="pnl3" runat="server" HorizontalAlign="Center" BackColor="tan" height="45" Width="85">

Bu panel yuvarlak köşelidir<br>

</asp:Panel>

<cc1:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" Radius="25" TargetControlID="pnl3">

</cc1:RoundedCornersExtender>

Ekran görüntüsü şu şekilde oluşacaktır.


Dropdown Kontrolü :

Bu Ajax kontrolü, bir label ve panel kontrolünü birleştirerek dropdown list görüntüsü oluşturur fakat normal dropdown kontrolünden farkı style kullarak şekillendirilebilir olması ve label kontrolünün üzerine gelindiğinde çalışabilir olmasıdır. Dropdown kontrolüne farklı bir hava katmak için uygun bir çözüm olabilir.

<asp:Label Font-Names="Trebuchet MS" Font-Size="Small" ID="lbldrp" runat="server" Text=" Ajax DropDown Menu " Width="200px"></asp:Label>

<asp:Panel Font-Names="Trebuchet MS" Font-Size="Small" ID="pnl4" runat="server" BackColor="whitesmoke" BorderStyle="Solid" BorderWidth="1" Width="150px" >

&nbsp;<a href="?id=1">seçim1</a><br />

&nbsp;<a href="?id=2">seçim2</a><br />

&nbsp;<a href="?id=3">seçim3</a><br />

&nbsp;<a href="?id=4">seçim4</a><br />

&nbsp;<a href="?id=5">seçim5</a><br />

&nbsp;<a href="?id=6">seçim6</a><br />

</asp:Panel>

<cc1:DropDownExtender runat="server" ID="cc1drp" DropDownControlID="pnl4" TargetControlID="lbldrp">

</cc1:DropDownExtender>

Ekran görüntüsünde 1. şekilde dropdown kontrolünün ilk hali görüntülenmektedir. 2. şekil ise mouse ile kontrolün üzerine geldiğimizde ortaya çıkar. 3. şekil ise dropdown kontrolüne tıklanıldığında görünen panel kontrolüdür. Panel kontrolünü istediğimiz gibi değiştirebiliriz.

PasswordStrength Kontrolü :

Bu çok kulanışlı ve programlanması gayet kolay olan kontrol, ileride üyelik sayfalarımızın vazgeçilmezi olmaya aday. Hedef belirtilen bir textbox kontrolünü sizin belirttiğiniz seçenekler dahilinde şifreleme açısından güvenli olup olmadığını ortaya çıkarıyor.

<asp:TextBox ID="TextBox1" TextMode="Password" runat="server"></asp:TextBox>

<cc1:PasswordStrength ID="PS" runat="server"

TargetControlID="TextBox1"

DisplayPosition="RightSide"

StrengthIndicatorType="text"

PreferredPasswordLength="6"

PrefixText="Güvenlik Düzeyi:"

TextCssClass="txtclass"

MinimumNumericCharacters="0"

MinimumSymbolCharacters="0"

RequiresUpperAndLowerCaseCharacters="false"

TextStrengthDescriptions="Güvenliksiz;Zayıf;Orta Düzey;Zor;Mükemmel"

CalculationWeightings="50;15;15;20" />

Kısaca inceleyecek olursak ;
StrengthIndicatorType : Kullanıcı şifresini ilgili texbox kontrolüne girerken ekrana gelecek olan güvenlik durumunun hangi şekilde olacağıdır.
İki değer alır,
1. Text
2. BarIndicator
BarIndicator seçili olduğunda ekrana güvenliğin hangi düzeyde olduğunu belirten bir bar çizelgesi gelecektir.
PreferredPasswordLength : Integer bir değer alır ve şifrenin karakter uzunluğunun kaç karakter olduğunda güvenli seviyede olabileceğini belirtir.
Kabul edilebilir şifre uzunluğu da denilebilir.
PrefixText: TextStrengthDescriptions değerlerinin önüne gelen tanım kısmıdır.
TextStrengthDescriptions: Şifrenin güvenlik düzeylerinin tanımıdır. Girilen şifrenin karakter sayısına, sembolik değerlerin olup olmamasına göre, numerik yada harf karakterlerinin kullanımına göre çalışma zamanında değişkenlik gösterir.
RequiresUpperAndLowerCaseCharacters: Büyük – Küçük harf ayrımının olup olmayacağını belirten özelliktir.
CalculationWeightings: Varsayılan değeri 50;15;15;20 ayarlanmıştır. Bunun anlamı,
İlk hanedeki 50 değeri : Güvenlik düzeyinin %50 lik kısmını şifrenin uzunluğu belirler demektir.
İkinci hanedeki 15 değeri : Şifredeki karakterler arasından numerik karakterlerin şifrenin güvenliğine olan oranını yüzdelik olarak belirtir.
Üçüncü ve dördüncü hanedeki rakamlar ise casing ve sembolik karakterler içindir. Sembolik karakterlere örnek olarak *, ?, ^, $ gibi karakterleri verebiliriz.
StrengthIndicatorType özelliğini Text ve BarIndicator olarak ayrı ayrı değiştirdiğimizde aşağıdaki ekran görüntülerini alacağız.



Şimdilik Ajax Control Toolkit kontrollerine bukadar değinelim.
Fırsat buldukça diğer kontrolleride tanımaya çalışacağız.

Makalenin kaynak kodlarına ulaşmak için buraya tıklayınız.

Umarım faydalı olmuştur.

İsmail AKTAŞ