آموزش HTML Helper در ASP.NET CORE

HTML Helper ها در ASP.NET Core ابزارهای قدرتمندی برای تولید کدهای HTML به صورت ساده و تمیز هستند. با استفاده از این ابزارها، می‌توان فرآیند تولید فرم‌ها و المان‌های HTML را تسهیل کرد و از قابلیت‌های قوی زبان C# و دیتا مدل‌ها استفاده کرد. در این بخش قصد داریم، به آموزش HTML Helper در ASP.NET CORE بپردازیم.

HTML Helper چیست ؟

HTML Helper ابزاری هستند که به شما کمک می‌کنند تا به راحتی و با کمترین کدنویسی، محتوای HTML تولید کنید. این ابزارها در کدهای Razor استفاده می‌شوند و باعث می‌شوند تا نوشتن کدهای HTML در ویوها (Views) ساده‌تر و قابل‌خواندن‌تر شود.

در کل میتوان گفت HTML Helper ها ابزار هستند و توانایی های زیر را دارند:

• ایجاد محتوای HTML کمترین کدنویسی
• ساده‌تر و قابل‌خواندن‌تر محتوای HTML
• تسهیل تولید فرم‌ها و المان‌های HTML
• بایند کردن مدل به View

چرا HTML Helper استفاده کنیم؟

HTML Helperها در ASP.NET Core ابزارهای قدرتمندی هستند که به توسعه‌دهندگان کمک می‌کنند تا کدهای HTML را به صورت ساده‌تر، خواناتر و با احتمال خطای کمتر بنویسند. این ابزارها علاوه بر کاهش زمان توسعه و افزایش بهره‌وری، قابلیت‌هایی مانند استفاده از تایپ‌سیستم قوی C# و اعتبارسنجی خودکار را نیز فراهم می‌کنند. با استفاده از HTML Helperها، می‌توانید کدهای قابل نگهداری‌تر و با کیفیت‌تری تولید کنید.

مزایای استفاده

• افزایش خوانایی و نگهداری کد: HTML Helperها کدهای HTML را به صورت تمیز و مختصر تولید می‌کنند که باعث می‌شود کدهای شما قابل‌خواندن‌تر و نگهداری آسان‌تر باشد. به جای نوشتن کدهای طولانی و پیچیده HTML، می‌توانید از متدهای کوتاه و ساده HTML Helper استفاده کنید.

• کاهش خطاها : HTML Helperها به شما کمک می‌کنند تا خطاهای تایپی و نگارشی را کاهش دهید. با استفاده از این ابزارها، نیازی به نوشتن دستی کدهای HTML ندارید و این باعث می‌شود که احتمال بروز خطا در کدهای HTML کاهش یابد.

• استفاده از تایپ‌سیستم قوی : C# استفاده از HTML Helperهای مبتنی بر مدل (Model-based HTML Helpers) به شما این امکان را می‌دهد که از تایپ‌سیستم قوی زبان C# بهره‌برداری کنید. این امر باعث می‌شود تا اشتباهات ناشی از تایپ و نوع داده‌ها به حداقل برسد.

• اعتبارسنجی خودکار و هماهنگ با مدل : HTML Helperها به خوبی با مدل‌ها و اعتبارسنجی‌های تعریف شده در آن‌ها هماهنگ هستند. برای مثال، اگر برای یک فیلد در مدل اعتبارسنجی تعریف کرده باشید، HTML Helperها به طور خودکار اعتبارسنجی‌ها را در تگ‌های HTML مربوطه اعمال می‌کنند.

• استفاده از تگ‌هیا پیچیده‌تر با سهولت بیشتر : با استفاده از HTML Helperها می‌توان تگ‌های HTML پیچیده را به سادگی ایجاد کرد. به جای نوشتن دستی کدهای HTML برای فرم‌های پیچیده، می‌توانید از HTML Helperهای مناسب استفاده کنید که کار شما را ساده‌تر می‌کند.

• امکان سفارشی‌سازی آسان : می‌توانید HTML Helperهای سفارشی خود را ایجاد کنید و از آن‌ها در پروژه‌های مختلف استفاده کنید. این قابلیت به شما امکان می‌دهد تا کدهای تکراری و قابل استفاده مجدد ایجاد کنید.

معرفی Html.TextBox@

این Helper برای ما یک TextBox ایجاد میکند و ۳ ورودی دریافت میکند.

• ورودی شماره یک : نامی برای اتربیوت Id و Name میگیرد
• ورودی شماره دو : مقدار Value را میگیرد
• ورودی شماره سه : در صورت نیاز میتوان به Helper خود یک کلاس Css اضافه کنیم. یا بهتر است بگوییم اتربیوت های لازم را اضافه کنیم.

نحوه تعریف

@Html.TextBox("txt", "10", new {@class = "MyTxt"})

خروجی

<input class="MyTxt" id="txt" name="txt" type="text" value="10">

از انجایی که Value هم یک اتربیوت است میتوان به صورت زیر هم آن را اضافه کرد

@Html.TextBox("txt","", new {@class = "MyTxt" , @Value = "10"})

همچنین میتوان به تعداد مورد نیاز به TextBox اتربیوت اضافه کنیم

@Html.TextBox("txt","", new {@class = "MyTxt" , @Value = "10" , MyAttr="test"})

معرفی Html.Hidden@

این Helper برای ما یک Input از جنس Hidden ایجاد میکند، دقیقا مانند TextBox است فقط از جنس Hidden است و ۳ ورودی دریافت میکند.

• ورودی شماره یک : نامی برای اتربیوت Id و Name میگیرد
• ورودی شماره دو : مقدار Value را میگیرد
• ورودی شماره سه : در صورت نیاز میتوان اتربیوت های لازم را اضافه کنیم.

نحوه تعریف

@Html.Hidden("txtHidden", "value", new { myattr = "test" })

خروجی

<input id="txtHidden" myattr="test" name="txtHidden" type="hidden" value="value">

معرفی Html.Password@

این Helper برای ما یک TextBox ایجاد میکند از نوع Password و ۳ ورودی دریافت میکند.

• ورودی شماره یک : نامی برای Id و Name میگیرد
• ورودی شماره دو : مقدار Value را میگیرد
• ورودی شماره سه : در صورت نیاز میتوان به Helper خود یک کلاس Css اضافه کنیم. یا بهتر است بگوییم اتربیوت های لازم را اضافه کنیم.

نحوه تعریف

@Html.Password("txt-pass", "",new { @class="mycss"})

خروجی

<input class="mycss" id="txt-pass" name="txt-pass" type="password" value="">

معرفی Html.TextArea@

این Helper برای ما یک TextArea ایجاد میکند و ۳ ورودی دریافت میکند.

• ورودی شماره یک : نامی برای Id و Name میگیرد
• ورودی شماره دو : مقدار Value را میگیرد
• ورودی شماره سه : در صورت نیاز میتوان به Helper خود یک کلاس Css اضافه کنیم. یا بهتر است بگوییم اتربیوت های لازم را اضافه کنیم.

نحوه تعریف

@Html.TextArea("txt-area", "", new {@class = "mycss" })

خروجی

<textarea class="mycss" cols="20" id="txt-area" name="txt-area" rows="2"></textarea>

معرفی Html.CheckBox@

این Helper برای ما یک CheckBox ایجاد میکند و ۲ ورودی دریافت میکند.

• ورودی شماره یک : نامی برای Id و Name میگیرد
• ورودی شماره دو : مقدار True و یا False میگیرد، که برای مدیریت اتربیوت checked استفاده میشود.

نحوه تعریف

<h5>
    @Html.CheckBox("men", true)
    <span>Men</span>
</h5>
<h5>
    @Html.CheckBox("women", false)
    <span>Women</span>
</h5>

خروجی

معرفی Html.CheckBox@

<input checked="checked" id="men" name="men" type="checkbox" value="true">
<input id="women" name="women" type="checkbox" value="true">

معرفی Html.RadioButton@

با استفاده از اینHelper میتوانیم یک و یا چندین RadioButton ایجاد کنیم و ۴ ورودی دریافت میکند.

• ورودی شماره یک : نامی برای اتربیوت Name میگیرد، این ورودی برای اینکه چندین RadioButton را به هم مرتبط کنیم مورد استفاده قرار میگیرد.
• ورودی شماره دو : مقدار Value را میگیرد.
• ورودی شماره سه : مقدار True و یا False میگیرد، که برای مدیریت اتربیوت checked استفاده میشود.
• ورودی شماره چهار: در صورت نیاز میتوان به Helper خود یک کلاس Css اضافه کنیم. یا بهتر است بگوییم اتربیوت های لازم را اضافه کنیم.

نحوه تعریف

@Html.RadioButton("Gender", "Male", false, new { id = "male" })
<span>Male</span>
@Html.RadioButton("Gender", "Female", true, new { id = "female" })
<span>Female</span>

خروجی

معرفی Html.RadioButton@

<input id="male" name="Gender" type="radio" value="Male">
<span>Male</span>
<input checked="checked" id="female" name="Gender" type="radio" value="Female">
<span>Female</span>

معرفی Html.DropDownList@

با استفاده از اینHelper میتوانیم یک DropDownList ایجاد کنیم و ۴ ورودی دریافت میکند.

• ورودی شماره یک : نامی برای اتربیوت های Name و Id میگیرد.
• ورودی شماره دو : یک لیست از مواردی که قرار است نمایش دهد میگیرد. لیست توسط  SelectList گرفته میشود، SelectList دو ورودی میتواند بگیرد یکی نام لیستی است که قرار است نمایش دهد و اجباری است و دومین مقداری که میگیرد اختیاری است و برای مشخص کردن اتربیوت selected است، و اکر نام یکی از ایتم های لیست را در این جا وارد کنیم، آن ایتم در DropDownList سلکت میشود.
• ورودی شماره سه : یک لیبل میگیرد که در بالای DropDownList نمایش دهد. مثلا میتوانیم عبارت “انتخاب کنید” را وارد کنید.
• ورودی شماره چهار: در صورت نیاز میتوان به Helper خود یک کلاس Css اضافه کنیم. یا بهتر است بگوییم اتربیوت های لازم را اضافه کنیم.

نحوه تعریف

@{
    List<string> mylist = new List<string>
    {
        "html",
        "php",
        "java",
        "asp.net"
    };
}
@Html.DropDownList("MyDropDownList", new SelectList(mylist), "Select programming language", new { @class = "MyCss" })

خروجی

معرفی Html.DropDownList@

<select class="MyCss" id="MyDropDownList" name="MyDropDownList">
    <option value="">Select programming language</option>
    <option>html</option>
    <option>php</option>
    <option>java</option>
    <option>asp.net</option>
</select>

حال فرض کنید میخواهیم DropDownList ما وقتی صفحه لود میشود روی آیتم php سلکت شده باشد.

@Html.DropDownList("MyDropDownList", new SelectList(mylist,"php"), "Select programming language", new { @class = "MyCss" })

معرفی Html.ListBox@

با استفاده از اینHelper میتوانیم یک ListBox ایجاد کنیم و ۳ ورودی دریافت میکند.

• ورودی شماره یک : نامی برای اتربیوت های Name و Id میگیرد.
• ورودی شماره دو : یک لیست از مواردی که قرار است نمایش دهد میگیرد. البته باید از جنس SelectListItem باشد.
• ورودی شماره سه : در صورت نیاز میتوان به Helper خود یک کلاس Css اضافه کنیم. یا بهتر است بگوییم اتربیوت های لازم را اضافه کنیم.

نحوه تعریف

@{
    List<SelectListItem> mylist = new List<SelectListItem>
    {
        new SelectListItem{ Text="ASP.NET",Value="1" },
        new SelectListItem{ Text="php",Value="2" },
        new SelectListItem{ Text="java",Value="3" },
        new SelectListItem{ Text="html",Value="4" },
    };
}
@Html.ListBox("MyListBox", new SelectList(mylist, "Value", "Text"), new { @class = "MyCss" })

خروجی

معرفی Html.ListBox@

<select class="MyCss" id="MyListBox" multiple="multiple" name="MyListBox">
    <option value="1">ASP.NET</option>
    <option value="2">php</option>
    <option value="3">java</option>
    <option value="4">html</option>
</select>

معرفی Html.ActionLink@

با استفاده از اینHelper میتوانیم یک لینک ایجاد کنیم و ۵ ورودی دریافت میکند.

• ورودی شماره یک : نامی برای نمایش لینک میگیرد.
• ورودی شماره دو : نام اکشن مقصد را دریافت میکند.
• ورودی شماره سه : نام کنترلر مقصد را دریافت میکند.
• ورودی شماره چهار : پارامتر های ارسالی را دریافت میکند و به صورت querystring منتقل میکند.
• ورودی شماره پنج : در صورت نیاز میتوان به Helper خود یک کلاس Css اضافه کنیم. یا بهتر است بگوییم اتربیوت های لازم را اضافه کنیم.

نحوه تعریف

@Html.ActionLink("link text", "Delete","Home", new { id = 11 }, new { @Class = "mycss" })

خروجی

<a class="mycss" href="/Home/Delete/11">link text</a>

معرفی Html.BeginForm@

با استفاده از اینHelper میتوانیم یک فرم ایجاد کنیم و ۳ ورودی دریافت میکند.

• ورودی شماره اول : نام اکشن مقصد را دریافت میکند.
• ورودی شماره دوم : نام کنترلر مقصد را دریافت میکند.
• ورودی شماره سوم : متد ارسال فرم را دریافت میکند یعنی Post یا Get.
• ورودی شماره چهارم : در صورت نیاز اتربیوت های موردنیاز مثل enctype و … را میگیرد.

نحوه تعریف

@using (Html.BeginForm("Create", "Users", FormMethod.Post, new {enctype="multipart/form-data"}))
{
    // Content Form
}

خروجی

<form action="/Users/Create" method="Post" enctype="multipart/form-data">
    // Content Form
</form>

معرفی Html.Label@

با استفاده از اینHelper میتوانیم یک Label ایجاد کنیم و ۲ ورودی دریافت میکند.

• ورودی شماره یک : مقدار اتربیوت for و متنی که نمایش داده میشود را میگیرد.
• ورودی شماره دو : در صورت نیاز میتوان به Helper خود یک کلاس Css اضافه کنیم. یا بهتر است بگوییم اتربیوت های لازم را اضافه کنیم.

نحوه تعریف

@Html.Label("StudentName", new { @class = "MyCss" })

خروجی

<label class="MyCss" for="StudentName">StudentName</label>

معرفی Html.DisplayNameFor@ و Html.DisplayFor@

با استفاده از این دو Helper میتوانیم از دیتابیس نام فیلد و خود فیلد را بگیریم مثلا در دیتابیس ما فیلدی به نام شماره تلفن داریم، که نام فیلد که همان شماره تلفن است توسط Html.DisplayNameFor@ نمایش داده میشود و مقدار آن که مثلا ۰۹۱۲۱۴۸۶۷۷۰ است توسط Html.DisplayFor@ نمایش داده میشود.

برای استفاده از هلپر Html.DisplayNameFor@ ابتدا باید در مدلی که ایجاد کردیم از دیتاانوتیشن [Display(Name = “شماره تلفن”)] استفاده کنیم.

افزودن Data Annotations

[Display(Name ="شماره تلفن")]
public string MobileNumber { get; set; }

نحوه تعریف

@Html.DisplayNameFor(model => model.MobileNumber)
@Html.DisplayFor(modelItem => item.MobileNumber)

معرفی Html.EditorFor@

یکی از قدرتمند ترین Helper های موجود در MVC میباشد، که به صورت هوشمند کار میکند وقتی به این Helper مدل داده میشود، از نوع داده آن تشخیص میدهد چه نوع Input ای بسازد.

@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })

معرفی Html.ValidationMessage@

فرض کنید یک فرم لاگین ساخته ایم و کاربر رمز عبور را اشتباه میزند. برای نمایش پیام خطا میتوانیم از این هلپر استفاده کنیم. ورودی مهم آن یک نام است که نام آن را در این مثال Login است و با استفاده از همین نام پیام خطا را ارسال میکنیم.

@Html.ValidationMessage("login", new { @class = "text-danger" })

نحوه ارسال پیام خطا

ModelState.AddModelError("login", "رمز عبور یا نام کاربری صحیح نمیباشد");