HTML Helper ها در ASP.NET Core ابزارهای قدرتمندی برای تولید کدهای HTML به صورت ساده و تمیز هستند. با استفاده از این ابزارها، میتوان فرآیند تولید فرمها و المانهای HTML را تسهیل کرد و از قابلیتهای قوی زبان C# و دیتا مدلها استفاده کرد. در این بخش قصد داریم، به آموزش HTML Helper در ASP.NET CORE بپردازیم.
HTML Helper ابزاری هستند که به شما کمک میکنند تا به راحتی و با کمترین کدنویسی، محتوای HTML تولید کنید. این ابزارها در کدهای Razor استفاده میشوند و باعث میشوند تا نوشتن کدهای HTML در ویوها (Views) سادهتر و قابلخواندنتر شود.
در کل میتوان گفت 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های سفارشی خود را ایجاد کنید و از آنها در پروژههای مختلف استفاده کنید. این قابلیت به شما امکان میدهد تا کدهای تکراری و قابل استفاده مجدد ایجاد کنید.
این Helper برای ما یک TextBox ایجاد میکند و ۳ ورودی دریافت میکند.
نحوه تعریف
@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"})
این Helper برای ما یک Input از جنس Hidden ایجاد میکند، دقیقا مانند TextBox است فقط از جنس Hidden است و ۳ ورودی دریافت میکند.
نحوه تعریف
@Html.Hidden("txtHidden", "value", new { myattr = "test" })
خروجی
<input id="txtHidden" myattr="test" name="txtHidden" type="hidden" value="value">
این Helper برای ما یک TextBox ایجاد میکند از نوع Password و ۳ ورودی دریافت میکند.
نحوه تعریف
@Html.Password("txt-pass", "",new { @class="mycss"})
خروجی
<input class="mycss" id="txt-pass" name="txt-pass" type="password" value="">
این Helper برای ما یک TextArea ایجاد میکند و ۳ ورودی دریافت میکند.
نحوه تعریف
@Html.TextArea("txt-area", "", new {@class = "mycss" })
خروجی
<textarea class="mycss" cols="20" id="txt-area" name="txt-area" rows="2"></textarea>
این Helper برای ما یک CheckBox ایجاد میکند و ۲ ورودی دریافت میکند.
نحوه تعریف
<h5>
@Html.CheckBox("men", true)
<span>Men</span>
</h5>
<h5>
@Html.CheckBox("women", false)
<span>Women</span>
</h5>
خروجی
<input checked="checked" id="men" name="men" type="checkbox" value="true">
<input id="women" name="women" type="checkbox" value="true">
با استفاده از اینHelper میتوانیم یک و یا چندین RadioButton ایجاد کنیم و ۴ ورودی دریافت میکند.
نحوه تعریف
@Html.RadioButton("Gender", "Male", false, new { id = "male" })
<span>Male</span>
@Html.RadioButton("Gender", "Female", true, new { id = "female" })
<span>Female</span>
خروجی
<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>
با استفاده از اینHelper میتوانیم یک DropDownList ایجاد کنیم و ۴ ورودی دریافت میکند.
نحوه تعریف
@{
List<string> mylist = new List<string>
{
"html",
"php",
"java",
"asp.net"
};
}
@Html.DropDownList("MyDropDownList", new SelectList(mylist), "Select programming language", new { @class = "MyCss" })
خروجی
<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" })
با استفاده از اینHelper میتوانیم یک ListBox ایجاد کنیم و ۳ ورودی دریافت میکند.
نحوه تعریف
@{
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" })
خروجی
<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>
با استفاده از اینHelper میتوانیم یک لینک ایجاد کنیم و ۵ ورودی دریافت میکند.
نحوه تعریف
@Html.ActionLink("link text", "Delete","Home", new { id = 11 }, new { @Class = "mycss" })
خروجی
<a class="mycss" href="/Home/Delete/11">link text</a>
با استفاده از اینHelper میتوانیم یک فرم ایجاد کنیم و ۳ ورودی دریافت میکند.
نحوه تعریف
@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>
با استفاده از اینHelper میتوانیم یک Label ایجاد کنیم و ۲ ورودی دریافت میکند.
نحوه تعریف
@Html.Label("StudentName", new { @class = "MyCss" })
خروجی
<label class="MyCss" for="StudentName">StudentName</label>
با استفاده از این دو 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)
یکی از قدرتمند ترین Helper های موجود در MVC میباشد، که به صورت هوشمند کار میکند وقتی به این Helper مدل داده میشود، از نوع داده آن تشخیص میدهد چه نوع Input ای بسازد.
@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
فرض کنید یک فرم لاگین ساخته ایم و کاربر رمز عبور را اشتباه میزند. برای نمایش پیام خطا میتوانیم از این هلپر استفاده کنیم. ورودی مهم آن یک نام است که نام آن را در این مثال Login است و با استفاده از همین نام پیام خطا را ارسال میکنیم.
@Html.ValidationMessage("login", new { @class = "text-danger" })
نحوه ارسال پیام خطا
ModelState.AddModelError("login", "رمز عبور یا نام کاربری صحیح نمیباشد");