A
B
C
Ç
D
E
F
G
Ğ
H
I
İ
J
K
L
M
N
O
P
R
S
Ş
T
U
Ü
V
Y
Z
Q
W
X
+ Ekle
Asp.Net Ajax İle Resim Slayt Gösterisi Hazırlamak

Asp.Net Ajax İle Resim Slayt Gösterisi Hazırlamak

ASP.NET AJAX web uygulamalarına hızlı şekilde AJAX"ı uygulamamızı sağlayan bir kod kütüphanesidir. Beraberinde getirdiği kontroller ve yapılar aracılığıyla çok az kod yazarak çok hızlı AJAX uygulamaları geliştirebilmemizi sağlar. Bu makalemizde aslında bunun güzel bir örneğini görüyor olacağız. ScriptManager, UpdatePanel ve Timer kontrollerini kullanarak kullanıcının farklı albümlerdeki resimleri izleyebileceği, belirli resimlerde slayt gösterisini durdurabileceği, albüm içerisinde ileri-geri gidebileceği ve resimler arasındaki geçişleri hızlandırabileceği veya yavaşlatabileceği bir uygulama hazırlıyor olacağız. Burada anlatılan işlemler asenkron şekilde gerçekleşeceği için klasik uygulama modelinde hazırlanacak bir uygulamaya göre çok daha hızlı gerçekleşecektir.

Uygulamayı adım adım yapmaya başlamadan önce hazırlayacağımız sayfanın nasıl olacağını belirlemekte fayda var. Web sitemizde albumler ismindeki bir klasör altında alt klasörler ve bu klasörlerin içerisinde de resimlerimiz bulunuyor. Bu resim albümlerinin adlarını sayfamıza ekleyeceğimiz bir ListBox kontrolüne dolduracağız. Ardından kullanıcının bu listeden seçtiği resim albümünde bulunan resimler sayfada bulunan bir Image kontrolü ile slayt gösterisi olarak izlenebilecek. Resimlerin değiştirilmesi işlemi asenkron olarak gerçekleşeceği için Image kontrolünün bir UpdatePanel içerisinde yer alması gerekir. Timer kontrolüyle ise resimlerin belirli zaman aralıklarında değişmesi sağlanacaktır. Kullanıcı istediği zaman gösteriyi durdurup tekrar başlatabilecek ve albüm içerisindeki resimlerde ileri-geri giderek bir sonraki resime veya bir önceki resime geçişler yapabilecek. Önceki resime geçiş, sonraki resime geçiş, slaytı durdurma ve slaytı başlatma işlemleri için UpdatePanel"i tetikleyecek Button veya ImageButton gibi kontroller kullanılabilir. Yine resimler arasında hızlı veya yavaş geçiş yapabilmek için RadioButton kontrolleri kullanılarak seçim işlemi yaptırılabilir. Sanırım hazırlayacağımız sayfa ve kullanacağımız kontroller ile ilgili genel bir fikir sahibi olmuşuzdur. Adım adım ilerleyerek sayfamızı önce tasarlayıp ardından da arka planda çalışacak kodlarımızı yazalım.

Öncelikli olarak yeni bir Web Site projesi oluşturuyoruz. Visual Studio 2008"de ASP.NET 3.5 şablonu açarak veya Visual Studio 2005"te ASP.NET AJAX Enabled Web Site seçeneğini seçerek projemizi oluşturuyoruz. Yukarıda bahsettiğimiz kontrolleri sayfamızdaki bir tabloya düzgün şekilde yerleştiriyoruz. Image kontrolü asenkron olarak güncelleneceği için Image ve Timer"ı UpdatePanel içerisinde bulundurmamız gerekecektir. ImageButton ile RadioButton kontrolleri üzerinde tıklama ve seçim işlemleri gerçekleştiğinde asenkron güncellemeler yapılacağı için bu kontrollerin ilgili olaylarını UpdatePanel"in Triggers koleksiyonuna kayıt ediyoruz. ListBox kontrolünde yapılacak seçim işlemleri de UpdatePanel"in güncellenmesini gerektireceği için bu kontrolü de Triggers koleksiyonuna ekliyoruz. Timer kontrolü UpdatePanel"in içerisine eklendiği için trigger olarak eklememize gerek yoktur. Aşağıda sayfamızı oluşturan kodlar görülmektedir.




Default.aspx

<form id="form1" runat="server">
<asp:ScriptManager
ID="ScriptManager1" runat="server" />
<table width="100%">
   <tr>
      <td colspan="2" align="left">Seminerler Albümüm</td>
   </tr>
   <tr>
      <td width="15%" valign="top">
      <asp:ListBox ID="listAlbumler" runat="server" AutoPostBack="True"
Rows="6"></asp:ListBox>
      </td>
      <td width="85%" valign="top">
         <asp:UpdatePanel
ID="UpdatePanel1" runat="server">
            <ContentTemplate>
               <asp:Image
id="imgResim" runat="server" Width="400px" Height="300px"></asp:Image>
               <asp:Timer id="Timer1" runat="server" OnTick="Timer1_Tick" Interval="5000"
></asp:Timer>
            </ContentTemplate>
            <Triggers>
               <asp:AsyncPostBackTrigger ControlID="listAlbumler"
></asp:AsyncPostBackTrigger>
               <asp:AsyncPostBackTrigger ControlID="rbListHiz"
></asp:AsyncPostBackTrigger>
               <asp:AsyncPostBackTrigger ControlID="btnOnceki"
></asp:AsyncPostBackTrigger>
               <asp:AsyncPostBackTrigger ControlID="btnSonraki"
></asp:AsyncPostBackTrigger>
               <asp:AsyncPostBackTrigger ControlID="btnDurdur"
></asp:AsyncPostBackTrigger>
               <asp:AsyncPostBackTrigger ControlID="btnBaslat"
></asp:AsyncPostBackTrigger>
            </Triggers>
         </asp:UpdatePanel>
         <asp:ImageButton
ID="btnOnceki" runat="server" ImageUrl="/images/geri.gif" />
         <asp:ImageButton
ID="btnSonraki" runat="server" ImageUrl="/images/ileri.gif" />
         <asp:ImageButton
ID="btnDurdur" runat="server" ImageUrl="/images/durdur.gif" />
         <asp:ImageButton
ID="btnBaslat" runat="server" ImageUrl="/images/baslat.gif" />
         <br /><b>Geçiş Hızı:</b>
         <br />
         <asp:RadioButtonList ID="rbListHiz" runat="server" AutoPostBack="true"
>
            <asp:ListItem Value="0"
>Yavaş</asp:ListItem>
            <asp:ListItem Value="1"
>Normal</asp:ListItem>
            <asp:ListItem Value="2"
>Hızlı</asp:ListItem>
         </asp:RadioButtonList>
      </td>
   </tr>
</table>
</form>

  Ad Soyad
  Yorum