Ilk 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ı kullanacagız. Yeni bir Asp.Net Projesi Açtıktan sonra;
Ilk olarak formumuz üzerine GridView nesnesini yerlestirelim.
Gridinizi ekledikten sonra eger gridimize biraz renk vermek istersek grid üzerinde sag tıklayarak Auto Format ile hazır grid stillerini kullanabiliriz.
Gridimize güzel bir stil belirledikten sonra artık verileri çekebiliriz.
Ilk olarak veritabanı baglantısı için gerekli nesneleri tanımlarız. Burada sqlDataAdapter, dataSet, ve sqlDataConnection nesnelerini kullanacagız. Artık tanımlama islemlerine 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ıgımız için private olarak tanımladık. Eger bir class içerisinde tanımlamak istersek Public olarak tanımlamamız gerekir.
Nesnelerimizi tanımladıktan sonra veritabanı baglantımızı saglayacak baglantı adında bir Sub yazalım. Bu Sub veritabanına baglanmamızı saglayacaktır.
Private Sub SetCnn()
Cnn = New SqlConnection("Data source=localhost; database=northwind; uid=sa; pwd=")
End Sub
Evet veritabanı baglantımız artık hazır. Simdi 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ısarıdan SQLString adında bir parametre ile SQL ifadesini alacak. Bu bize ileride yeni sorgular yapmamıza yarayabilir.
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 sekilde bizi bekliyor. Istersek 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()
Projemizi çalıstırdıktan Sonra verilerimiz asagıdaki gibi görüntülenir.
Projemizin bu kısmını basarı ile tamaladıktan sonra Projemize biraz daha hareket katalım ve projemize bir adet DetailsView Nesnesi ekleyelim.
Nesnemizi ekledikten sonra Grid üzerinde sag tıklayarak Show Smart Tag ı seçerek formumuza CommondBoundlardan "Select" i ekleriz. Böylese seç butonuna tıkladıgımızda aktif kayıt 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 kaydı görüntüleyebiliriz. Daha Sonra grid üzerinden seçecegimiz kayıt detailsView üzerinde görüntülenir.
DetailsView1.DataSource = SelectDataTable(" SELECT top 1 * FROM Products")
DetailsView1.DataBind()
Evet simdi projemizi çalıstırdıktan sonra grid üzerinde tüm kayıtlar görüntülenir fakat, Grid üzerindeki seç butonuna tıkladıgı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 asagı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)
Bu Arada Sayfamızı Html Kısmında küçük bir degisiklik yapacagız. Bunun Nedeni Hem Gereksiz alanların gösterilmesini engellemek, hemde Sayfa dizaynının daha göresel olmasını saglamaktı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ıs olduk. Projemizi çalıstırdıgımızda sectigimiz ürüne ait detaylı bilgi detailsView nesnesinde görüntülenecektir.