Bits of .NET

📦 Store Extra Data in HTML Elements

Need to store data without showing? data-* attributes store custom data. Access via JavaScript. No hidden input needed.

📝 Basic Data Attributes

<!-- Store IDs and metadata -->
<div class="product" data-id="123" data-category="electronics" data-price="199.99">
  <h3>Product Name</h3>
  <button class="add-to-cart">Add to Cart</button>
</div>

<!-- Store user data -->
<div class="user-profile" data-user-id="42" data-role="admin">
  <h2>John Doe</h2>
</div>

<!-- Store configuration -->
<div class="widget" data-config='{"theme":"dark","position":"fixed"}'></div>

🎯 Access in JavaScript

<script>
// Get data attribute
const product = document.querySelector('.product');
const productId = product.dataset.id;  // '123'
const category = product.dataset.category;  // 'electronics'
const price = parseFloat(product.dataset.price);  // 199.99

// Set data attribute
product.dataset.discount = '0.15';

// Check if attribute exists
if (product.dataset.hasOwnProperty('category')) {
  console.log('Category:', product.dataset.category);
}

// Click handler
document.querySelector('.add-to-cart').addEventListener('click', (e) => {
  const productDiv = e.target.closest('.product');
  const id = productDiv.dataset.id;
  const price = productDiv.dataset.price;
  addToCart(id, price);
});

// JSON data
const config = JSON.parse(document.querySelector('.widget').dataset.config);
console.log(config.theme);  // 'dark'

// Multiple data attributes with dashes
// data-user-id → dataset.userId (camelCase)
<div data-user-id="42"></div>
const userId = div.dataset.userId;  // '42'
</script>

💡 Use Cases

• Store item IDs for event handlers
• Pass data to JavaScript without AJAX
• Server-side rendering with client-side state
• Configuration for widgets and components
• Analytics tracking (data-track-* )