Ajax ile saati güncel gösterme

Mini bir uygulama ile merhaba. Web sitelerinde karşılaştığımız güncel saati yani dijital saat gibi saatin, saniyelerin ilerlediği yapıyla karşılaş mısınızdır. Asp.net ile saati saniyeleri güncel hareketli göstermek için sayfayı her saniye yenilememiz gerekecek. İşte bu ve buna benzer durumlarda yardımımıza Ajax web teknolojisi geliyor.

Saati kullanıcıya gösterebilmek için javascript den de yaralanabiliriz. Fakat biraz daha fazla kod yazmak gerekir. Ajax da bunu timer ile kolaylıkla yapabiliyoruz. Ajax timer hakkında daha fazla bir şey konuşmadan direk mini uygulamamıza geçiyorum.

İlk olarak sayfamıza ScriptManager ardından UpdatePanel bunun içerisine Label ve Ajax Timer ekliyoruz. Bunları yaptıktan sonra alttaki arayüz formu kodları gelmekte. Timer Interval değerine 1000, ontick olayına da Timer1_Tick yapıyoruz.

1
2
3
4
5
6
7
8
9
 <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                <asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">
                </asp:Timer>
            </ContentTemplate>
        </asp:UpdatePanel>

Bundan sonra yapmamız gereken timer tick olayında Label text özelliğine tarihi göstermek kalıyor. Ve bunun da kodu aşağıdaki gibi.

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

Ajax takvim aracı kullanımı

Ajax’ın getirdiği kolaylıkları saymak bitmez. Ücretli, ücretsiz bir çok ajax aracı ile karşılamışsınız dır. Ücretsiz olarak sık kullanılan eklentilerden bir tanesi de takvim(Calendar) aracı. Sağ da solda bir çok örneğini gördüğünüz aracın yapılışı ajax ile çocuk oyuncağı.

Resimdeki gibi mause ile Textbox’ın üzerine gelindiğinde takvim aracını gösteren uygulamayı yapmak için bir adet textbox, scriptmanager ve bir adet CalendarExtender toolkit’i kullanmanız gerekir.

[stextbox id=”info”]Ajax kontrollerin de sorun yaşayanlar için bu bağlantı daki yazıya göz atmakta fayda bulacaktır. [/stextbox]

İlk önce form içerisine textbox’ı fırlatın name özelliğini txttarih olarak değiştirin. Ardından ajax’ın sayfamızda çalışması için scriptmanager’ı textbox’ın üstüne ekleyin. Son olarak  CalendarExtender’ı scriptmanager ile textbox arasına ekleyin.

1
2
3
4
5
6
7
8
 <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:CalendarExtender ID="CalendarExtender1" runat="server" Enabled="True"
        TargetControlID="txttarih">
    </asp:CalendarExtender>
    <asp:TextBox ID="txttarih" runat="server"></asp:TextBox>
    </form>

Kod olarak benzer bu şekilde yazılımsal görüntü alacaksınız. Calendar’ı ekledikten sonra son olarak özelliklerinden TargetControlID özelliğine txttarih olarak yazın.(Bunu kod kısmında da yapabilirsiniz.) İşlem bu kadar…

[stextbox id=”info”]Yukarıdaki kodları copy-paste yaparsanız muhtemelen çalışmayacaktır. Çünkü ajax kütüphanelerini projenize eklemeniz gerekmektedir. Bunun için öncelikle Ajax Control Toolkit’i projenize referans verip ardından Toolbox’dan ilgili araçları sürükleyip bırakarak yapmalısınız. [/stextbox]

Ajax takvimi hakkında daha fazla bilgiye buradan ulaşabilirsiniz.

Ajax kontrolleri sorunsalları

Visual Studio ortamında da kullandığımız, geçmişte pek umursanmayan fakat yakın zamanlarda Google’ın arama çubuğunda ipucu uygulaması ile tekrar gündeme gelen ve ondan sonrada sık sık kullanılan Ajax teknolojisinin birkaç sorunsallarından bahsedeceğim.

Hikayeyi fazla uzatmadan herhangi bir Asp.net uygulamasında kullanacağımız meşhur hazır Ajax kontrollerinde bazen haftalarca süren sorunları ile baş başa kalan arkadaşlar için birkaç çözüm yolları. İlk olarak sorun adını belirtmek istersek; projeye eklediğimiz referans Ajax Toolkit Control .dll’nin çalışmaması.

Peki bu sonradan eklenilen Ajax kontrolleri neden çalışmaz?

  • .Net Framework 4 kütüphaneniz hasarlı olabilir. Microsoft .NET Framework 4 bağlantısına tıklayıp ilgili kütüphanenizi onarın.
  • Visual Studio’nun güncellemeleri varsa yapın, Service Pack yüklemediyseniz yükleyin.(Microsoft Visual Studio 2010 Service Pack 1)
  • Bu adımları sırasıyla veya hiç yapmayabilirsiniz belki sorun yoktur fakat soruna karşı bakış açınızı değiştirip uygulamanızı hangi kütüphane üzerinde yazdığınıza dikkat ederek Ajax Control Toolkit‘leri o Framework e göre ekleyin. Mesela Framework 3.5 ile yazıyorsanız uygulamanızı eklemeye çalıştığınız Ajax .Net4 kontrolleri haliyle çalışmayacaktır. Çalışmadığı zaman hem Debug da sorun verir hemde Toolbox kısmında kontroller soluk olarak gözükür(sürükle bırak yapamazsınız).

Sorunlar bu kadar bitmediğini biliyorum, fakat başıma gelen olayı nasıl çözdüğümü burada anlatmak istedim. Hikaye kısmı biraz uzun olabilir, bu stresli anınızda biraz gevşetmek için uzun uzaya anlatmak istedim…