21 Şub 2007 Alfabetik Sayfalama Kategori: ASP.NET Etiketler: ASP.NETASP.NET 2.0ASP.NET 4.0 1 Yorum Merhaba arkdaşlar, bu makalemizde Gridview kontrolü üzerinde Alfabetik sayfalamanın nasıl yapıldığına bakacağız. Alfabetik Sayfalama Bu makalemizde gridview de klasiklesmis olan numeric bazlı yada navigation bazlı sayfalama düzeninden vazgeçip gridview üzerinde Alfabetik sayfalama yapacagız. Bu bize ne saglayacak? Örnegin bir fihrist, sözlük vs.. yaptıgımız da A harfindekileri kayıtları bulmak isteriz. Ya da sadece B harfindeki kayıtları... Klasik sayfalama (1.2.3 yada prev., next) bize burada çözüm olmayacaktır. Iste bunu çözmek için Alfabetik sayfalama en iyi çözümdür. Simdi isterseniz bu çözümü örnekleyelim; SQL Server 2005 içindeki AdventureWorks Database'indeki Person.Contact tablosundaki kayıtlarımı gridview ile listeleyelim. Ilk olarak bir web projesi açalım; Ben alıskanlık olarak ajax projesi açtım. Daha sonra formumuzda ne yapacagımıza geçelim. Sayfamızda Alfabetik olarak sıralanan harfler olacak ve biz bu harflere tıkladıgımız zaman; gridview de bu harfe baglı olan(örnegin A ile baslayanlar) kayıtlar listelenecek. Ilk olarak formumuz üzerine bir adet panel ve gridview ekleyelim. Paneli ekledik çünkü bu panelin üzerine LinkButton'lar olusturacagız. Evet simdi isterseniz projemize hareket katalım ve projemize AJAX özelliklerini de ekleyelim. Bunun için formumuza Script Menager, UpdatePanel ve UpdateProgress de ekleyelim. Evet simdi butonlara tıkladıgımızda gridview refresh olmadan kayıtları listeleyecek. Isterseniz ilk olarak Panel üzerinde listelenecek olan Alfabetik Paging'i olusturalım. protected void CreateLink() { string[] letters = { "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "All"}; for (int i = 0; i < letters.Length; i++) { LinkButton myLetter = new LinkButton();Yeni Bir LinkButton olusturduk myLetter.ID = myLetter + i.ToString(); myLetter.CommandName = "LetterPaging";// myLetter.CommandArgument = letters[i].ToString(); myLetter.Text = letters[i].ToString() + " "; myLetter.Command += new CommandEventHandler(myLetter_Command); // Burada Command Eventini olusturuyoruz. this.PagingPanel.Controls.Add(myLetter);//Olusturulan Butonu Panel'e ekliyoruz } } Simdi isterseniz pagingimizi test edelim; Tabi önce bu Void'i form_load da çagırmalıyız. Pagingimizi olusturduk... Simdi Bu linklere tıklanınca olusacak olan kodları yazalım. Yukarıda myLetter.Command += new CommandEventHandler(myLetter_Command); Olusturdugumuz Command eventi içerisini yazalım; private void myLetter_Command(object sender, CommandEventArgs e) { if (e.CommandName.ToString() == "LetterPaging") { if (e.CommandArgument.ToString() != "All") { GetContactsByLetter(e.CommandArgument.ToString()); } else { GetAllContacts(); } } } Burada Command Name'e göre ve gelen commandArgument degerine göre 2 islem yapılıyor; Eger CommandArgument degeri All ise GetAllContacts Voidini çagırıyor degilse de GetContactsByLetter("A") voidini çagrıyor. Simdi bunları olusturalım. SqlConnection Cnn; SqlDataAdapter Da; DataSet Ds; private void GetAllContacts()//tüm kayıtları listele { Cnn = new SqlConnection("Data Source=localhost; initial catalog=AdventureWorks; trusted_connection=yes"); if (Cnn.State == ConnectionState.Closed) Cnn.Open(); Da = new SqlDataAdapter("SELECT top 20 FirstName + ´ ´ + LastName as ContactName, EmailAddress FROM Person.Contact", Cnn); Ds = new DataSet(); Da.Fill(Ds, "TBL"); GridView1.DataSource = Ds.Tables[0]; GridView1.DataBind(); } private void GetContactsByLetter(string Letter)//Gelen Harfe göre listele { Cnn=new SqlConnection("Data Source=localhost; initial catalog=AdventureWorks; trusted_connection=yes"); if (Cnn.State == ConnectionState.Closed) Cnn.Open(); Da = new SqlDataAdapter("SELECT top 20 FirstName + ´ ´ + LastName as ContactName, EmailAddress FROM Person.Contact where Firstname like ´" + Letter + "%´", Cnn); Ds = new DataSet(); Da.Fill(Ds, "TBL"); GridView1.DataSource = Ds.Tables[0]; GridView1.DataBind(); } Pagingimizden sonra Listelenecek olan kayıtlarımız da hazır; ama kullanıcı sayfaya geldiginde sayfayı bos görmesin bunun için GetAllContacts voidini form_load da çagıralım. Tabi linkleri olusturmak için CreateLink voidinide... protected void Page_Load(object sender, EventArgs e) { GetAllContacts(); CreateLink(); } Projemizi çalıstıralım; Tüm kayıtlar listelendi; Simdi a harfine tıklayalım; Postback olmuyor ve Ajax UpdateProgress ile kullanıcıyı bilgilendiriyoruz... Evet iste A harfi ie baslayan kullanıcıları listeledik : ) 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 semgoksu@ semgoksu.com Kaynaklar http://msdn.com http://www.codeproject.com
20 Şub 2007 AJAX ve AJAX Control Toolkit Kurulumu Kategori: AJAX Etiketler: ASP.NETASP.NET AjaxASP.NET 2.0 3 Yorum Merhaba arkadaşlar, bu makalemizde ajax ve ajax control toolkit’in nasıl kurulduğundan bahsedeceğiz.AJAX ve AJAX Control Toolkit Kurulumu Yazılıramı takip edenler de bilirler, simdiye kadar hep ajax control toolkit nesnelerinden bahsettim. Ama gelen sorular ve istekler üzerine bu makale de ajax özelliklerinin ve ajax control toolkit nesnelerinin Visual Studio'ya nasıl ekleneceginden bahsedecegim. Ilk olarak web uygulamalarımızda AJAX uygulamalarını gelistirebilmek için ASP.NET 2.0 AJAX Extensions 1.0'i yüklememiz gerekir. ASP.NET 2.0 AJAX Extensions 1.0'i asagıdaki adresten indirelim. ASP.NET 2.0 Ajax Extension 1.0 Next, Next, Next... Evet AJAX 2.0 Extension'ı kurduktan sonra, su anda en son versiyonu yayınlanan ASP.NET 2.0 AJAX Futures January CTP yi indirelim. Bu bize ASP.NET 2.0 AJAX yada ASP.NET AJAX Control Toolkit için yeni özellikleri yüklememizi saglar. ASP.NET 2.0 AJAX Futures January CTP yi asagıdaki adresten indirelim. ASP.NET 2.0 AJAX Futures January CTPSimdi bunu kuralım. Klasik olarak Next, Next, Next... ASP.NET 2.0 AJAX Futures January CTP yi de kurduktan sonra geriye kalan tek sey Control toolkit nesnelerinin Visual studio'ya eklenmesi. Ajax Control Toolkit'i asagıdaki adresten indirelim. Ajax Control ToolkitSimdi indirdigimiz bu dosyalara göz atalım. Ajax contollerinin yer aldıgı sample site ve derlenecek olan projelerin yer aldıgı bir klasör bulunuyor. Simdi AjaxControlToolkit Projesini açalım ve projemizi derleyelim. Projemizi derledikten sonra Visul Studio Toolbox üzerinde yeni bir tab olusturalım. Bu tab üzerinde sag tıklayalım ve açılan pencereden Choose Item 'ı Seçelim Açılacak olan pencere de browse tıklayalım ve derlemis oldugumuz AjaxControlToolkit.DLL dosyasını seçelim. Open seçenegini seçelim. Gördüldügü gibi Ajax nesneleri artık tüm projelerimiz de kullanmak üzere hazır : ) Simdi Visual Studio üzerinde yeni bir proje açmaya deneyelim; Artık projemiz de ajax özelliklerini ve ajax nesnelerini kullanabiliriz... 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 www.semgoksu.com Örnek Kodlar için mail adresimi kullanabilirsiniz semgoksu@ semgoksu.com Kaynaklar http://ajax.asp.net
17 Şub 2007 DataBound Kontroller ile SQL Paging Kullanımı Kategori: ASP.NET Etiketler: ASP.NET AjaxASP.NET 2.0 1 Yorum Merhaba arkadaşlar bu makalemizde SQL server ile Databound (Gridview, Datalist, Repeater) kontroller ile pagin’in nasıl yapıldığına bakacağız.DataBound Kontroller ile SQL Paging KullanımıSQL Server 2005 ile gelen ROW_NUMBER() fonksiyonu ile SQL Server üzerinde sayfalama yapmak artık çok kolay. ROW_NUMBER() fonksiyonu bize kayıtlarımızın yanında bir satır numarası olusturur ve sayfalamamız ve indexlememiz için bize yardımcı olur. Row_Number() Kullanımı: select top 10 row_number() over (order by name asc) as SatyrNO, ProductID, Name,ProductNumber from Production.Product Gördügümüz gibi bize geriye satır no isimli bir field döndürüyor ve 1 den artarak bize satır numarası olusturuyor. Bu özellikle windows uygulamaları için güzel bir çözüm oldu. Web uygulamarında pagingleme oldukça basitti ama onunda dezavantajları vardı. Özellikle çok fazla kayıt içeren data datagride yüklendiginde tüm veri hem gride yüklenirken oldukça zorlanıyordu hemde sayfalar arasında gezinirken veri tekrar tekrar yükleniyordu. SQL server ile gelen ROW_NUMBER() fonksiyonu ile bize identity gibi artan bir satır numarası döner ve biz bu satır numarası üzerinde istedigimiz degerleri gönderir istedigimiz kadar kaydı görüntüleyebiliriz. Yani grid üzerinde kaç kayıt görüntülemek istersek o kadar kayıt gride yüklenecek. Buda inanılmaz bir performans kazancı olacak.Örnek:select * from (select row_number() over (order by name asc) as SatirNo, ProductID, Name,ProductNumber from Production.Product) Products where (SatirNo between 20 and 30)Gördügümüz gibi bize 20 ve 30 satır numarası arasındaki kayıtlar geri döndü. Artık örnegimize geçebiliriz.Yeni bir web site açalım ve bir grid ekleyelim. Gridimizi ekledikten ve pagin içinde bir label ekleyelim. Grid üzerinde 10 kayıt görüntüleyecegiz ve diger kayıtlara geçmek için olusturacagımız paging ile diger sayfalardaki kayıtlara geçecegiz.Not: Aynı islemi Datalist ve Repeater ile de yapabiliriz. Ben anlasılır olması için Gridview üzerinde yapacagım.Kodumuzu yazmaya baslayalım; ilk olarak connection stringi ayarlayalım. SqlConnection Cnn; SqlCommand Cmd; DataSet Ds; SqlDataAdapter Da; private string CnnStr() // Connection Stringi ayarladık { return "Data Source=*******;initial Catalog=*******;Uid=*******;pwd=*******"; }Connection Stringimizi olusturduk, simdi de Datayı çekecek olacak void'i yazalım. private void DatayiGetir(int Start, int End) // Görüntülenecek datayı çektik.. { Cnn = new SqlConnection(CnnStr()); string sqlstr = "select * from (select row_number() over (order by InsertionDate asc) as SatirNo, InsertionDate, UpdateDate from Messages) Messages where (SatirNo between " + Start + " and " + End + ")"; Da = new SqlDataAdapter(sqlstr, Cnn); Ds = new DataSet(); Da.Fill(Ds, "tbl"); GridView1.DataSource = Ds.Tables[0]; GridView1.DataBind(); }Voidimizi yazdıktan sonra simdi de sayfamızdaki paginglemeyi ayarlayalım. Bunun için öncelikle ihtiyacımız olan Toplam kayıt sayısıdır. Buradan sayfalanacak olan sayfa sayısını bulacagız. private int KayitSayisi() // Sayfalama için Toplam kayıt sayısını aldık. { Cnn = new SqlConnection(CnnStr()); string sqlstr = "select Count(*) from Messages"; if (Cnn.State == ConnectionState.Closed) Cnn.Open(); Cmd = new SqlCommand(sqlstr,Cnn); int recordCount= (int)Cmd.ExecuteScalar(); return recordCount; }Toplam kayıt sayısını aldıktan sonra simdi Sayfa sayısını bulalım ve pagini ekrana basalım.privatevoid PagingiOlustur() { int ToplamSayfaSayisi; StringBuilder sb = new StringBuilder(); if (KayitSayisi() % 10 == 0) { ToplamSayfaSayisi = KayitSayisi() / 10; } else { ToplamSayfaSayisi = KayitSayisi() / 10 + 1; } for (int i = 0; i < ToplamSayfaSayisi; i++) { sb.Append("<a href=SQLPagingAndCustomDataGrid.aspx?Sayfa=" + +(i) + ">" + (i + 1) + "</a>\n"); } Label1.Text = sb.ToString(); }Pagingimizi olusturduktan sonra artık paging isleminin çalısması için Formumuzun loadında Datayı getirecek vodidi ve paging olusturacak voidi çagıralım. private int SayfaNo, Baslangic, Bitis; protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { if (Request.QueryString["Sayfa"] != null) { SayfaNo = Convert.ToInt32(Request.QueryString["Sayfa"]); } else { SayfaNo = 0; } Baslangic=(SayfaNo *10) + 1; Bitis = Baslangic + 10 -1; PagingiOlustur(); DatayiGetir(Baslangic,Bitis); } }Simdi Projemizi çalıstıralım;Satır numaralarına dikkat ederseniz 1 den 10 a kadar devam ediyor. 2. sayfaya geçelim.Yine satır numaralarına dikkat edersek 10 dan 20 ye kadar yani 2. sayfadaki kayıtları gösteriyor. Gerçekten çok hızlı : )Sizde uyguladıgınızda datanın gridview ile paginglenmesine göre daha performanslı oldugunu göreceksiniz. Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı ve iyi günler dilerim. Sem GÖKSUMCP | MCAD.NET | MCTS Örnek Kodlar için mail adresimi kullanabilirsiniz askisem@hotmail.com Kaynaklarhttp://msdn.com
15 Şub 2007 AJAX DragPanel Extender Kategori: AJAX Etiketler: ASP.NETASP.NET AjaxASP.NET 2.0 0 Yorum Merhaba arkadaşlar, bu makalemizde ajax control toolkit’in nesnelerinden DragPaneel Extender kontrolünü inceleyeceğiz.AJAX DragPanel ExtenderDragPanel Extender WenForm üzerindeki kontrolleri web form üzerinde baska bir yere sürüklenmesini saglar. DragPanel Panel nesnesini hedef alır ve "Drag Handle" gibi kullanmak için kontrole eklenen ek paramatreler alır. Bu kontrolü özellikle web sayfalarımızın reklam bannerlarında kullanırız. Buda sitemize hareketlilik kazandırır. Bende bu makalemde bu nesneniyi reklam banner örnegini kullanarak anlatacagım.Kullanımı:<ajaxToolkit:DragPanelExtender ID="DPE1" runat="server"TargetControlID="Panel3"DragHandleID="Panel4" />Özellikleri: TargetControlID - Tasınacak olan Panel'in ID'si DragHandleID - Tasınacak panel için Tasınacagı panelin ID'si. Kullanıcı paneli bu panelin içerisinde bi yere tasıyabilecek.Örnek:Evet arkadaslar örnegimizde Reklam bannerlerini form üzerinde ordan oraya tasıyacagız : )Ilk olarak bir AJAX projesi açalım. Daha Sonra sayfamıza 2 adet panel ekleyelim ve içerisine reklamını aldıgımız firmanın logosunu koyalım. Ayrıca bir adet de DragPanel Extender nesnesi ekleyelim.Benim yaptıgım form asagıdaki gibidir. Panel için yazdıgım kodlar; <asp:Panel ID="Panel1" runat="server" Direction="LeftToRight" HorizontalAlign="Left" ScrollBars="Horizontal" Width="100%" Height="800px"> <asp:Panel ID="Panel3" runat="server" BorderStyle="Solid" BorderWidth="2px" Width="242px"> <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="Small" Text="Kurtlar Vadisi Terör" ForeColor="#C00000"></asp:Label> <br /> <br /> <asp:Image ID="Image1" runat="server" ImageUrl="~/70866.jpg" /><br /> <br /> </asp:Panel> </asp:Panel>Panelimizi yani reklam bannerimizi tasınabilir hale getirelim.<cc1:DragPanelExtender ID="DragPanelExtender11" runat="server" DragHandleID="Panel1" TargetControlID="Panel3" />Simdi projemizi çalıstıralım. Reklam bannerimizi tasıyalım; Evet reklam bannerimizi ordan oraya savurduk : )Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı ve iyi günler dilerim. Sem GÖKSUMCP | MCAD.NET | MCTS Örnek Kodlar için mail adresimi kullanabilirsiniz askisem@hotmail.comKaynaklar http://ajax.asp.net
15 Şub 2007 AJAX UpdatePanelAnimation Extender Kategori: AJAX Etiketler: ASP.NETASP.NET AjaxASP.NET 2.0 2 Yorum Merhaba arkadaşlar, bu makalemizde ajax control toolkit’in nesnelerinden UpdatePanelAnimation Extenderi ve özelliklerini inceleyeceğiz.AJAX UpdatePanelAnimation ExtenderUpdatepanelanimation sayfalarımıza framework içerisinde tanımlı olan animasyonları uygulamamıza izin veren Ajax kontrolüdür. Bir update islemi tamamlandıgında yada update islemi devam ederken buna baglı olarak animasyonların oynatılmasını saglar.Postback basladıgında OnUpdating animasyonu çalısır fakat Postback sona erdiginde OnUpdated animasyonu çalısır. Not: Update Panelin UpdateMode özelligi always olarak ayarlanmalı çünkü postback tamamlandıgında OnUpdated animasyonu çalısacak. Oynatılan Animasyonlar, XML kullanarak tanımlanır. Frameworkdaki animasyonları kullanmak için; (Using Animation) http://ajax.asp.net/ajaxtoolkit/Walkthrough/UsingAnimations.aspx adresine tıklayınız.Animasyonların propertylerine erismek için(Animasyon Reference);http://ajax.asp.net/ajaxtoolkit/Walkthrough/AnimationReference.aspx Adresine tıklayınız.Kullanımı:<ajaxToolkit:UpdatePanelAnimationExtender ID="ae" runat="server" TargetControlID="up"> <Animations> <OnUpdating> ... </OnUpdating> <OnUpdated> ... </OnUpdated> </Animations></ajaxToolkit:UpdatePanelAnimationExtender>Özellikleri:TargetControlID - Animasyonu oynatmak için kullanılacak olan UpdatePanel'inn ID'si. OnUpdating - Update islemi gerçeklesirken gerçeklesecek olan animasyon. OnUpdated - Update islemi bittiginde gerçeklesecek olan animasyon. Örnek:Örnegimizde SQLDataSource ile Databaseimize baglanıp kayıtlar arasında gezinecegiz. Sayfamız degisirken yada herhangi bir update islemi yapılırken animasyonumuzu oynatacagız. Ilk olarak bir ajax projesi olusturalım.Projemizi olusturduktan sonra Sayfamıza bir adet SQLDataSource ekleyelim. AdventureWorks databaseine baglanım person.contact tablosundaki verileri görüntüleyecegiz. Ben Firstname, MiddleName, LastName ve EmailAddress alanlarını aldım.Daha sonra projemize bir adet Gridview ekleyelim ve DataSourceID özelligini ekledigimiz SQLDataSource1 olarak seçelim. Daha sonra sayfamıza bir adet updatepanel ve updatepanelanimation nesnelerini ekleyelim. Benim tasarladıgım sayfa asagıdaki gibidir.Evet simdi Update Panelimiz postback oldugunda çalısacak olan animasyonumuz için gerekli kodları yazalım.Animasyon 1: <cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server" TargetControlID="UpdatePanel1"> <Animations> <OnUpdated> <FadeOut Duration=".5" Fps="20" /> </OnUpdated> <OnUpdating> <FadeIN Duration=".5" Fps="20" /> </OnUpdating> </Animations> </cc1:UpdatePanelAnimationExtender>Farklı bir animasyon daha verebiliriz. Animasyon 2: <cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server" TargetControlID="UpdatePanel1"> <Animations> <OnUpdated> <Pulse Duration=".5" minimumOpacity=".3" maximumOpacity="2"/> </OnUpdated> </Animations> </cc1:UpdatePanelAnimationExtender>Evet simdi testimizi yapalım.2. sayfaya geçiyoruz ve postback devam ederken sizin için yakaladıgım görüntü asagıdak gibidir.Evet biraz daha donuk bir görüntü ile karsımızda. Sizde denediginizde gerçekten çok güzel bir animasyon efekti oldugunu göreceksiniz J Isterseniz diger animasyonları deneyebilirsiniz. Bu makalenin de sonuna geldik, baska bir makalede görüsmek üzere basarı ve iyi günler dilerim. Sem GÖKSUMCP | MCAD.NET | MCTS Örnek Kodlar için mail adresimi kullanabilirsiniz askisem@hotmail.com Kaynaklarhttp://ajax.asp.net