Ana Sayfa Microsoft .NETC# HTML5 Data Attribute

HTML5 Data Attribute

by Sinan BOZKUŞ
2.672 kez okundu

Bu yazımca kısaca HTML5 ile birlikte gelen data attritube kullanımından bahsedeceğim.

Bu attribute sayesinde HTML elemanları üzerinde (div, button, input vb.) istediğiniz bir veriyi(datayı) tutabiliyorsunuz.

Data atrritube kullanımı şu şekildedir.

data-data_adi=”data_degeri

“data-” yazımından dan sonra oluşturacağınız data attribute’e istediğiniz bir ismi verebilir ve içerisine string formatında istediğiniz veriyi doldurabilirsiniz. Bir html elemanı üzerinde istediğiniz kadar data attribute kullanabilirsiniz. Tanımlama yaparken büyük harf kullanmamaya özen gösteriniz, yazım standartlarına aykırı ve bazen çalışmayabiliyor.

Örnek vermek gerekirse bir ürün listemiz var diyelim. Site ziyaretçileri “Satın Al” butonuna tıkladıklarında satın alma işlemi gerçekleşecek.

[code]
<table>
<tr>
<th>Urun Adı></th>
<th>İşlem</th>
</tr>
<tr>
<td>Microsoft Lumia 640XL</td>
<td><input type="button" value="Satın Al" data-urunid="14"></td>
</tr>
<tr>
<td>LG G4</td>
<td><input type="button" value="Satın Al" data-urunid="15"></td>
</tr>
<tr>
<td>Apple iPhone 6</td>
<td><input type="button" value="Satın Al" data-urunid="16"></td>
</tr>
</table>
[/code]

Yukarıdaki gibi bir yapıda müşterilerimiz “Satın Al” butonuna bastıklarında hangi ürünü satın almak istediklerini anlamak için ilgili ürünün ID değerine ulaşmam gerekecek. Örnekte olduğu gibi bunu data-urunid alanını oluşturarak tuttum.

Şimdi jQuery kullanarak data nesnesine nasıl ulaşabileceğime bakalım.

[javascript]
var urunID= $(this).data(‘urunid’); // veya $(this).attr(‘data-urunid’);
[/javascript]

Sadece jQuery kullanarak değil direk olarak javascript ile de hatta ilgili buttonlara runat=”server” vererek C# tarafında da bu data attributelerine ulaşabilirsiniz.

Bunlara da bakmak isteyebilirsiniz

2 yorum

Özlem 29 Temmuz 2015 - 09:47

Merhaba Sinan Bey,
Öncelikle verdiğiniz bilgiler için teşekkür ederim. Makaleniz doğrultusunda işlem yapmaya çalışıyorum ancak uyarı penceresi açılmasına rağmen atadığım bilgi yansımıyor. Yardımcı olursanız sevinirim.

function ozlem() {
var aa = $(this).attr(‘data-yazaradi’);
var bb = $(this).attr(‘data-yazarid’);
alert(aa);
};

Yanıtla
Sinan BOZKUŞ 05 Ağustos 2015 - 13:36

Mesajınızı geç gördüm, kusura bakmayın.

Projenize jQuery dahil ettiniz mi ?
Ayrıca yazdığınız kodlar document ready içerisinde mi bulunuyor ?

Bu şekilde yaptıysanız çalışmaması için bir neden yok.

Yanıtla

Bir Yorum Bırakın