ASP.NET Ajax

Ajax'ın yeni nesneleri olan AJAX Calendar Extender  ve TAB Container Extender ile ilgili makalelerim www.yazilimuzmani.com ve www.semgoksu.com 'da yayına girdi.

AJAX Calendar Extender
AJAX TAB Container Extender

Merhaba arkadaşlar, bu makalemizde ajax control toolkit’in nesnelerinden Tab Extender nesnesini ele alıp inceleyeceğiz.

Tab Container, sayfa içeriklerini organize etmek için  tablar olusturmamızı saglayan bir  AJAX nesnesidir. Sayfa içerisinde birden fazla sayfa varmıs gibi hareket etmemizi saglar.

Her TabPanel içerikleri görüntülemek için HeaderTemplatler olustururuz. HeaderTemplateler içerisinde kullanıcıya o taba ait bilgiyi gösteririz. Özellikler E-ticaret sitelerinde sıkça kullanılır. Kulllanıcıya tek bir sayfa içerisinde farklı tablar içersinde farklı bilgileri sunmak için oldukça kullanıslıdır. (Ürün açıklaması, ödeme seçenekleri, resimler yorumlar vs...) 

Kullanımı:



Özellikleri:

TabContainer Özellikleri

• ActiveTabChanged (Event) - Aktif tab degistiginde tetiklenecek olan olay
• OnClientActiveTabChanged - tabChanged eventi çalıstıgında client - side çalısacak javascript fonksiyonunun ismidir.
• CssClass - Tablara uygulanacak olan Sitil Classı
• ActiveTabIndex - Aktif olarak gelecek Tabın Index numarası
• Height - Tabın içerik yükseklik boyutu
• Width - Tabın içerik genislik boyutu
• ScrollBars - Scrollbar özelliginin olup olmayacagını belirler.
  

TabPanel Özellikleri

• Enabled - Tabın aktif/pasif durumunu ayarlar
• OnClientClick - Tab Eventi çalıstıgında client - side çalısacak javascript fonksiyonunun ismidir.
• HeaderText - Tabın Baslıgına verilecek isim 
• HeaderTemplate - Baslık Kısmında görüntülenmesini istedigimiz kısım.
• ContentTemplate - Içerigin görüntülenecegi kısım.
  

Örnek:

Örnegimzde E-ticaret sitelerinde sıklıkla gördügümüz Ürün bölümlerinde kullanılarn ürün detayı bilgilerini olusturacagız. Bunun için AJAX TAB Extender nesnesini kullanacagız. Ürün özelliklerini listeleyip ayru ayrı tablar olusturup ürün ile ilgili bilgileri kullanıcıya sunacagız.

Ilk olarak bir ajax projesi olusturalım.



Projemizi olusturduktan sonra sayfamıza bir adet TabContainer ekleyelim.



Evet simdi Tablarımızı olusturalım. Sayfamızın HTML kısmına gidelim ve TabContainerin özelliklerini ayarlayalım.



Kullanıcıya 3 farklı bilgiyi 3 farklı tabda gösterecegiz. Ürün Özellikleri 1. tabda, Resmler 2. tabda, yorumlarda 3. tabda görüntülenecek.

Simdi projemizi çalıstıralım. Ürün özellikleri görüntülenecek



Resimler tabına geçelim;



Simdide yorumlara bakalım



Evet AJAX hayatımızı kolaylastırmaya devam ediyor J Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı ve iyi günler dilerim.

Sem GÖKSU
MCP | MCAD.NET | MCTS

Örnek Kodlar için mail adresimi kullanabilirsiniz

askisem@hotmail.com

Kaynaklar

http://ajax.asp.net 

Merhaba arkadaşlar, bu ajax control toolkit’in nesnelerinden Calendar extender nesnesini ele alacağız. Java script ile bizi çok fazla uğraştıran calendar(takvim)’i ajax ile kullanmak artık çok kolay.

Calendar textbox kontollerine uygulanan bir AJAX nesnesidir. Bu bize client-size çalısan kisisellestirilebiln ve fonksiyonel takvim nesnesini sunr. Textboxa tıklandıgında yada baska bir kontrol ile tetiklendiginde popup olarak gösterilir.


Ek olarak ayları ve yılları degistirebilir, baska ay ve yıl tarihleri seçebilirsiniz. Yine Calendar nesnesine sitil verebilir kullanıcıya görsel olarak daha güzel olarak sunabilirsiniz.


Asagıda kullanımı için özellikler verilmistir.


Kullanımı:

TargetControlID="Date1"
CssClass="ClassSem"
Format="MMMM d, yyyy"
PopupButtonID="Image1" />
Özellikleri:

• TargetControlID - Calendar Objesinin Uygulanacagı Textbox.
• CssClass - Calendar objesinde kullanılacak Sitilin Adı
• Format - Görüntülenecek olan Tarih formatı.
• PopupButtonID - Eger bir buton veya bir image'a tıklandıgında calendarın açılmasını istersek bu özelligi kullanırız. Eger kullanmak istemezsek bu özelligi bos bırakırız.

Örnek:

Evet arkadaslar, nesnemizi ve özelliklerini tanıdıktan sonra artık kontrolümüz ile ilgili örnek yapalım. Ilk olarak bir ajax projesi olusturalım.



Örnegimizde calendar nesnesini 1. textboxa focus oldugunda 2. de ise bir image'e tıklandıgında görüntüleyecegiz. Formumuza 1, script maneger, 2 textbox, 2 Calendar extender 1 image ekleyelim.



Evet benim yapmıs oldugum tasarım yukarıdaki gibidir.


Simdi Calendarları görüntülemek için gerekli özellikleri yazalım.


Textbox üzerine tıklandıgında;



Image tıklandıgında;



Projemizi çalıstıralım.

1. textbox üzerine tıkladıgımızda calendar nesnesi geldi.



2. image üzerine tıklıyoruz.


Evet arkadaslar gördügümüz gibi bu islemi de yapmak çok kolay. Ajaxın nimetlerinden yatarlanmaya devam ediyoruz :)

Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı ve iyi günler dilerim.

Sem GÖKSU
MCP | MCAD.NET | MCTS

Örnek Kodlar için mail adresimi kullanabilirsiniz

askisem@hotmail.com

Kaynaklar

http://ajax.asp.net

Ve sonunda beklenen oldu, ASP.NET AJAX 1 beta sürümüne son vererek full sürümünü yayınladı. Beta sürümündeki gibi GAC destegi yok. Yeni sürümü indirmek için asagıdaki adresi kullanabilirsiniz.

http://ajax.asp.net/

Merhaba arkadaşlar, bu makalemizde ajax control toolkit’in nesnelerinden Dropshadow extender nesnesini ele alacağız. Örnek olarak da datalist nesnesinin içerisinde nasıl kullanıldığını göreceğiz.

DrapShadow Extender

Açıklama

DrapShadow, panel nesnesine drapshadow(kenarlarına gölge) özelligi kazandıran bir ajax nesnesidir. Aynı zamanda panel nesnesinin kenarlarını köseli olarak da gösterilebilir.

Özellikleri

·                  TargetControlID - Drop shadow özelliginin uygulanacagı kontrolün ID'si

·                  Width - Uygulanacak DropShadow'ın pixel genisligi. Varsayılan olarak 5'dir.

·                  Opacity - Uygulanacak olan DrapShadow'un Opacity Degeri. Varsayılan olarak .5 dir.

·                  TrackPosition - Whether the drop shadow should track the position of the panel it is attached to. Use this if the panel is absolutely positioned or will otherwise move.

·                  Rounded - Panel kontrolünün kenarlarının köseli olup olmayacagını belirler. True ise kenarları köseli olarak gösterilir.  

Kullanımı

<ajaxToolkit:DropShadowExtender ID="dse" runat="server"
        TargetControlID="Panel1"
        Opacity=".8"
        Rounded="true"
TrackPosition="true" />
Nesnemizi tanıyıp özelliklerinide inceledikten sonra bu kontrolümüzü datalist içerisinde kullanalım. Visual Studio Içerisinde Ajax tabanlı bir ASP.NET projesi olusturalım. Ben dil olarak C# Seçecegim

Projemizi olusturduktan sonra örnegimizde ne yapacagımızı kısaca anlatayım. Northwind Veritabanından Categories tablosunu Datalist ile listeleyecegim. Datalist nesnesinin Itemlarına da DropShadow özelligini kazandırıp kayıtları kullanıcıya daha hos bir sekilde sunacagız.

Bunun için Web formumuz üzerine 1 Datalist ve 1 panel ekleyelim.  Datalist içerisinde ben CategoryID, CategoryName, Description alanlarını gösterecegim. Datalist içerisinde gösterecegim alanları belirledim simdi bu alanları HTML Table içerisinde yazalım.

<table style="width: 400px">

                <tr>

                    <td style="width: 120px" valign="top">

                        <asp:Label ID="Label2" runat="server" Text="CategoryID" Font-Bold="True"></asp:Label></td>

                    <td valign="top">

                        :</td>

                    <td valign="top">

                        <asp:Label ID="CategoryID" runat="server" Text=’<%# DataBinder.Eval(Container.DataItem,"CategoryID") %>’></asp:Label></td>

                </tr>

                <tr>

                    <td style="width: 120px" valign="top">

                        <asp:Label ID="Label3" runat="server" Text="Category Name" Width="115px" Font-Bold="True"></asp:Label></td>

                    <td valign="top" >

                        :</td>

                    <td valign="top">

                        <asp:Label ID="CategoryName" runat="server"  Text=’<%# DataBinder.Eval(Container.DataItem,"CategoryName") %>’></asp:Label></td>

                </tr>

                <tr>

                    <td style="width: 120px" valign="top">

                        <asp:Label ID="Label4" runat="server" Text="Description" Font-Bold="True"></asp:Label></td>

                    <td valign="top">

                        :</td>

                    <td valign="top">

                        <asp:Label ID="Description" runat="server"  Text=’<%# DataBinder.Eval(Container.DataItem,"Description") %>’></asp:Label></td>

                </tr>

            </table>

Bu tabloyu Sayfamıza Ekledigimiz Panelin içerisine ekleyelim. Son görünümümüz asagıdaki gibi oldu.

Not: Panel Background rengi Khaki dir. Siz istediginiz rengi verebilirsiniz.

 

Datalist ItemTemplate Açalım ve panel Nesnemizi ItemTemplate içerisine tasıyalım. Yine Item Template içerisine bir adet DropShadow nesnesi ekleyelim.  Son görünümümüz asagıdaki gibi oldu.

 

Son olarak Kodlarımıza da bir göz atalım.

<asp:DataList ID="DataList1" runat="server" Font-Names="Verdana" Font-Size="X-Small" RepeatColumns="1">

            <ItemTemplate>

        <asp:Panel ID="Panel1" runat="server" BackColor="Khaki" Width="410px">

            <table style="width: 400px">

                <tr>

                    <td style="width: 120px" valign="top">

                        <asp:Label ID="Label2" runat="server" Text="CategoryID" Font-Bold="True"></asp:Label></td>

                    <td valign="top">

                        :</td>

                    <td valign="top">

                        <asp:Label ID="CategoryID" runat="server" Text=’<%# DataBinder.Eval(Container.DataItem,"CategoryID") %>’></asp:Label></td>

                </tr>

                <tr>

                    <td style="width: 120px" valign="top">

                        <asp:Label ID="Label3" runat="server" Text="Category Name" Width="115px" Font-Bold="True"></asp:Label></td>

                    <td valign="top" >

                        :</td>

                    <td valign="top">

                        <asp:Label ID="CategoryName" runat="server"  Text=’<%# DataBinder.Eval(Container.DataItem,"CategoryName") %>’></asp:Label></td>

                </tr>

                <tr>

                    <td style="width: 120px" valign="top">

                        <asp:Label ID="Label4" runat="server" Text="Description" Font-Bold="True"></asp:Label></td>

                    <td valign="top">

                        :</td>

                    <td valign="top">

                        <asp:Label ID="Description" runat="server"  Text=’<%# DataBinder.Eval(Container.DataItem,"Description") %>’></asp:Label></td>

                </tr>

            </table>

        </asp:Panel>

                <br />

        <cc1:DropShadowExtender ID="DropShadowExtender1" runat="server">

        </cc1:DropShadowExtender>

            </ItemTemplate>

            <HeaderStyle Font-Bold="False" />

        </asp:DataList>

DropShadow nesnesinin özelliklerini de belirleyelim,

        <cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="Panel1" Opacity=".25" Radius="8" Rounded="true">

        </cc1:DropShadowExtender>

Geriye sadece kayıtları görüntülemek kaldı. Bunun için bir void yazalım ve form loadda çagıralım.

  protected void DatalistDoldur()

    {

        SqlConnection cnn = new SqlConnection("Data Source=.; Initial Catalog=Northwind; Trusted_connection=yes");

        cnn.Open();

        SqlDataAdapter Da = new SqlDataAdapter("Select * from Categories",cnn);

        DataSet Ds = new DataSet();

        Da.Fill(Ds, "tbl");

        DataList1.DataSource = Ds.Tables[0];

        DataList1.DataBind();

    } 

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!Page.IsPostBack)

        {

            DatalistDoldur();

        }

    }

Artık hersey hazır, projemizi çalıstıralım,



Ortaya çok güzel bir görüntü çıktı :)

Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı ve iyi günler dilerim.

Sem GÖKSU
MCP | MCAD.NET | MCTS

Örnek Kodlar için mail adresimi kullanabilirsiniz

askisem@hotmail.com

Kaynaklar

http://atlas.asp.net