Web Programlama - 3. Sınıf - 6. Ünite Özet

Ders Notları

Etiket Yardımcıları (Tag Helpers)

Web Programlama 2 - Ünite 6: HTML ve C# Arasındaki Modern Köprü

Tag Helper Nedir?

ASP.NET Core ile gelen Tag Helper yapısı, sunucu taraflı kodların (C#) standart HTML etiketleri gibi görünmesini ve davranmasını sağlar. Eski @Html.TextBoxFor yapısının yerini alan, tasarımcı dostu modern bir mimaridir.

Eski Yöntem (HTML Helper)

@Html.TextBoxFor(m => m.Ad, new { @class = "form-control" })

HTML yapısına aykırı, okuması zor.

Yeni Yöntem (Tag Helper)

<input asp-for="Ad" class="form-control" />

Standart HTML gibi, temiz ve güvenli.

Kurulum Notu: Kullanmak için _ViewImports.cshtml dosyasına şu satır eklenmelidir:
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

2

Yerleşik (Built-in) Tag Helper Türleri

A. Anchor (Bağlantı) Tag Helper

Statik URL yerine, Controller ve Action isimlerine göre dinamik link üretir.

// Razor Kodu

<a asp-controller="Ogrenci" asp-action="Kaydet">
  Kaydet
</a>

// HTML Çıktısı (Browser)

<a href="/Ogrenci/Kaydet">
  Kaydet
</a>

B. Form Tag Helper

Güvenlik

Otomatik olarak CSRF (Siteler Arası İstek Sahteciliği) koruması ekler.

<!-- Çıktıda otomatik eklenen gizli güvenlik anahtarı -->
<input name="__RequestVerificationToken" type="hidden" value="..." />

C. Input Tag Helper (Akıllı Tip Tahmini)

Modeldeki C# veri tipine bakarak HTML type özelliğini otomatik belirler.

Model: String

public string Ad { get; set; }
-------------------------
<input asp-for="Ad" />
-> type="text"

Model: Boolean

public bool Onay { get; set; }
-------------------------
<input asp-for="Onay" />
-> type="checkbox"

D. Label Tag Helper

Data Annotations gücünü kullanır. Modeldeki [Display] özelliğini okur.

[Display(Name="Öğrenci Adı")]
public string Ad { get; set; }

<label asp-for="Ad"></label>
-> <label>Öğrenci Adı</label>

3

Scaffolding (İskele Kurma)

Otomatik Kod Üretimi

Profesyonel geliştirmede CRUD (Ekle, Oku, Güncelle, Sil) sayfalarını tek tek yazmak yerine, Scaffolding kullanılır. Visual Studio, modelinize bakar ve tüm Tag Helper'ları içeren hazır View sayfaları üretir.

Model Seç

Şablon Seç

Hazır View

Web Programlama 2 © 2024

Ünite 6: Etiket Yardımcıları (Tag Helper) - Akademik Ders Notları