Gridview | ApoStyLEE

Repeater ile çalışmak

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. Okumaya devam et Repeater ile çalışmak

GridView içindeki kontrole erişme (Findcontrol)

İ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.

        <asp:GridView runat="server" ID="GridView1" CssClass="grid" ShowFooter="true" AutoGenerateColumns="false">
            <HeaderStyle CssClass="header" />
            <RowStyle CssClass="row" />
            <AlternatingRowStyle CssClass="alternate" />
            <FooterStyle CssClass="footer" />
            <PagerStyle CssClass="pager" />
            <Columns>
                <asp:BoundField DataField="id" HeaderText="Id" />
                <asp:BoundField DataField="tarih" HeaderText="Tarih" />
                <asp:BoundField DataField="sessionid" HeaderText="Oturum Kimliği" />
                <asp:TemplateField HeaderText="Bu bir checkbox">
                    <ItemTemplate>
                        <asp:CheckBox runat="server" ID="cbCheckBox" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Bu bir textbox">
                    <ItemTemplate>
                        <asp:TextBox runat="server" ID="txtTextBox" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Bu bir literal">
                    <ItemTemplate>
                        <asp:Literal runat="server" ID="ltrLiteral" Text='<%#Eval("id") %>' />
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:Button runat="server" ID="btnGonder" Text="Gönder" OnClick="btnGonder_click" />
                    </FooterTemplate>
                 </asp:TemplateField>
             </Columns>
        </asp:GridView>

Okumaya devam et GridView içindeki kontrole erişme (Findcontrol)

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

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. Okumaya devam et GridView ile çalışmak ve püf noktaları

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

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 &lt; 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

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.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div class="popupKapat"><span>Modal Box Başlık</span></div>

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..

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

<form id="form1" runat="server">
	    <div>
	        <asp:gridview id="GridView1" runat="server" allowpaging="True" onpageindexchanging="GridView1_PageIndexChanging" allowsorting="True" onsorting="GridView1_Sorting">
	        </asp:gridview>
	    </div>
	    </form>

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();
};   }
}