Sermin'in Bilgi Paylaşımı..

Asp.Net Ajax Kontrollerinden Toggle Button nasıl ve ne amaçla kullanıldığını anlamaya çalışacağız. Türkçe karşılığı iki konumlu düğme olan bu kontrol adından da anlaşılacağı gibi iki farklı görsel öğeyi üzerinde barındırır. Alışık olduğumuz kontrollerden RadioButton ve CheckBoxtan farklı olarak üzerinde resim taşır. Checkbox kontrolü yardımı ile herhangi bir işlem için onay alımı ya da bir grid üzerinde görüntülenmekte olan bilgilerin bir kısmının silinip silinmeyeceği bilgisini arka tarafta list kolleksiyonuna eklerken ana işlem olarak kullanılabilmekte. Ancak son kullanıcılara kutu içerisinde bir seçilmiş okey işareti yerine dikkat çeken bir görsel öğe sunmak her zaman sayfamıza zenginlik katar.

Bunu basit bir örnekle anlatmak gerekirse; VisualStudio içinde projemizi AJAXEnabledWebApplication olarak başlatalım. projeye yeni bir resim klasörü ekleyelim. Bu klasör içine slayt içinde kullanacağımız resimleri koyalım. Default.aspx sayfasındaki script manager altına bir tane update panel, iki tane check box, bir tane button, bir tane image, iki tane de toggle button sürükleyelim.

Sırasıyla CheckBoxların checked özelliğini "false" widht ve hight özelliklerinide seçtiğimiz resimlerin boyutuna getirelim. ToggleButton özelliklerinden TargetControlID, ImageWidth, ImageHeight, UncheckedImageUrl, ChekedImageUrl özelliklerini düzenliyoruz.

<asp:CheckBox ID="CheckBox1" Checked="false" Width="200px" Height="150" runat="server" /> <br /> <asp:CheckBox ID="CheckBox2" Checked="false" Width="200px" Height="150" runat="server" /> <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" /> <br /> <asp:Image ID="Image1" ImageUrl="~/Resim/r0.png" runat="server" /> <br /> <asp:Label ID="Label1" runat="server" Text="Daha bişey seçilmedi.."></asp:Label> <cc1:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server" TargetControlID="CheckBox1"         ImageWidth="100" ImageHeight="100" UncheckedImageUrl="Resim/r0.png" CheckedImageUrl="Resim/r1.png"         CheckedImageAlternateText="Seçildi" UncheckedImageAlternateText="Seçilmedi"> </cc1:ToggleButtonExtender> <cc1:ToggleButtonExtender ID="ToggleButtonExtender2" runat="server" TargetControlID="CheckBox2"         ImageWidth="100" ImageHeight="100" UncheckedImageUrl="Resim/r0.png" CheckedImageUrl="Resim/r2.png"         CheckedImageAlternateText="Seçildi" UncheckedImageAlternateText="Seçilmedi"> </cc1:ToggleButtonExtender>

Button1 üzerine iki kez tıkaldıktan sonra Default.aspx.cs içine

protected void Button1_Click(object sender, EventArgs e)      {           string strSecilen = "";          Image1.ImageUrl = "Resim/r0.png";          if (!CheckBox1.Checked && !CheckBox2.Checked)              {                   Image1.ImageUrl = "Resim/r0.gif";                   strSecilen = "Seçilmedi bişey..";               }           else if (!CheckBox2.Checked)               {                  Image1.ImageUrl = "Resim/r1.gif";                  strSecilen = "üst resim seçildi..";               }            else if (!CheckBox1.Checked)              {                   Image1.ImageUrl = "Resim/r2.gif";                   strSecilen = "alt resim seçildi..";              }            else             {                  Image1.ImageUrl = "Resim/r3.gif";                  strSecilen = "aboo hepsi geliverdi..";             }           Label1.Text = strSecilen;      }

kontrolünü yazıyoruz.Proğramı çalıştırdığımızda sonuç..

Hiç seçim yapmadan tıkladığımızda..

Üst resmi seçip tıkladığımızda..

Alt resmi seçip tıklandığımızda..

İkisi de seçildiğinde..

Umarım yararlı olabilmişimdir.

Sermin Yağcı

http://serminyagci.blogspot.com

Bu yazımızda Ajax Kontrollerinden Drop Shadow extender üzerinde duracağız. Bu kontrolün kullanım amacı sayfalarımızda kullandığımız panellere görsel zenginlik katmaktır. Aynı zaman da bu panellerin köşelerini yuvarlayabilmemizede olanak sağlıyor.

Basit bir örnekle ele alırsak VisualStudio içinde projemizi AJAXEnabledWebApplication olarak başlatalım. Default.aspx sayfası içine bir tane panel sürükleyelim. Arkasından bir tanede DropShadowExtender. Şimdi bu kontrolün özelliklerine bir bakalım.

TargetControlID, hangi alanın gölgesi olması gerektiğini belirtir. Opacity, kenardaki gölgenin yoğunluğunu gösteriyor beyazdan siyaha. Rounded, panel köşelerinin oval olmasını sağlar. Radius, köşelerin oval olması durumunda yuvarlağın çapını belirtir. Width, gölge kalınlığını gösterir.

Düzenlemeleri yaptıktan sonra panel görüntüsü aşağıdaki gibidir.

 

Umarım yararlı olabilmişimdir.

Sermin Yağcı

 AJAX Timer Kontrol web sayfasında herhangi bir güncelleme görevi gerçekleştirmek için zaman aralığı belirleyen bir kontroldür. Bizim belirlediğimiz periyotlarla aktif olarak sürekli  postback yapmamızı sağlar. GenllikleUpdatePanellerle birlikte kullanılırlar. Sayfamızın kısmi olarak güncellenmesini sağlarlar. Örnek vermek gerekirse sayfa içinde saat görüntülemek, slayt göstermek, bir oyun içinde topu sürekli hareket ettirmek yada sayfa içinde yapılacak bir işlem için bekleme yapmak gerktiğinde kullanılabilecek önemli bir kontroldür.

Daha iyi kavrayabilmemiz açısından bu  kontrolü basit bir örnekle ele almaya çalışacağız. Bu örnekte yapacağımız şey sayfanın başında saniyeleri gösteren bir saat ve hemen altında bizim hazırladığımız klasör içindeki resimlerden beş saniyede bir rasgele seçilerek oluşturulan bir slayt.

VisualStudio içinde projemizi AJAXEnabledWebApplication olarak başlatıyoruz. Dizayn sayfasına bir adet update panel, panel içine bir tane Label ve bir tanede Timer kontrolü sürüklüyoruz. Bu kontrolün özelliklerine bakılınca Interval özelliğini görüyoruz. Bu özellik Timer’ın kaç milisaniyede (saniyenin binde biri)  bir tetikleneceğini gösteriyor.

  

Event (olay)’larına baktığımızda Tick görüyoruz bunun karşısına iki kez tıkladığımızda Default.aspx.cs sayfasına

protected void Timer1_Tick(object sender, EventArgs e)      {         Label1.Text = DateTime.Now.ToString();      }

kod parçasını yazarak projemizi çalıştırdığımızda sayfamızın içinde artık hersaniye değişen sistem saatimizi gösteren bir saatin mevcut olduğunu görürüz.

Sayfamıza bir tane de slayt ekleyelim. Bunun için önce proje içine bir Resimler klasörü ekleyelim. Resimlerin rasgele seçilmesi sağlayabilmek için resim isimlerinin sıralı olması gerekmekte. Örneğin resim_1, resim_2, resim_3, … gibi. Dizayn sayfamıza 1 tane daha update panel, timer kontrol ve image ekliyoruz. ImageUrl tanımlıyoruz.

<asp:Image ID="Image1" runat="server" ImageUrl="~/Resimler/resim_1.gif" />

Timer Kontrolün resimleri 5 saniyede 1 değiştirmesi için  için Timer2’nin Interval özelliğine 5000 yazıyoruz. Update panelin Triger Kolleksiyonunu aşağıdaki gibi düzenliyoruz.

Timer2’nin Tick eventi üzerine iki kez tıkladıktan sonra Default.aspx.cs sayfası içine

protected void Timer2_Tick(object sender, EventArgs e)       {         Random RasgeleResimlerim = new Random();         int i = RasgeleResimlerim.Next(1, 5);         Image1.ImageUrl = System.String.Concat("Resimler/resim_", i.ToString(), ".gif");       }

Kod bloğunu yazıyoruz. Burada Random sınıfından yararlanarak i değişkenine bir ile beş arasında bir değer tanımlıyoruz (bu sayıda olmasının nedeni resim klasörüne beş tane resim koymam) sonrasında da resimlerin görüntülenmesi amacı ile bu değişkeni Image1.ImageUrl ile dosya yolu bulmasında kullanıyoruz.

Projeyi çalıştırdığımızda sayfanın başında bir tarih saat göstergesi ve alttada beş saniyede değişen bir slayt yer alıyor.

 

 

Bu yazımızda AJAX ExtenderTimer Kontrolü anlamaya çalıştık. Web sayfamız içine sayfa içeriğimizden bağımsız olarak her saniye güncellenen bir saat ve beş saniyede bir rasgele olarak değişen resimlerden oluşan bir slayt gösterisi koyduk. Umarım sizin için yararlı olmuştur.

Sermin Yağcı

http://serminyagci.blogspot.com

Bu yazımızda, web sayfaları geliştirirken sık sık kullanma ihtiyacı duyduğumuz Ajax Kontrollerinden Accordion Kontrolü üzerinde duracağız. Bu kontrol genellikle sayfa içerisinde fazladan yere ihtiyaç duyulduğunda, çeşitli içeriklerin alt alta verilerek seçim yapılması istendiği durumlarda kullanılır.

Bunu bir örnek üzerinde görmek için bir tene AJAXEnabledWebApplication projesi açıyoruz. İçine 1 tane AddNewItem>StyleSheet ekliyoruz.

.baslik
{
border:solid 1px black;
color: white;
background-color:#B60000;
color:#FFD800;
padding:5px;
margin-top:5px;
}
.seciliBaslik
{
border: solid 1px black;
color : white;
background-color:#800000;
color:#FFD800;;
padding:5px;
margin-top:5px;
}
.icerik
{
background-color:White;
color:Black;
}

Dizayn sayfamıza 1 tane Accordion sürüklüyoruz. Bu kontrolün özelliklerine bakıldığında aşağıdaki görüldüğü gibi;

 

içerik için css, başlık için css, seçili başlık için css kullanılabilirliği bizim için sunulmuştur. Bu, sayfaya yaratıcılık katarak çok çeşitli farklılıklar oluşturmaya olanak sağlamaktadır.

Bir sonraki adımda dizayn sayfası içindeki akordion panel içindeki parçaların oluşturulamasına geçebiliriz bunu

<ajaxToolkit:Accordion ID="Accordion1" runat="server" SelectedIndex="0" HeaderCssClass="baslik"
           ContentCssClass="icerik" FadeTransitions="true" HeaderSelectedCssClass="seciliBaslik"
           FramesPerSecond="40" TransitionDuration="250" AutoSize="None">
           <Panes>
               <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
                   <Header>1</Header>
                   <Content>qwert</Content>
               </ajaxToolkit:AccordionPane>
               <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
                   <Header> 2</Header>
                   <Content> qwert</Content>
               </ajaxToolkit:AccordionPane>
               <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
                   <Header>3</Header>
                   <Content>qwert</Content>
               </ajaxToolkit:AccordionPane>
           </Panes>
       </ajaxToolkit:Accordion>

son ekran görüntüsü ..

 

Umarım yararlı olmuştur.

Sermin Yağcı

Bu yazıda Ajax Kontrollerinden CascadingDropDown'un nasıl kullanıldığını, web site olarak açılan proje içerisinde xml veri dosyasının nasıl oluşturulduğunu yaptığımız örnekle anlamaya çalışacağız.

Çalıştığımız Visual Studio içinde Ajax Control Toolkit Web Site seçeneği mevcut değilse --------- linkinden indirip kurabilirsiniz

İlk olarak App_Data dosyasının içine yeni ekle deyip XMLFile ekliyoruz. Bu aynı zamanda proje içindeki veri kaynağı olarak kullanılacak veri dosyası olma özelliğini de taşıyor. Aşağıdaki gibi bir liste hazırlamayı uygun gördüm.

<?xml version="1.0" encoding="utf-8" ?>

<KitapDukkani>

<turu name="Roman">

<yazar name="George Orwel">

<kitap name="1984" />

<kitap name="Hayvan Çiftliği" />

<kitap name="Papazın Kızı" />

</yazar>

<yazar name="Dostoyevski">

<kitap name="Karamazof Kardeşler"/>

<kitap name="Suç ve Ceza"/>

<kitap name="Budala"/>

</yazar>

<yazar name="Tolstoy">

<kitap name="Anna Karanina" />

<kitap name="Savaş ve Barış" />

<kitap name="Diriliş" />

</yazar>

</turu>

<turu name="Şiir">

<yazar name="Turgut Uyar">

<kitap name="Dünyanın En Güzel Arabistanı" />

<kitap name="Kayayı Delen İncir" />

<kitap name="Dün Yok mu" />

</yazar>

<yazar name="Oruç Aruoba">

<kitap name="İle" />

<kitap name="Yürüme" />

<kitap name="De ki İşte" />

</yazar>

<yazar name="Can Yücel">

<kitap name="Sevgi Duvarı" />

<kitap name="Gökyokuş" />

<kitap name="Beşibiyerde" />

</yazar>

</turu>

</KitapDukkani>

Koda dikkat edersek basit bir mantıkla yazılmıştır. Tür, birçok kitabı kapsadığı için en dışta. Yazar, kendi içinde seçenekler sunduğu için kısımsal. Kitap, kendine özel olduğu için tek satırda.

Projemize yeni bir web servis ekleyerek devam ediyoruz.

Bu servis içerisin de yapmak istediğimiz, xml dosyasının içindeki verileri, yolunu göstererek web servis içindeki kontrollere bağlamak. Başlangış olarak isim alanımızın üzerine [ScriptService] ekleyerek Script servis çağırma işlemini yapıyoruz. Bunu ekledikten sonra alt+shift+f10 yaparak using alanına using System.Web.Script.Services eklenmesini unutmamak gerekir. Aynı işlemi aşağıdaki XmlDocument i ekledikten sonrada tekrarlayarak using System.Xml ifadesinin projeye dahil olmasını sağlıyoruz. Bu xml veri dosyasındaki bilgilerin web servis üzerinden erişilebilirliğini sağlayacak. Ayrıca object olarak tanımladığımız _lock dikkatinizi çekmiştir. Get bloğu altındaki lock fonksiyonunun görevi blok içindeki görev bitmeden dışarıdan “KitapService.xml” dosyası nı kilitleyerek üzerinde herhangi bir işlem yapılmasını engellemek.

// uye degiskenler

private static XmlDocument _dokuman;

private static object _lock = new object();

// disariden cagirabilmek icin public static olusturduk

public static XmlDocument Dokuman

{

get

{

lock (_lock)

{

if (_dokuman == null)

{

// xml veri okunur

_dokuman = new XmlDocument();

_dokuman.Load(HttpContext.Current.Server.MapPath("~/App_Data/KitapService.xml"));

}

}

return _dokuman;

}

}

public static string[] Hierarchy

{

get

{

return new string[] { "turu", "yazar" };

}

}

Görünşü bu şekilde olacaktır. Yine aynı isim alanı içine aşağıdaki methodu yazıyoruz.

[WebMethod]

public AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category)

{

// Kategorisi bilinen degerler / veri çiftleri

StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);

// veri dosyası içinde karşılaştırma sorgusu

return AjaxControlToolkit.CascadingDropDown.QuerySimpleCascadingDropDownDocument(Dokuman, Hierarchy, knownCategoryValuesDictionary, category);

}

Burada amaç, proğramın çalışması sırasında seçilen değerlerin dosya içinde sorgulanarak ilişkisel olanların önümüze getirilebilmesi.

Default.aspx sayfası üzerine gelerek, 3 tane Label, 3 tane drop down list, 1 tane update Panel ve panel içine 1 tane daha label sürükleyelim.

Bunlar türü, yazarı, kitabı seçmemizi sağlayacaklar. Kitap seçtirecek olan DropDownList3 ün özelliklerinden otomatik postback olma özelliğini (Enable AutoPostBack) açıyoruz. Label’in altına 3 tanede Cascading Drop Down sürüklüyoruz. Tetikleme kontrolünü, kategorisini, istek metnini ve yükleme sırasındaki metni taımlıyoruz. Kod bloğu aşağıdaki gibi görünüyor.

<ajaxToolkit:CascadingDropDown ID="CascadingDropDown1" runat="server" TargetControlID="DropDownList1"

Category="turu" PromptText="Tür Seçiniz.." LoadingText="[seçiliyor..]"

ServicePath="KitapService.asmx" ServiceMethod="GetDropDownContents" />

<ajaxToolkit:CascadingDropDown ID="CascadingDropDown2" runat="server" TargetControlID="DropDownList2"

Category="yazar" PromptText="Lütfen yazar seçiniz" LoadingText="[seçiliyor...]"

ServiceMethod="GetDropDownContentsPageMethod" ParentControlID="DropDownList1" />

<ajaxToolkit:CascadingDropDown ID="CascadingDropDown3" runat="server" TargetControlID="DropDownList3"

Category="kitap" PromptText="Lütfen Kitap seçiniz" LoadingText="[seçiliyor...]"

ServicePath="KitapService.asmx" ServiceMethod="GetDropDownContents"

ParentControlID="DropDownList2" />

Update panelin tetikleme kolleksiyonuna en son seçtirilecek olan kitap menüsünü tanımlıyoruz.

Default.aspx dizayn sayfası üzerindeki DropDown3 üzerinde çift tıklayarak Default.aspx.cs sayfası üzerine seçim indexi değiştiğinde gerçekleşmesini istediğimiz olayların yazıldığı kod bloğunun oluşmasını sağlıyoruz.

protected void DropDownList3_SelectedIndexChanged(object sender, EventArgs e)

{

string tur = DropDownList1.SelectedItem.Text;

string yazar = DropDownList2.SelectedItem.Text;

string kitap = DropDownList3.SelectedItem.Text;

if (string.IsNullOrEmpty(tur))

{

Label1.Text = "Lütfen tur seçiniz..";

}

else if (string.IsNullOrEmpty(yazar))

{

Label1.Text = "Lütfen yazar seçiniz.";

}

else if (string.IsNullOrEmpty(kitap))

{

Label1.Text = "Lütfen kitap seçiniz.";

}

else

{

Label1.Text = string.Format("Seçtiginiz Kitap {1} turunde yazilmis, {2} tarafindan kaleme alinmis {0}. Iyi okumalar.", kitap, tur, yazar);

}

}

[WebMethod]

[System.Web.Script.Services.ScriptMethod]

public static CascadingDropDownNameValue[] GetDropDownContentsPageMethod(string knownCategoryValues, string category)

{

return new KitapService().GetDropDownContents(knownCategoryValues, category);

}

Düzenlemeleri yaptıktan sonra proğramı çalıştırabiliriz.

Bu yazımızda beraberce yaptığımız örnekle Axaj kontrollerinde Cascading Drop Down Listi nerde kullanabileceğimizi, xml olarak hazırlanan bir veri dosyasını proje içinde nasıl kullanabileceğimizi kavramaya çalıştık. Umarım sizin için yararlı olmuştur.

kaynak: http://www.asp.net/

Sermin Yağcı

Hep yalnız, hep yalnız, hep yalnız, yalnızlık, yalnız, tek başına. Şimdi, sindir içine, sindir, sindir, sindir, kalk.. Artık koşabilirsin...

Çok zamandır kağıt kalem almıyorum elime. Yazmaya başlayınca eskiden yazdıklarımı yazacakmışım gibi geliyor. Hemen vaz geçiyorum. Yapacak başka bir şeyimde hep oluyor zaten. İyiki kızım var.
İçimdeki, yeni tutkusumu desem, eski korkusu mu desem anlayamıyorum. İlk defa dinlediğim bir müzik beni nasıl mutlu ediyor. İlk kez okuduğum kitap nasıl sürüklüyor. İlkler insana eskiyi hatırlatmıyor belki sevmem ondandır.
Yeniden başlamak çok korkutucu eski içinde, başlayınca heyecan verici, ilerlerken zor ama sindirirken içine acı verici, güvenmek çok eğreti. Bunlar kısır döngü. Kader mi, tercih mi yoksa aptallık mı.Tek gerçek şu ki devam etmek her zaman başlamaktan zor. Sonra evreler var; herşey yolunda giderken, birden fırlayan tümsekler. Direnmek lazım çünkü geçiyor, yenisi çıkana kadar en azından. Ayrıntılara takmadan, kalıp uydurmaya çalışmadan, kendi deviniminde müdahale etmeden, ayak uydurmaya çalışmak en az zarar vereni...