asp.net, jquery ve diğer web teknolojileri üzerine » gridview

Repeater ile çalışmak

apoStyLEE — Tue, 26 Oct 2010 15:17:37 +0000

Repeater asp.net aleminin bana göre en delikanlı kontrolüdür. Kafasından hiç bir şey yapmaz, biz ne dersek onu yapar. Bu sebepten dolayı veriyle ilgili kontrollerin en az özelliklisidir, hatta özelliği yoktur bile :) Madem hiç bir özelliği yok neden var bu kontrol ? Hemen anlatayım.

Repeater’ ın abisi olan DataList bir çok güzel özelliği üzerinde barındıran bir kontroldür. GridView ise bu iki kontrolden farklı bir mantıkta çalışır bu sebepten ötürü kulvarları çok farklıdır. GridView veriyi satır satır (row) ekrana basar, DataList ve Repeater ise eleman elaman (item) basar. GridView’ da DataList’ de veriyi ekrana basarken kendi html şablonunu kullanır, Repeater ise hiç bir şablonu kullanmaz, etiketsiz, biçimsiz bir veri ekrana basar. Şöyleki, sanki bir döngü yazdınız ve veritabanından gelen saf veriyi ekrana bastınız. Bunun neresi güzel diye sorabilirsiniz. İstediğiniz gibi şekillendirebilirsiniz, kendiniz şekillendireceğiniz için w3 kurallarına uygun ve arama motorlarının sevdiği cinsten bir tasarım yapabilirsiniz. Burada şöyle bir durum da var, DataList ile 5 dakikada yapacağınız bir işi Repeater’ la 25 dakikada yaparsınız. Arada ki fark ise birinde kurallara uygun bir tasarım ve tamamen kontrolü sizde olan bir tasarım, diğerinde ise kuralsız ve zaman zaman kontrolün sizde olmadığı bir tasarım. Bu sebepten dolayı, sitelerin kullanıcı arayüzünde Repeater, yönetici kısmında ise DataList kullanmak gerekiyor diye düşünüyorum.

Aşağıda Repeater ve DataList’ in html çıktılarını görüyorsunuz.

Ön bir bilgi verdikten sonra Repeater kontrolümüzün az ama öz olan özelliklerine bir bakalım.

            
                
                    Header
                
                    
                        <%#Eval("browser") %>
                    
                    
                        
                    
                    
                        <%#Eval("ip") %>
                    
                
                    Footer

HeaderTemplate En üst kısımda görünmesini istediğiniz içeriğin görüntüleneceği alan. Tekrar etmez.

ItemTemplate Veri kaynağından gelecek veri kadar dönecek kısımdır. Verinin görüntüleneceği alandır. Veri kadar tekrar eder.

SeparatorTemplate Veriler arasındaki kısımdır. Örneğin “Deneme | Deneme1 | Deneme2″ | karakterteri separatordür. Veri kadar tekrar eder.

AlternatingItemTemplate Alternatif veriyi gösteren kısımdır. Açıkçası şimdiye kadar hiç kullanmadığım bir özellik :) Veri kadar tekrar eder.

FooterTemplate En alt kısımda görünmesini istediğimiz kısımdır. Genelde Sayfalama vb.. şeyleri burada gösterebiliriz. Tekrar etmez.

Aşağıda, yukarıda yazdıklarımı görebilirsiniz.

Yukarıda gördüğümüz veriyi css kullanarak şekillendirelim.

        body{font-size:12px;font-family:Arial}

        .repeaterEleman{
            border:2px solid #c0c0c0;
            background-color:#ededed;
            width:200px;
            height:200px;
            padding:5px;
            margin:5px;
            float:left;
        }

        .repeaterEleman p{
            font-weight:bold;
            text-align:right;
        }

        h3{
            background-color:#046a99;
            color:White;
            padding:5px;
        }

           
                
                    Ziyaretçi bilgileri listeleniyor.
                
                    
                        
                            <%#Eval("browser") %>
                            <%#Eval("ip") %>
                        
                    
                
                    
                    Toplam <%#rpRepeater.Items.Count%> kayıt bulundu.

Çıktımız bu şekilde.

Html çıktısı ise gördüğünüz gibi tertemiz.

Repeater ile ilgili yazacaklarım bu kadar, kullandıkça daha iyi kavrayacağınız bir kontrol. Herkese güzel ve sağlıklı günler..

GridView içindeki kontrole erişme (Findcontrol)

apoStyLEE — Sat, 23 Oct 2010 07:27:51 +0000

İki önceki yazımızda gridview içerisine templatefield içerisinde textbox eklemiştik. Bu yazımızda kontrol içerisindeki kontrollere nasıl erişebiliyoruz buna bakacağız. Konu bütünlüğü bozulmasın diye gridview içerisindeki kontrollere erişmeye çalışıp, çeşitli denemeler yapacağız. Örnekte kullnacağımız gridviewimiz şu şekilde.

Bakalım elimizde neler var. Bir tane textbox, checkbox, literal ve butonumuz. Butonumuzu template field içerisine footertemplate ekleyerek gridimize ekliyoruz. Önceki yazımızda footerrow kullanarak kod tarafında bu işlemi yapmıştık. Hemen basit bir giriş yapalım. Butona tıklandığında textbox a yazdığımız veriye erişelim.

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GridViewDoldur();
        }
    }

    protected void GridViewDoldur() {
        GridView1.DataSource = db.DTGetir("Select top 10 * from EKOTEKNOBAYILOG order by id desc");
        GridView1.DataBind();
    }

    protected void btnGonder_click(object sender, EventArgs e)
    {
        TextBox txtGelenTextBox;
        // döngümüzü yazıyoruz, gridview1 içerisindeki satır sayısı kadar dönüyoruz.
        for (int i = 0; i < GridView1.Rows.Count; i++)
        {
            // textbox ımız 4. hücrede yer aldğından findcontrol fonksiyonumuzu kullanarak içerisinde txtTextBox kontrolünü aratıyoruz.
            // olayımız bukadar. Findcontrolü kullanmak bu kadar. İster gridview içerisinde gridview olsun, repeater içerisinde gridview olsun, tüm kontrolleri bu şekilde buluyor ve kullabiliyoruz.
            txtGelenTextBox = (TextBox)GridView1.Rows[i].Cells[4].FindControl("txtTextBox");
            // sonrasında textboxımızı normal bildiğimiz şekilde kullanabiliyoruz. .text deyip içerisindeki değere ulaşıyoruz.
            Response.Write(txtGelenTextBox.Text+"
");
        }
    }

Textbox içerisine yazdığımız veriyi kolaylıkla aldık. Dikkat ettiyseniz kontrolümüzü döngünün dışında oluşturduk ve döngü içerisinde findcontrol ile bulduğumuz kontrole eşitledik. Oluşturma işini döngünün içerisinde de yapabilirdik fakat her döngüde bu işlemi yapmak gereksiz ve verimsiz olur. Küçük uygulamalarda bu performans farkını göremeyebilirsiniz fakat uygulama büyüdükçe ve kullanıcı sayısı arttıkça bu kazanımlar size yol su elektrik olarak geri dönecektir ;) Eğer sadece içersine veri girilen textboxları almak isterseniz, basit bir if yazarak bu işi yapabilirsiniz.

// eğer boş değilse veriyi ekrana basıyoruz.
if(!string.IsNullOrEmpty(txtGelenTextBox.Text))
        Response.Write(txtGelenTextBox.Text+"
");

Şimdide şöyle bir örnek yapalım. Hangi checkbox işaretliyse onun karşısındaki literal içindeki veriyi alalım.

    protected void btnGonder_click(object sender, EventArgs e)
    {
        CheckBox cbGelen;
        Literal ltrGelen;
        for (int i = 0; i < GridView1.Rows.Count; i++)
        {
            cbGelen = (CheckBox)GridView1.Rows[i].Cells[3].FindControl("cbCheckBox");
            if (cbGelen.Checked)
            {
                ltrGelen = (Literal)GridView1.Rows[i].Cells[5].FindControl("ltrLiteral");
                Response.Write(ltrGelen.Text+"
");
            }
        }
    }

Textbox ı nasıl yakaladıysak checkbox ıda aynı şekilde yakalıyor ve basit bir if le seçili olan satırdaki literal içerisindeki veriyi alıyoruz. Mesela if bloğunun içerisine GridView1.Rows[i].BackColor = System.Drawing.Color.Red; ifadesini yazarsak seçilen satırların arka plan rengi kırmızı olur. Peki sayfa postBack olmadan seçilen satırların arkaplanlarını değiştirebilirmiyiz, tabiki değiştirebiliriz. Bu iş için jQuery ile ufak bir kod yazmamız yeterli. Hatta birde kaç tane satırın seçildiğinide yazalım. Bu iş için sayfamızda görünmesini istediğimiz bir yere ekleyelim. Sonrasında aşağıdaki kodu yazalım.

Gördüğünüz üzere çok basit bir şekilde kontrollerimize eriştik ve istediğimiz işlemleri basit basit hallettik. Son olarak da jQuery ile biraz aksiyon kattık. Umarım faydalı olmuştur, herkese kolaylıklar dilerim.

GridView ile çalışmak ve püf noktaları

apoStyLEE — Fri, 22 Oct 2010 08:46:44 +0000

Uzun bir aradan sonra kontrollerimizi tanımaya kaldığımız yerden devam ediyoruz. Ana hatlarıyla anlatmaya çalışacağım kontrol namı diğer GridView1 :) Çok fazla detaya girmeden en sık kullanılan özelliklerini ve jQuery ile birlikte neler yapabileceğimize vakit kaybetmeden bir göz atalım.

GridView, bir veri kaynağından gelen veriyi ekrana liste şeklinde basan kontrolümüz. Bir çok yerde kullandığımız bu kontrolde, sayfalama ve sıralama işlemlerini rahatlıkla yapabiliyoruz.

Kontrolümüzü şeklinde ekliyoruz.

Gridimizi şekillendirmek için ana hatlara sitil tanımlaması yapabiliyoruz. Nedir bu ana hatlar, header, row, footer ve pagerstyle. Bunları elle manuel stil tanımlaması yapabildiğimiz gibi style classı da atayabiliyoruz. Eğer elle stil yazarsak gridimizi oluşturan html çıktısında fazlasıyla kod tekrarı olur, bu ve yönetilebilirlikten dolayı class atamak en performanslı çözüm olacaktır.

Şeklinde gridimizi oluşturuyoruz, sonrasında herbir kalıp için css mizi yazıyoruz.

Son olarak gridimize class ları veriyoruz ve sitil olayını sonlandırıyoruz.

Gördüğünüz gibi çok kolay bir şekilde gridimizi şekillendirdik. Hız kesmeden birde sayfalama işleminin nasıl yapıldığına bir bakalım. Bunun için ilk önce gridimizin sayfalama özelliğini AllowPaging=”true” diyerek aktif ediyoruz. Sonrasında olaylar (events) kısmından onpageindexchanging olayına çift tıklıyor ve ilgili olayı gerçekleştirecek methodu oluşturuyoruz. Kodumuz şu şekilde..

    protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        GridView1.PageIndex = e.NewPageIndex; // yeni sayfa indexini gridimizin PageIndex değerine setliyoruz.
        GridViewDoldur(); //gridimizi tekrar dolduruyoruz.
    }

Kodlarımızın tamamı şu şekilde.

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GridViewDoldur();
        }
    }

    protected void GridViewDoldur() {
        GridView1.DataSource = db.DTGetir("Select top 100 * from EKOTEKNOBAYILOG order by id desc");
        GridView1.DataBind();
    }

    protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        GridView1.PageIndex = e.NewPageIndex;
        GridViewDoldur();
    }

2 satırda sayfalama işlemimizide yapmış olduk. Bu şekilde ki bir sayfalama işlemi küçük projelerde rahatlıkla kullanılabilir fakat kayıt sayısı arttıkça performansda düşer. Neden düşer ? Çünkü ilk anda veri kaynağındaki tüm veriyi önce gridimize yüklüyoruz ve sayfalamayı grid içerisinde yapıyoruz. Bu durumun tersi olması durumunda performans artacaktır. Şimdide footer yani gridin en alt kısmının kullanıma bir bakalım. Neden footer kullanmamız lazım onuda hemen söyleyeyim. İlk sebep, hizalama problemlerinin çıkmaması ve haliyle çok daha derli toplu bir görüntü elde etmemiz. İkinci ve bence en önemlisi sebep ise gridview içerisindeki veriyi word, excel yada farklı bir formatta dışarı aktarmak istediğimizde hiç bir tasarımsal sıkıntının doğmaması. Footerı göstermek için ilk önce ShowFooter=”true” yapıyoruz. Artık footerimizi kullanabiliriz. Mantığını anlamak adına bir örnek yapalım.

    protected void GridViewDoldur() {
        GridView1.DataSource = db.DTGetir("Select top 10 * from EKOTEKNOBAYILOG order by id desc");
        GridView1.DataBind();

        decimal toplamSayi = 0; //burada basit bir toplama işlemi yapıyoruz. 6. sutundaki verileri alt alta topluyoruz.
        for (int i = 0; i < GridView1.Rows.Count; i++)
        {
            toplamSayi += Convert.ToDecimal(GridView1.Rows[i].Cells[6].Text);
        }

        GridView1.FooterRow.Cells[3].Text = "Toplam: " + GridView1.Rows.Count + " kayıt."; // kaçtane kayıt olduğunu footerımızın 3. sutununa yazıyoruz.
        GridView1.FooterRow.Cells[6].Text = toplamSayi.ToString(); // topladığımız değerleri footerdaki 6. sutuna yazıyoruz.
    }

Görüldüğü üzere footer kullanımıda oldukça basit. Herşey gayet derli toplu ve kontrolümüz altında. Şuana kadar ki örneklerimizi gridviewımızı otomatik doldurarak yaptık, şimdide veri kaynağından gelen veriyi nasıl özelleştirebiliriz buna bir bakalım. İlk önce sutunlarımızı kişiselleştirip istediğimiz sutunları alalım. Bu işlem için önce AutoGenerateColumns=”false” yapmamız gerekiyor, bunun nedenide bu işlemi biz manuel olarak elle yapacak olmamız. Örnekte kendi verikaynağımdaki isimleri kullanacağım

Gördüğünüz üzere Columns adında bir bölüm oluşturup altına istediğimiz sutunları tanımladık. Şimdi verimizi biçimlendirelim (format). Ne demek bu ? Tarih, sayı vb.. verileri kendi ihtiyacımız doğrultusunda düzenleyebilmemize olanak sağlayan yapılardır. Örneğin; veritabanından gün/ay/yıl şeklinde gelen bir tarihi ay.gün.yıl şekline çevirmek gibi.. Burada şöyle bir püf noktası bulunuyor, verikaynağında ki veri tipinin tarih yada sayı olması gerekiyor. Yani veri kaynağında string şeklindeki bir tarihe yada sayıya direk biçimlendirme yapamıyoruz. Kendi oluşturduğumuz sutunlarda DataFormatString özelliğini kullanarak çok kolay bir şekilde istediğimiz biçimlendirmeyi rahatlıkla yapabiliyoruz. DataFormatString=” 0:n}”, DataFormatString=”{0:MM.dd.yyyy}” gibi.. Biçimlendirme işlemleri ve parametleri hakkında burayı ziyaret edebilirsiniz.

Herşey iyi güzel ama verikaynağında olmayan bir alanı gridimize nasıl ekleyeceğiz diye sorabilirsiniz. Bu noktada imdadımıza TemplateField koşuyor. Hemen örneğimize bakalım.

Yukarıda da gördüğünüz gibi TemplateField içine ItemTemplate ile istediğimiz kontrolü yada herhangi birşeyi rahatlıkla girdik. Burada dikkat ederseniz Eval(“id”) şeklinde bir kullanım gerçekleştirdik. Eval veri kaynağımızdan manuel bir şekilde veriyi gridimizin içine çekmemize olanak sağlayan bir fonksiyon. Şöyle bir soru gelebilir buraya textbox ları ekledik fakat içerisindeki veriyi nasıl alabiliriz ? Bu sorunun cevabını bir sonraki yazımda yazacağım.

Gridview in çok fazla özelliği bulunuyor. Bu özelliklere verileri güncelleme ve silme gibi olaylarda dahil fakat ben bu özelliğin kullanılmasını çok sağlıklı bulmuyorum. Neden bulmuyorum, çünkü sayfa yeniden yükleniyor, haliyle griddeki verilerde yeniden yükleniyor, bu son son derece gereksiz ve verimsiz. Bu düzenleme işlemi için hem grid tarafında hemde kod tarafına bir sürü kod yazmamızın gerekmeside ayrı bir handikap. Düzenleme işlemi için jQuery ile veriyi olduğu yerde düzenleme (inline edit) yöntemini hem daha kolay kullanılabilir hemde maliyetinin daha az olduğunu düşünüyorum. Bu konuyu ilerleyen günlerde ele alacağım. Dipnot olarak burada dursun istedim.

Footer ile ilgili aklıma bir şey daha geldi. Gridimize footer ekledik fakat patronumuz yada iş verenimiz bize footerin aynısının headerında üstünde olmasını istedi. Böyle bir istek neden gelir ? Gridimizde çok fazla satır olduğunu düşünürsek, alt toplamlar yada diğer bilgilere erişmek için kullanıcı sayfayı dibe kadar çekmek zorunda kalacaktır. Bu işi yapmanın bir çok yolu bulunuyor. Tabiri caizse bir gumul kodun yazılacağı çok can sıkıcı bir durumdur bu. Bu noktada imdadımıza jQuery yetişiyor. Hemde ne yetişme, bir satırda olayı çözüyoruz. Footerımıza bir class atamıştık, ilk önce footerımızı seçiyoruz sonrasında klonluyoruz (clone) ve headerımızın önüne ekliyoruz. Bu sayede footerda değişiklikler olduğunda aynen headerada uygulanmış oluyor. Sürekli footera ayrı kod headerdakine ayrı kod yazmaktan kurtulmuş oluyoruz.

Gridview ile ilgili yazacaklarım şimdilik bu kadar, umarım anlaşılır bir yazı olmuştur. Yukarıda da belirttiğim gibi gridview ile ilgili yazacak çok fazla şey bulunuyor. Ben en ana hatlarıyla ve en sık kullanılan özelliklerini anlatmaya çalıştım. İlerleyen günlerde daha farklı özelliklerini ele almaya çalışacağım, herkese kolay gelsin.

GridView Satırlarını tıklayınca genişletmek (Expand Rows)

apoStyLEE — Fri, 26 Jun 2009 16:35:00 +0000

Nedenini bilmiyorum ama başlığı seçerken epeyce zorlandım, neyse ki bir tane buldum :) Konumuza dönelim, GridView kontrolünde verileri listeletirken ilgili satırın altında ilişkili diğer kayıtları göstermemiz gerekebiliyor. Bu sayede kullanıcıya çok işlevsel bir listeleme yapabiliyoruz. Bu işlem için genelde kullanılan yöntem; tüm verilerin tümünün çekilip sonra javascript kullanarak göster-gizle şeklinde gösterilmesi. Bu yöntemde ciddi anlamda performans sıkıntısı yaşarız çünkü 40 tane kaydımız olsa ve bu kayıtlara ait 5′ er de alt kayıt olsa ilk seferde toplam 200 kayıt listelemiş oluyoruz. Anlatacağım yöntemde bu işi jQuery Ajax ile birlikte verimli ve efektif bir şekilde çözeceğiz. (Bugün çok değişik bir gün sanırım havalardan kaynaklanıyor, anlatım bozukluğu varsa kusuruma bakmayın) Mekanızmamız iki adet .aspx sayfasından oluşuyor. Birincisi normal kayıtlarımızı listelettiğimiz GridGenislet.aspx diğeri ise üzerine tıklayınca açılacak olan kısmın bilgilerini getiren Genisle.aspx GridGenislet.aspx sayfamızın ilgili kodlarına bakalım. Burada jQuery ile açılıp kapanma işlemi sırasında oluşacak efekt işini ve Genisle.aspx sayfamıza Ajax ile ilgili kayıtların gelmesini sağlayacak fonksiyonumuzu yazıyoruz. Sonrada Tümünü Göster ve Tümünü Gizle olayını ekledim. Sırf jQuery i biraz daha algılayabilmek adına :)

	$(document).ready(function(){
		$('a#tgizle').click( tumunuGizle );
		$('a#tgoster').click( tumunuGoster );
	});

	function tumunuGizle(){
	    $('div.genisleyenDiv').slideUp();
	}

	function tumunuGoster(){
	    $("div.genisleyenDiv").each(function()
        {
           goster($(this).attr('id'));
        });
	}
	//can damarımız burdaki fonksyion, genisle.aspx e id bilgisini gönderip sayfamızda gösteriyoruz.
	function goster(divId)
	{
		$('div#'+divId).toggle('slow');
		$('div#'+divId).load('Genisle.aspx?Id='+divId);
	}

GridGenislet.aspx.cs sayfamızın ilgili kodlarına bakalım.

	DataTable dt = veritabani.DataTableGetir("Select top 10 id,baslik,icerik,tarih from yazilar");
	GridView1.DataSource = dt;
	GridView1.DataBind();

	for (int i = 0; i < GridView1.Rows.Count; i++)
	{
		//burada hersatırın onclick özelliğine goster fonksiyonumuzu atıyoruz ve ilgili id yi yazdırıyoruz.
	    GridView1.Rows[i].Cells[0].Attributes.Add("onclick", "goster('" + dt.Rows[i][0].ToString() + "')");
	}

Genisle.aspx sayfamızda ise gelen id değerini alıp sql cümlemizdeki yerine koyuyor ve listeletiyoruz. Burdaki yöntemde ben GridView üzerine anlatmaya çalışıyorum, mantığı anlarsanız çoğu yerde bu mekanizmayı kullanabilirsiniz.

Sadece dilimin döndüğünce mantığı anlatmaya çalıştım, eğer isteyen olursa çalışır kodları da paylaşabilirim. Çalışan örneği görmek için tıklayın. Zaman problemim nedeniyle css ile süsleyemedim, istendiği taktirde çok şık bir görünüm verilebilir. Herkese güzel günler diliyor ve konuyu burada noktalıyorum.

GridView ve Modal Popup Extender ile birlikte çalışma

apoStyLEE — Tue, 16 Jun 2009 10:34:00 +0000

Ajax uygulamaları artık web sayfalarının olmazsa olmazlarından, Asp.Net ile birlikte Ajax Control Toolkit ile birlikte ajaxın nimetlerinden en iyi ve rahat şekilde faydalanmamız hedeflenmiş. Bu yazımda Modal Popup Extender ile GridView satırında bulunan kaydın id si ile birlikte nasıl işlerimizi yürüteceğimizi anlatmaya çalışacağım. Bu konuda beni bilgilendiren Yunus Emre ye sonsuz teşekkürlerimi sunuyorum.

Burada Modal Popup kontrolüne ait bilgiler bulunuyor. Klasik kullanımı oldukça basit olan bu kontrolü GridView gibi kayıtların listelendiği nesnelerde kullanmak için farklı yöntemler kullanmak gerekiyor. Bu yöntemde aptal buton adı verilen bir buton kullanıp, modal popupu bir nevi kandırıp hata vermemesini sağlıyacağız. Modal Popupumuzun güzel görünmesi için gerekli olan sitil kodlarımız.

.popupArka{
    background-color:#333;
    filter:alpha(opacity:90);
}

.popupKapat{
    text-align:right;
    background-color:#706c6c;
    padding:2px;
    border-bottom:1px solid #c0c0c0;
}

.popupKapat input{
    font-weight:bold;
    width:25px;
    height:25px;
}

.popupKapat span{
    float:left;
    font-size:18px;
    color:White;
    font-weight:bold;
}

Üstten aşşağıya doğru açıklamaya çalışayım. ScriptManager ajax kontrollerinin çalışması için gerekli olan mekanızmamız. UpdatePanel, içerisinde olayların ajax kullanılarak gerçekleşeceği alan. Yani burada sayfamız yenilenmeden işlemlerimiz gerçekteşecek. GridView bildiğimiz Grid :) burda dikkat etmemiz gereken noktalar onrowcommand=”GridView1_RowCommand” burdaki ifadeyi aşşağıdaki kodlarda görebilirsiniz. TemplateField içinde bir adet LinkButon’ umuz bulunuyor. Bunu normal buton imagebuton şeklinde de değiştirebilirsiniz. Buna tıklandığında modalboxumuz açılacak. Burdaki önemli nokta CommandName=”Detay” ve ommandArgument=’gidecekDeğer’ Aşşağıya indiğimizde modal boxun kendisini görüyoruz. İçinde sitil ve diğer tanımlamalarımız bulunuyor. Bu tanımlamalardan biride yukarda bahsettiğim aptalbuton. Hemen altta ise panel‘ imizi panelimizi görüyoruz. ModalPopup bu paneli bize gösterecek. Belki biraz karışık bir anlatım oldu ama örneği uygulayınca hiçde öyle olmadığını göreceksiniz ve sürekli bu kontrolü kullanmak isteyeceksiniz.


Modal Box Başlık

RowCommand’ dan gelen Detay adındaki butonumuzu bulup, iFrameOlustur methodumuzu çalıştırıyoruz. iFrameOlustur methodumuzda popupPanel içine myiframe kontrolünü ekliyoruz. Kodlara bakıldığında herşeyin anlaşıldığını düşünüyorum.

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Detay")
{
iFrameOlustur("GosterilecekSayfa.aspx?Id=" + e.CommandArgument, "800", "500");
ModalPopupExtender1.Show();
}
}

protected void iFrameOlustur(string src, string width, string height)
{
HtmlGenericControl myiframe = new HtmlGenericControl("iframe");
myiframe.Attributes.Add("frameborder","0");
myiframe.Attributes.Add("src", src);
myiframe.Attributes.Add("width", width);
myiframe.Attributes.Add("height", height);
popupPanel.Controls.Add(myiframe);
}

Evet arkadaşlar bir yazının daha sonuna geldik. İnşallah işinize yarayan bir yazı olur. Hepinize güzel günler diliyorum.

ASP.Net GridView Sıralama Sayfalama İşlemleri..

apoStyLEE — Fri, 14 Nov 2008 17:01:00 +0000

Veritabanı ile GridView’ i doldurup, sayfalama ve sıralama işlemine göz atacağız. Öncelikle şunu belirtmekte fayda var diye görüyorum eğer editör olarak Visual Studio kullanıyorsanız sadece sürükle bırak yaparak bu işlemleri yapabilirsiniz, ama biz asp den geldiğimiz için kodu göre göre ne olduğunu anlaya anlaya yapmaya çalışacağız. Şunu itiraf etmeliyim sıralama işlemini yapan bloğu http://www.forxy.net/ adresindeki http://www.forxy.net/ViewKonuDetay.aspx?KonuID=22 örneğinden gördüm :) İlk yapmaya çalıştığım örnek olduğu için daha kolay bir şekilde yapılabilirmiydi şuanlık bilemiyorum, ama saat gibi çalıştığını söyleyebilirim. Kodlara baktığınızda hemen hemen herşeyi anlayacaksınız zaten, eğer anlamazsanız sorun bildiğim kadarıyla açıklamaya çalışırım :)

Default.aspx

Default.aspx.cs

using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
doldur("ind"," desc");
}
}

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
doldur("ind", " desc");
}

public SortDirection GridViewSortDirection
{
get
{
if (ViewState["sortDirection"] == null)
ViewState["sortDirection"] = SortDirection.Ascending;
return (SortDirection)ViewState["sortDirection"];
}
set { ViewState["sortDirection"] = value; }
}

protected void GridView1_Sorting(object sender, GridViewSortEventArgs e) {
if (GridViewSortDirection == SortDirection.Descending)
{
GridViewSortDirection = SortDirection.Ascending;
doldur(e.SortExpression, " desc");
}
else
{
GridViewSortDirection = SortDirection.Descending;
doldur(e.SortExpression, " asc");
}
}

public void doldur(string alanadi, string siralama)
{
SqlConnection cnn = new SqlConnection("Server=SqlServerAdresi; Database=VeriTabanıAdı; uid=KullanıcıAdı;pwd=Şifre;pooling=true; connection lifetime=10; connection timeout=5; packet size=1024;");
SqlDataAdapter da = new SqlDataAdapter("select * from TabloAdi", cnn);
DataTable dt = new DataTable("TabloAdi");
da.Fill(dt);
DataView dv = new DataView(dt);
dv.Sort = alanadi + siralama;
GridView1.DataSource = dv;
GridView1.DataBind();
};   }
}