Datalist ile Veri Listeleme

Bu yazımızda Datalist kontrolünü kullanarak personelimizi listeleyeceğiz. Bu işlemi tek satır kod yazmadan yapabilirsiniz. ASP.net'in zengin veri kontrol kümesi veritabanı işlemlerini oldukça kolaylaştırıyor. Fakat spesifik çalışmalarda bu kontrollerin alt tarafında geçen kod satırlarını anlayıp düzenlemeler yapmanız gerekebilir. Burada biraz Datalist kontrolünün alt tarafındaki kodlardan da bahsedeceğiz.

DataList kontrolü tek yönlü olarak çalışır, yani tablodan veri okumak için kullanılır. Hem veri okumak hem de yazmak için çift yönlü kontrolleri kullanıyoruz.

Bu örneğimizder PERSONEL isimli bir veritabanı oluşturarak içinde tblPersonel isimli veritabanındaki tablolara resimleri kaydetmek yerine, burada resim dosyasının adını yazdık. Personel resimlerini de kodlarımızın bulunduğu klasörde resimler isimli klasör açarak içine yazdık. Örneğin 1 nolu personelin fotoğrafına resimler\1.jpg diyerek ulaşıyoruz. Burada 1.jpg'yi de tablomuzda RESIM isimli VarChar tipinde bir alan açarak içine yazdık.

Öncelikle PERSONEL veritabanı oluşturarak, aşağıdaki alanları yer alan tblPersonel tablosunu oluşturunuz.

2) Visual Studio'da yeni bir Web Projesi açarak bir tane SqlDataSource, bir tane de DataList kontrolünü WebForm'umuzun üzerine sürekleyip bırakıyoruz.

3) SqlDataSource'un Configure Data Source özelliğine tıklayarak hangi suncuya ve hangi veritabanına bağlanacağımızı seçiyoruz. Eğer SQL veritabanı sunucusu kendi bilgisayarımızda ise nokta (.) değilse sunucunun IP adresini yazıyoruz. Örneğimizde sunucu kendi bilgisayarımızda yer aldığından ConnectionString'i aşağıdaki gibi oluyor.

Data Source=.;Initial Catalog=PERSONEL;Integrated Security=True;

4) Sonraki ekranda tblPersonel tablomuzu ve alanlarını seçiyoruz.

4)

5) DataList kontrolümüzün üzerine gelip üçgen şeklindeki kulakçığa tıklayıp, bağlanacağı DataSource'u seçiyoruz.

6) Burada Auto Format seçneğine tıklarsanız size hazır tablo şablonlarını getirir, istediğiniz rengi seçebilirsiniz. Edit Templates ile verinin nasıl görüneceğini belirleyebilirsiniz. Buraya aşağıdaki gibi 3 kolonlu bir tablo atıp, ilk kolonuna personel resmi, sonraki kolonlara personel bilgileri gelecek şekilde ayarladım.

7) F5 kısayol tuşu ile çalıştırdığınızda aşağıdaki gibi fotoğraflı şekilde personel listesi gelecektir.

Sistemin ürettiği kodlar aşağıdaki gibi olacaktır.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridPersonel.aspx.cs" Inherits="GridPersonel" %>

<!DOCTYPE html>

.auto-style1 {

width: 157px;

}

.auto-style2 {

width: 90px;

}

.auto-style3 {

width: 90px;

height: 23px;

}

.auto-style4 {

height: 23px;

}

</style>

</head>

<body>

<div>

<asp:DataList ID="DataList1" align="center" runat="server" CellPadding="4" DataKeyField="personelID" DataSourceID="SqlDataSource1" ForeColor="#333333" Width="686px" OnSelectedIndexChanged="DataList1_SelectedIndexChanged" CaptionAlign="Left">

PERSONEL LİSTESİ

</HeaderTemplate>

<tr>

<img alt="" src="resimler/<%# Eval("RESIM") %>" width="150" />

<strong>No</strong>:

<asp:Label ID="personelIDLabel" runat="server" Text='<%# Eval("personelID") %>' />

</td>

<td class="auto-style2"><strong>Tc Kimlik</strong>  </td>

<td>

<asp:Label ID="TCKIMLIKNOLabel" runat="server" Text='<%# Eval("TCKIMLIKNO") %>' />

</td>

</tr>

<tr>

<td>

<asp:Label ID="ADILabel" runat="server" Text='<%# Eval("ADI") %>' />

</td>

</tr>

<tr>

<td class="auto-style2"><strong>Soyadı</strong> </td>

<td>

<asp:Label ID="SOYADILabel" runat="server" Text='<%# Eval("SOYADI") %>' />

</td>

</tr>

<tr>

<td class="auto-style2"><strong>Telefon</strong> </td>

<td>

<asp:Label ID="TELEFONLabel" runat="server" Text='<%# Eval("TELEFON") %>' />

</td>

</tr>

<tr>

<td>

<asp:Label ID="MAASLabel" runat="server" Text='<%# Eval("MAAS") %>' />

</td>

</tr>

<tr>

<td>

<asp:Label ID="SEMTLabel" runat="server" Text='<%# Eval("SEMT") %>' />

</td>

</tr>

<tr>

<td class="auto-style2"><strong>Şehir</strong> </td>

<td>

<asp:Label ID="SEHIRLabel" runat="server" Text='<%# Eval("SEHIR") %>' />

</td>

</tr>

<tr>

<td class="auto-style3"><strong>Giriş Tarihi</strong></td>

<asp:Label ID="GIRISTARIHILabel" runat="server" Text='<%# Eval("GIRISTARIHI") %>' />

</td>

</tr>

<tr>

<td class="auto-style2"><strong>Çıkış Tarihi</strong> </td>

<td>

<asp:Label ID="CIKISTARIHILabel" runat="server" Text='<%# Eval("CIKISTARIHI") %>' />

</td>

</tr>

<tr>

<td class="auto-style2"><strong>E-posta</strong></td>

<asp:Label ID="EMAILLabel" runat="server" Text='<%# Eval("EMAIL") %>' />

</td>

</tr>

<tr>

<td class="auto-style2"><strong>Adres</strong></td>

<asp:Label ID="ADRESLabel" runat="server" Text='<%# Eval("ADRES") %>' />

</td>

</tr>

</table>

<br />

</ItemTemplate>

</asp:DataList>

</div>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:PERSONELConnectionString %>" SelectCommand="SELECT * FROM [tblPersonel]"></asp:SqlDataSource>

</form>

</body>

</html>

Mutlu kodlamalar,
Şubat 2016,
Oğuzhan TAŞ