ASP.NET 2.0 ile Gelen DetailsView ve GridView Nesneleri
Merhaba arkadaşlar bu makalemizde DetailsView ve GridView nesnelerinin nasıl kullanilacagina bakacagiz.
Ilk olarak gridvView nesnesinden bahsedelim. Gridview nesnesi bir veritabanındaki ilgili tablo içerisindeki kayitlari göstermemize yarar. Biz projemizde SQL Server 2000 içerisindeki Northwind veritabanıni kullanacagiz. Yeni bir Asp.Net Projesi Açtiktan sonra;
Ilk olarak formumuz üzerine GridView nesnesini yerlestirelim.
Gridinizi ekledikten sonra eger gridimize biraz renk vermek istersek grid üzerinde sag tiklayarak Auto Format ile hazir grid stillerini kullanabiliriz.
Gridimize güzel bir stil belirledikten sonra artik verileri çekebiliriz.
Ilk olarak veritabanı baglantisi için gerekli nesneleri tanimlariz. Burada sqlDataAdapter, dataSet, ve sqlDataConnection nesnelerini kullanacagiz. Artik tanimlama işlemlerine geçebiliriz;
Imports System
Imports System.Data
Imports System.Data.SqlClient
Partial Class _Default
Inherits System.Web.UI.Page
Private Cnn As SqlConnection Private Da As SqlDataAdapter Private Ds As DataSet
|
End Class
Not: Nesnelerimizi ayni sayfa içerisinde tanimladığımız için private olarak tanimladik. Eger bir class içerisinde tanimlamak istersek Public olarak tanimlamamiz gerekir.
Nesnelerimizi tanimladiktan sonra veritabanı baglantimizi saglayacak baglanti adinda bir Sub yazalim. Bu Sub veritabanına baglanmamizi saglayacaktir.
Partial Class _Default
Inherits System.Web.UI.Page
Private Cnn As SqlConnection
Private Da As SqlDataAdapter
Private Ds As DataSet
Private Sub SetCnn() Cnn = New SqlConnection("Data source=localhost; database=northwind; uid=sa; pwd=") End Sub |
End Class
Evet veritabanı baglantimiz artik hazir. Simdi geriye verileri databaseden gride çekmek kaliyor. Gridimizde verileri görüntülemek için geriye DataTable döndüren bir function yazabiliriz. Bu Function Disaridan SQLString adinda bir parametre ile SQL ifadesini alacak. Bu bize ileride yeni sorgular yapmamiza yarayabilir.
Imports System
Imports System.Data
Imports System.Data.SqlClient
Partial Class _Default
Inherits System.Web.UI.Page
Private Cnn As SqlConnection
Private Da As SqlDataAdapter
Private Ds As DataSet
Private Sub SetCnn()
Cnn = New SqlConnection("Data source=localhost; database=northwind; uid=sa; pwd=")
End Sub
Private Function SelectDataTable(ByVal SQLString As String) SetCnn() If Not Cnn Is Nothing Then If Cnn.State = ConnectionState.Closed Then Cnn.Open() Da = New SqlDataAdapter(SQLString, Cnn) Ds = New DataSet() Da.Fill(Ds, "table") Return Ds.Tables(0) Else Return Nothing End If End Function |
Functionumuzu yazdiktan sonra artik verilerimiz görüntülenmeye hazir bir sekilde bizi bekliyor. iştersek Form yüklenirken verilerimizi görüntüleyelim.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load GridView1.DataSource = SelectDataTable("SELECT * FROM Products") GridView1.DataBind() End Sub |
Projemizi çalistirdiktan Sonra verilerimiz asagidaki gibi görüntülenir.
Projemizin bu kismini başarı ile tamaladiktan sonra Projemize biraz daha hareket katalim ve projemize bir adet DetailsView Nesnesi ekleyelim.
Nesnemizi ekledikten sonra Grid üzerinde sag tiklayarak Show Smart Tag i seçerek formumuza CommondBoundlardan “Select” i ekleriz. Böylese seç butonuna tikladigimizda aktif kayit seçilecek ve seçtigimiz kayda ait detay bilgiler detailsView nesnesinde görüntülenecek.
Bunun için form yüklenirken (Form_load) Detailsview içerisinde ilk kaydi görüntüleyebiliriz. Daha Sonra grid üzerinden seçecegimiz kayit detailsView üzerinde görüntülenir.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load GridView1.DataSource = SelectDataTable("SELECT * FROM Products") GridView1.DataBind()
DetailsView1.DataSource = SelectDataTable(" SELECT top 1 * FROM Products") DetailsView1.DataBind()
End Sub |
Evet simdi projemizi çalistirdiktan sonra grid üzerinde tüm kayitlar görüntülenir fakat, Grid üzerindeki seç butonuna tikladigimizda seçili kaydin detayinin gelmesi için de kisa bir kod yazmamiz gerekir.
Bunun için GridView in GridView1_SelectedIndexChanged eventi içerisine asagidaki kodu yazmamiz gerekir.
Protected Sub GridView1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles GridView1.SelectedIndexChanged DetailsView1.DataSource = SelectDataTable("SELECT * FROM Products WHERE ProductID=" + GridView1.SelectedRow.Cells(0).Text) DetailsView1.DataBind() End Sub |
Bu Arada Sayfamizi Html Kisminda küçük bir degisiklik yapacagiz. Bunun Nedeni Hem Gereksiz alanlarin gösterilmesini engellemek, hemde Sayfa dizayninin daha göresel olmasini saglamaktir.
<asp:GridView ID="GridView1" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None" Style="z-index: 100; left: 8px; position: absolute; top: 368px" AutoGenerateColumns="False" Width="344px"> <FooterStyle BackColor="Tan" /> <Columns> <asp:BoundField DataField="ProductID" HeaderText="Ürün No:" /> <asp:BoundField DataField="ProductName" HeaderText="Ürün Adi:" /> <asp:CommandField /> <asp:CommandField SelectText="Seç" ShowSelectButton="True" /> </Columns> <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" /> <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" /> <HeaderStyle BackColor="Tan" Font-Bold="True" /> <AlternatingRowStyle BackColor="PaleGoldenrod" /> </asp:GridView> |
Evet artik projemizi tamamlamis olduk. Projemizi çalistirdigimizda sectigimiz ürüne ait detayli bilgi detailsView nesnesinde görüntülenecektir.
Bir sonraki makalemizde görüşmek üzere...
SEM GÖKSU