HTML Helper ها در View برای ایجاد محتوای HTML ای مورد استفاده قرار میگیرد. از HTML Helper ها برای پیادهسازی متدهایی که یک رشته را برمیگردانند میتوان استفاده کرد. با استفاده از HTML Helper ها می توانید میزان تایپ مکرر تگ های HTML را در یک View کاهش داد. این آموزش در مورد چگونگی تعریف، استفاده و یا ایجاد HTML Helper ها در View های MVC بحث می کند.
این 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", "رمز عبور یا نام کاربری صحیح نمیباشد");