Textarea Tag Helper – ASP.NET – MVC

Genel text input için, HTML spefikasyonu bize iki tür öğe sunar: Genel “text” türünden daha egzotik radio ve check butonlarına kadar her türlü input’u işleyen INPUT öğesi. Text Input, kısa ve tek satırlı metin girişi için harika olsa da, daha uzun metinler için tasarlanmamıştır. Bunun için Textarea elementimiz bulunmaktadır. Genellikle normal bir text input gibi görünür, ancak varsayılan olarak birden çok satıra yayılabilir ve kaydırma çubukları desteğiyle birlikte gelir. Başka bir deyişle, daha uzun metinler için oluşturulmuştur. ASP.NET Core, tıpkı Input öğesinde olduğu gibi, Textarea içinde güzel bir Tag Helper ile birlikte gelir.

asp-for Özelliği

Diğer Tag Helper’ların birçoğu gibi, Modele bağlantı “for” özelliği ile oluşturulur ve diğer Tag Helper özelliklerinde olduğu gibi bir önek gerektirir. Bunu özellikle değiştirmediğiniz sürece, bu önek genellikle “asp” dir. Diğer bir deyişle, Textarea etkinleştirilmiş bir Tag Helper, en basit haliyle şöyle görünür.

<textarea asp-for="Description"></textarea>

Bu size çok temel bir Textarea verecektir – sonuçta ortaya çıkan HTML şöyle görünür.

<textarea id="Description" name="Description"></textarea>

Boyut veya başka bir şey belirtilmediğinden, oluşturulan boyuta tarayıcı tarafından karar verilecektir. Bunun üzerinde daha fazla kontrol istiyorsanız ve muhtemelen bunu istiyorsanız, ilgili HTML özelliklerini kullanmanız gerekecektir. ya eski tarz “col” ve “row” ya da CSS kullanarak Style özelliği aracılığıyla yapacaksınız.

<textarea asp-for="Description" cols="25" rows="3"></textarea>

<textarea asp-for="Description" style="height: 40px; width: 
200px;"></textarea>

Minimum ve Maksimum Uzunlukları Kontrol Etme

Hem Input hem de Textarea HTML öğeleri, öğede izin verilen maksimum karakter miktarını kontrol etmek için bir maxlength niteliği belirlemenize olanak tanır. Ancak, Tag Helper kullanırken, işaretlemede bunu belirtmeye gerek yoktur – bunun yerine doğrudan Model üzerinde tanımlayın. Bu, bir veritabanına kaydetmeden önce doğrulama vb. dahil olmak üzere, bu özelliği kullandığınız her yerde kullanılmak üzere yalnızca tek bir yerde tanımlamanıza olanak tanır. Açıklama özelliği için bir MaxLength tanımladığımız bir Movie sınıfı örneği:

public class Movie
{
    [MaxLength(50)]
    public string Title { get; set; }
    
    public DateTime ReleaseDate { get; set; }
    
    [MaxLength(250)]
    public string Description { get; set; }
}

Bu Data Annotation artık Modeliniz için HTML oluştururken kullanılmaktadır – başka bir deyişle, aşağıdaki Tag Helpes tabanlı işaretleme, MaxLength Data Annotation otomatik olarak kullanacaktır.

<input asp-for="Title" /><br />
<textarea asp-for="Description"></textarea>