ASP.NET 2.0 ile Gelen DetailsView ve GridView Nesneleri (tr-TR)

ASP.NET 2.0 ile Gelen DetailsView ve GridView Nesneleri (tr-TR)

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.

 

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

 

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

    End Sub

 

 

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.

 

 

  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 ç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)

        DetailsView1.DataBind()

    End Sub

 

 

 

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.

Leave a Comment
  • Please add 8 and 3 and type the answer here:
  • Post
Wiki - Revision Comment List(Revision Comment)
Sort by: Published Date | Most Recent | Most Useful
Comments
Page 1 of 1 (1 items)
Wikis - Comment List
Sort by: Published Date | Most Recent | Most Useful
Posting comments is temporarily disabled until 10:00am PST on Saturday, December 14th. Thank you for your patience.
Comments
  • Fernando Lugão Veltem edited Original. Comment: alter tags and title

Page 1 of 1 (1 items)