معرفی HTML Helper ها در MVC

HTML Helper ها در View برای ایجاد محتوای HTML ای مورد استفاده قرار میگیرد. از HTML Helper ها برای پیاده‌سازی متدهایی که یک رشته را برمی‌گردانند میتوان استفاده کرد. با استفاده از HTML Helper ها می توانید میزان تایپ مکرر تگ های HTML را در یک View کاهش داد. این آموزش در مورد چگونگی تعریف، استفاده و یا ایجاد HTML Helper ها در View های MVC بحث می کند.

معرفی 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", "رمز عبور یا نام کاربری صحیح نمیباشد");