İlk olarak gridvView nesnesinden bahsedelim. Gridview nesnesi bir veritabanındaki ilgili tablo içerisindeki kayıtları göstermemize yarar. Biz projemizde SQL Server 2000 içerisindeki Northwind veritabanını kullanacağız. Yeni bir Asp.Net Projesi Açtıktan sonra;
İlk olarak formumuz üzerine GridView nesnesini yerleştirelim.
Gridinizi ekledikten sonra eğer gridimize biraz renk vermek istersek grid üzerinde sağ tıklayarak Auto Format ile hazır grid stillerini kullanabiliriz.
Gridimize güzel bir stil belirledikten sonra artık verileri çekebiliriz.
İlk olarak veritabanı bağlantısı için gerekli nesneleri tanımlarız. Burada sqlDataAdapter, dataSet, ve sqlDataConnection nesnelerini kullanacağız. Artık tanımlama 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 aynı sayfa içerisinde tanımladığımız için private olarak tanımladık. Eğer bir class içerisinde tanımlamak istersek Public olarak tanımlamamız gerekir.
Nesnelerimizi tanımladıktan sonra veritabanı bağlantımızı sağlayacak bağlantı adında bir Sub yazalım. Bu Sub veritabanına bağlanmamızı sağlayacaktır.
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ı bağlantımız artık hazır. Şimdi geriye verileri databaseden gride çekmek kalıyor. Gridimizde verileri görüntülemek için geriye DataTable döndüren bir function yazabiliriz. Bu Function Dışarıdan SQLString adında bir parametre ile SQL ifadesini alacak. Bu bize ileride yeni sorgular yapmamıza 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 yazdıktan sonra artık verilerimiz görüntülenmeye hazır bir şekilde bizi bekliyor. İstersek 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 çalıştırdıktan Sonra verilerimiz aşağıdaki gibi görüntülenir.
Projemizin bu kısmını başarı ile tamaladıktan sonra Projemize biraz daha hareket katalım ve projemize bir adet DetailsView Nesnesi ekleyelim.
Nesnemizi ekledikten sonra Grid üzerinde sağ tıklayarak Show Smart Tag ı seçerek formumuza CommondBoundlardan “Select” i ekleriz. Böylese seç butonuna tıkladığımızda aktif kayıt seçilecek ve seçtiğimiz kayda ait detay bilgiler detailsView nesnesinde görüntülenecek.
Bunun için form yüklenirken (Form_load) Detailsview içerisinde ilk kaydı görüntüleyebiliriz. Daha Sonra grid üzerinden seçeceğimiz kayıt 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 şimdi projemizi çalıştırdıktan sonra grid üzerinde tüm kayıtlar görüntülenir fakat, Grid üzerindeki seç butonuna tıkladığımızda seçili kaydın detayının gelmesi için de kısa bir kod yazmamız gerekir.
Bunun için GridView in GridView1_SelectedIndexChanged eventi içerisine aşağıdaki kodu yazmamız 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 Sayfamızı Html Kısmında küçük bir değişiklik yapacağız. Bunun Nedeni Hem Gereksiz alanların gösterilmesini engellemek, hemde Sayfa dizaynının daha göresel olmasını sağlamaktır.
<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 Adı:" />
<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 artık projemizi tamamlamış olduk. Projemizi çalıştırdığımızda sectiğimiz ürüne ait detaylı bilgi detailsView nesnesinde görüntülenecektir.
Bir sonraki makalemizde görüşmek üzere...