Makale Özeti

Bu makelemizde Ajax Control Toolkit içerisindeki CollapsiblePanel kontrolünü kullanarak açılır kapanır panelleri oluşturmayı derinlemesine inceleyeceğiz.

Makale

Ajax Control Toolkit Kullanarak Açılır Kapanır Paneller Yapmak

Bu makelemizde Ajax Control Toolkit içerisindeki CollapsiblePanel kontrolünü kullanarak açılır kapanır panelleri oluşturmayı derinlemesine inceleyeceğiz.

Ajax Control Toolkit ile oluşturacağımız web uygularının içerisine açılır kapanır panelleri oluşturabiliriz. CollapsiblePanel kontrolünü kullanmak için öncelikle ASP.NET AJAX-Enabled Web Site oluşturmalıyız. Sayfa içerisinde açılır kapanır paneller kullanmak hem sayfanın şık görünmesini sağlayacak hem de kullanıcıların özellikle metin ağırlıklı sitelerde  daha rahat sayfayı okuyabilmelerini sağlayacaktır.

CollapsiblePanel  özellikleri

  • TargetControlID - Açılıp kapanmasını istediğiniz panel kontrolünü tutar. Aşağıdaki örnekte Panel1(içerisinde yazı ve resimin bulunduğu panel)  TargetControlId özelliğine verilir.
  • CollapsedSize - Kapanacak panelin pixel cinsinden ne kadarının kapanacağını-açılacağını tutar eğer hiç bir değer verilmezse panel size'ı otomatik olarak alınır.
  • ExpandedSize - Kapanacak panelin pixel cinsinden ne kadarının açılıp-kapanacağını tutar eğer hiç bir değer verilmezse panel size'ı otomatik olarak alınır.
  • Collapsed - Panel ilk oluşturulduğunda açıkmı kapanıkmı olduğunu tutar. True ise panel kapalı, False olduğunda panel açık olarak ekrana çıkar.
  • AutoCollapse - Fare ile panel üzerine gelindiğinde otomatik olarak panelin kapanmasını sağlar.
  • AutoExpand - Fare ile panel üzerine gelindiğinde otomatik olarak panelin açılmasını sağlar.
  • ScrollContents - Panel içeriği panel den daha büyük ise otomatik olarak scroll bar konulmasını sağlar.
  • ExpandControlID/CollapseControlID - Açılıp kapanacak olan paneli tutarlar.
  • TextLabelID - Panelde özellik gösteren html kontrolünu tutar. Aşağıdaki örnekte Label1 (Show Details...)'dır
  • CollapsedText - Panel kapalı olduğunda TextLabelId'nın metininin ne olacağını söyler.
  • ExpandedText - Panel açık olduğunda TextLabelId'nın metininin ne olacağını söyler.
  • ImageControlID - Panel başlığında panelin açılıp kapandığında değişecek olan imajı tutar.
  • CollapsedImage - Panel kapalı olduğunda ImageControlId'nin hangi imaj olacağını söyler.
  • ExpandedImage - Panel açık olduğunda ImageControlId'nin hangi imaj olacağını söyler.
  • ExpandDirection - Açılış ve kapanışın yönünü belirti aşağı yukarı ya da sağdan sola şeklinde panel açılıp kapanabilir..

 

Aşağıda açılır kapanır panellerin bulunduğu bir sayfa gösterilmiştir:


Statik olarak yani önceden yukarıdaki panellerin içeriğini bilerek yukarıdaki sayfaları yapmak sayfa kodumuz aşağıdaki gibi olmalıdır.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Collapsible.aspx.cs" Inherits="Collapsible" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link type="text/css" rel="stylesheet" href="AnimatedCollapsiblePanel.css" />
</head>
 <body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:Panel ID="Panel2" runat="server" CssClass="collapsePanelHeader" Height="30px">
                 <div style="padding: 5px; cursor: pointer; vertical-align: middle;">
                    <div style="float: left;">
                        What is ASP.NET AJAX?</div>
                        <div style="float: left; margin-left: 20px;">
                            <asp:Label ID="Label1" runat="server">(Show Details...)</asp:Label>
                    </div>
                    <div style="float: right; vertical-align: middle;">
                        <asp:ImageButton ID="Image1" runat="server" ImageUrl="~/images/expand_blue.jpg" AlternateText="(Show Details...)" />
                </div>
            </div>
        </asp:Panel>
        <asp:Panel ID="Panel1" runat="server" CssClass="collapsePanel" Height="0">
        <br />
        <p>
        <asp:ImageButton ID="Image2" runat="server" ImageUrl="~/images/AJAX.gif" AlternateText="ASP.NET AJAX"
ImageAlign="right" />

ASP.NET AJAX is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser web applications. This new web development technology from Microsoft integrates cross-browser client script libraries with the ASP.NET 2.0 server-based development framework. In addition, ASP.NET AJAX offers you the same type of development platform for client-based web pages that ASP.NET offers for server-based pages. And because ASP.NET AJAX is an extension of ASP.NET, it is fully integrated with server-based services. ASP.NET AJAX makes it possible to easily take advantage of AJAX techniques on the web and enables you to create ASP.NET pages with a rich, responsive UI and server communication. However, AJAX isn't just for ASP.NET. You can take advantage of the rich client framework to easily build client-centric web applications that integrate with any backend data provider and run on most modern browsers.

        </p>
    </asp:Panel>
    <cc1:CollapsiblePanelExtender ID="cpeDemo" runat="Server"
             TargetControlID="Panel1"
             ExpandControlID="Panel2"
             CollapseControlID="Panel2"
             Collapsed="True"
             TextLabelID="Label1"
             ImageControlID="Image1"
             ExpandedText="(Hide Details...)"
             CollapsedText="(Show Details...)"
            ExpandedImage="~/images/collapse_blue.jpg"
            CollapsedImage="~/images/expand_blue.jpg"
            SuppressPostBack="true"
            SkinID="CollapsiblePanelDemo" />
    </div>
    </form>
</body>
</html>

 

Dinamik olarak çalışma zamanında da panel oluşturmak ve sayfada göstermek için sayfa içerisinde place holder konularak aşağıdaki kod yazılabilir.

    Panel p1 = new Panel();   
    Panel p2 = new Panel();
    Literal l2 = new Literal();
    Literal l1 = new Literal();
    ImageButton image = new ImageButton();
    Label lb = new Label();
    lb.Text = "(Show Details...)";
    lb.ID = "lb";
    image.ID = "image";
    image.ImageUrl = "~/images/expand_blue.jpg";
    image.ImageAlign = ImageAlign.Right;
    l2.Text = "Panel İçeriği<br><br><br><br><br>";
    l1.Text = "Panel Başlığı";
    p1.ID = "p1";
    p2.ID = "p2";
    p1.CssClass = "collapsePanelHeader";
    p2.CssClass = "collapsePanel";
    p2.Controls.Add(l2);
    p1.Controls.Add(l1);
    p1.Controls.Add(lb);
    p1.Controls.Add(image);
    PlaceHolder1.Controls.Add(p1);
    PlaceHolder1.Controls.Add(p2);,
    AjaxControlToolkit.CollapsiblePanelExtender c = new CollapsiblePanelExtender();
    c.TargetControlID = "p2";
    c .ExpandControlID = "p1";
    c.CollapseControlID = "p1";
    c.Collapsed = false;
    c.SuppressPostBack = true;
    c.SkinID = "CollapsiblePanelDemo";
    c.ImageControlID = "image";
    c.ExpandedImage = "~/images/collapse_blue.jpg";
    c.CollapsedImage = "~/images/expand_blue.jpg";
    c.TextLabelID = "lb";
    c.CollapsedText = "(Show Details...)";
    c.ExpandedText = "(Hide Details...)";
    PlaceHolder1.Controls.Add(c);

Makale ya da kodlarda bulunan hatalar ya da sorularınız için mehmetaliecer@gmail.com adresinden bana ulaşabilirsiniz. İyi çalışmalar.

Mehmet Ali ECER

www.mehmetaliecer.com