Sermin'in Bilgi Paylaşımı..

Microsoft Web Platform Installer 2.0 (Web PI), Internet Information Services (IIS), SQL Server Express, .NET Framework ve Visual Web Developer dahil  Microsoft Web Platform un tüm bileşenlerini ücretsiz indirmemizi sağlayan çok yararlı bir araçtır. Denemenizi tavsiye ederim. Aşağıdaki linkten indirebilirsiniz..

Microsoft Web Platform Installer 2.0

Sermin Yağcı

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ı