Anasayfa / Yazılım / ASP.NET / DetailsView Kontrolüne Stil Vermek

DetailsView Kontrolüne Stil Vermek

Bu yazıda DetailsView kontrolünü görselleştirmeye değineceğim. Bu yazı da diğer yazının devamı niteliğinde dolayısı ile öncelikle o yazıdan dosyamızı indirebilirsiniz. Bu arada çalıştığımız veri tabanı NorthWind veri tabanı. Bununda veri tabanı yönetim sisteminizde kurulu olduğunu varsayıyorum.

http://www.ismailgursoy.com.tr/detailsview-kontrolunun-kullanimi/

GridView kontrolünde olduğu gibi DetailsView kontrolünüde style verebilme yolu hemen hemen aynı yoldan geçiyor. Tabi önemli bir farkla, GridView kontrolü otomatik olarak alanlar yani sütun bazında Field üretirken, DetailsView kontrolü satırlar üretir. Dolayısı ile biz şimdi DetailsView kontrolünün AutoGenereateRows özelliğini false yapıp, otomatik satır üretmesini engelliyoruz.

Daha sonra kontrolümde Fields tagleri içinde her bir satır için BoundField alanında DataField özelliğini kullanarak HeaderTezt özelliğinde listelenen verilerin satır başlıklarını düzenleyebiliyorum.

Yine aşağıdaki kodda görebileceğiniz gibi, DetailsView kontrolüme bir CssClass tanımlayabiliyorum. RowStyle, HeaderStyle taglerine ayrı bir CssClass tanımlayabiliyorum.

Şimdi uygulamaya geçip kodları görelim. Öncelikle bir CSS dosyası oluşturdum. Bu CSS dosyası kontrolüme bir takım görsel özellikler kazandırmak için.

h1 
{
	color : #0997EF;
}

.GridMain
{
border-right: gainsboro thin solid;
border-top: gainsboro thin solid;
border-left: gainsboro thin solid;
border-bottom: gainsboro thin solid;
background-color : #333333;
width: 400px;
font-weight : bold;
}

.GridRow
{
background-color : #0997EF;
color: White;
font-family : Calibri, Arial, Sans-Serif;
}
.GridSelectedRow
{
font-family : Calibri, Arial, Sans-Serif;
background-color: #E6E6FA;
}
.GridHeader
{
background-color: #ADD8E6;
font-weight: bold;
text-align: left;
color : #606166;
font-family : Calibri, Arial, Sans-Serif;
}

Css dosyamı yazıyorum (Burada CSS yazma detaylarına girmiyorum, konumuz farklı çünkü)

CSS dosyamı web formuma link şeklide bağlıyorum.

Daha sonra DetailsView kontrolümde AutoGenerateRows özelliğini false yapıp, Css Class tanımlıyorum. Aynı şekilde RowStyle ve HeaderStyle kısmı içinde CssClass tanımlıyorum. Yine her bir satırdaki veri başlığını istediğim şekilde görebilmek için gerekli düzenlemeri yapıyorum. Aşağıda Web formumun tüm kodlarını görebilirsiniz.

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







    


    

Veri Listesi


<%#Eval("FirstName")%> <%#Eval("LastName")%>

Uygulamamızı çalıştırdığımızda listelenen veriler içinden birini seçiniz tuşu ile seçtiğimizde alttaki DetailsView kontrolü artık bir style kazanmış hali ile diğer detay verileri listeler. Aşağıdaki gibi :

Bir sonraki yazı da GridView ve DetailsView eventlerine değineceğim..

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir