توضیح مفصلی در مورد Helper Button و CheckBox Helper در MVC

HTML Helper چیست؟
MVC کلاس HTML Helper را ارائه می دهد که کنترل های HTML را در نمای تیغ ارائه می دهد. HTML helper روش هایی هستند که داده ها را به صورت رشته ای برمی گرداند. مدل را با view پیوند می دهد و هنگام ارسال فرم، مقداری را از ویژگی های مدل به view و بالعکس ارسال می کند. هیچ کنترل سمت سرور برای این وجود ندارد، بنابراین باید از کلاس کمکی HTML استفاده کنیم.
راهنما RadioButton
RadioButton چیست؟
RadioButton معمولاً با همان نام گروه متصل می شود. کاربران می توانند در همان گروه هر بار فقط یک دکمه رادیویی را انتخاب کنند. ما نمی توانیم چندین دکمه رادیویی را در یک گروه انتخاب کنیم.
در MVC دو راه برای ایجاد RadioButton با استفاده از HTML Helper وجود دارد
- RadioButtonFor
- دکمه رادیویی
RadioButtonFor
HTML.RadioButtonFor یک کنترل با تایپ قوی است که به ویژگی مدل محدود شده است. ما باید یک نام مدل را در بالای نمای اضافه کنیم. با تایپ قوی تمام خطاهای کد را در زمان کامپایل بررسی می کند و برنامه ما را ذخیره می کند که در زمان اجرا خطا دریافت نکند.
نحو
@Html.RadioButtonFor()
مثال
@Html.RadioButtonFor(m => m.Gender,"Male")
@Html.RadioButtonFor(m => m.Gender,"Female")
دکمه رادیویی
HTML.RadioButton یک کنترل با تایپ آزاد است که به ویژگی مدل محدود نمی شود. HTML.RadioButton به هیچ مدلی متصل نیست، شما باید رشته ای را با همان نام ویژگی model ارسال کنید تا از خطا در زمان اجرا جلوگیری کنید.
نحو
@Html.RadioButton()
مثال
Male: @Html.RadioButton("Gender","Male")
Female: @Html.RadioButton("Gender","Female")
ما باید یک پروژه برای نمایش RadioButton ایجاد کنیم.
حال باید یک مدل فرم ایجاد کنیم. در اینجا من در حال ایجاد یک کلاس سروی برای یک مدل هستم.
روی پوشه Models کلیک راست کرده و یک کلاس برای یک مدل اضافه کنید.
ServeyFrom.cs
namespace Dynamicappendpartial.Models
{
public class SurveyForm
{
public int id {
get;
set;
}
[Display(Name = "Name")]
public string U_Name {
get;
set;
}
public string Gender {
get;
set;
}
[Display(Name = "ContactNo")]
public long Contact_no {
get;
set;
}
}
}
روی پوشه کنترلر کلیک راست کرده و کنترلر کلاس مدلی که ساخته ایم را اضافه کنید و کد زیر را داخل کنترلر اضافه کنید.
بیشتر بخوانید: چگونه فایل ها را در Asp.net Mvc آپلود و برگردانیم؟
SurveyFormsController
using System;
using System.Collections.Generic;
using System.Data;
using Dynamicappendpartial.Models;
namespace Dynamicappendpartial.Controllers
{
public class SurveyFormsController: Controller
{
private PartialDbContext db = new PartialDbContext();
public ActionResult Create()
{
return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "id,U_Name,Gender,Contact_no")] SurveyForm surveyForm)
{
if (ModelState.IsValid)
{
db.SurveyForms.Add(surveyForm);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(surveyForm);
}
}
}
روی نام متد کلیک راست کرده و view را اضافه کنید تا متد ایجاد شود. پس از افزودن view برنامه را اجرا کنید.
در فرم خود، به جای جعبه متن، به یک دکمه رادیویی برای جنسیت نیاز داریم. باید کد view را تغییر دهیم و دکمه رادیویی جنسیت را اضافه کنیم.
Create.cshtml
@model Dynamicappendpartial.Models.survey form
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()<div class="form-horizontal"><h4>SurveyForm</h4>
<hr>@Html.ValidationSummary(true, "", new { @class = "text-danger" })<div class="form-group">@Html.LabelFor(model => model.U_Name, htmlAttributes: new { @class = "control-label col-md-2" })<div class="col-md-10">@Html.EditorFor(model => model.U_Name, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.U_Name, "", new { @class = "text-danger" })</div></div>
<div class="form-group">@Html.LabelFor(model => model.Gender, htmlAttributes: new { @class = "control-label col-md-2" })<div class="col-md-10">@Html.RadioButtonFor(model => model.Gender, "Male") Male @Html.RadioButtonFor(model => model.Gender, "Female") Female @Html.ValidationMessageFor(model => model.Gender, "", new { @class = "text-danger" })</div></div>
<div class="form-group">@Html.LabelFor(model => model.Contact_no, htmlAttributes: new { @class = "control-label col-md-2" })<div class="col-md-10">@Html.EditorFor(model => model.Contact_no, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Contact_no, "", new { @class = "text-danger" })</div></div>
<div class="form-group"><div class="col-md-offset-2 col-md-10"><input class="btn btn-default" type="submit" value="Submit"></div></div></div>
}
<div>@Html.ActionLink("Back to List", "Index")</div>
حالا برنامه را اجرا کنید و ببینید که نمای به صورت استثنا کار می کند.
CheckBox Helper
چک باکس چیست؟
چک باکس معمولاً برای انتخاب چندین مقدار استفاده می شود. یک چک باکس شبیه یک دکمه رادیویی است اما در یک چک باکس، میتوانیم چندین مقدار را انتخاب کنیم و به صورت یک کادر مربع نشان داده میشود.
در MVC دو راه برای ایجاد CheckBox با استفاده از HTML Helper وجود دارد
CheckBoxFor
HTML.CheckBoxFor یک کنترل با تایپ قوی است که به ویژگی مدل محدود شده است. ما باید یک نام مدل را در بالای نمای اضافه کنیم. با تایپ قوی تمام خطاهای کد را در زمان کامپایل بررسی می کند و برنامه ما را ذخیره می کند که در زمان اجرا خطا دریافت نکند.
نحو
@Html.CheckBoxFor()
مثال
@Html.CheckBoxFor(m => m.ASP.NET MVC)
@Html.CheckBoxFor(m => m.NET Core)
@Html.CheckBoxFor(m => m.JAVA)
@Html.CheckBoxFor(m => m.Angular)
چک باکس
HTML.CheckBox یک کنترل با تایپ آزاد است که به ویژگی مدل محدود نمی شود. HTML.CheckBox به هیچ مدلی متصل نیست، شما باید رشتهای را با همان نام ویژگی model ارسال کنید تا از خطا در زمان اجرا جلوگیری کنید. در زمان اجرا خطاها را بررسی نمی کند.
نحو
@Html.CheckBox()
مثال
@Html.CheckBox("ASP.NET MVC", true)
@Html.CheckBox("NET Core", false)
@Html.CheckBox("JAVA", false)
@Html.CheckBox("Angular", false)
ما باید یک پروژه برای نمایش CheckBox ایجاد کنیم.
برای درک راهنمای چک باکس، از جدول زیر استفاده می کنیم
به دنبال شرکت توسعه ASP.Net قابل اعتماد هستید؟
نیاز ما این است که وقتی چک باکس را انتخاب می کنیم و روی دکمه ارسال کلیک می کنیم سپس تمام مقادیر چک باکس را دریافت می کنیم تا با مقداری رشته اضافه شوند. در تصویر زیر نمایش دهید.
و اگر هیچ شهری را انتخاب نکنیم و روی دکمه ارسال کلیک کنیم صفحه زیر را دریافت می کنیم.
از اسکریپت SQL زیر برای ایجاد جدول User_City و درج داده ها در جدول استفاده کنید.
CREATE TABLE User_City
(
ID INT IDENTITY PRIMARY KEY,
C_Name NVARCHAR(100) NOT NULL,
IsSelected BIT NOT NULL
)
Insert into User_City values ('Pune', 0)
Insert into User_City values ('Ahmedabad', 0)
Insert into User_City values ('Cuttack', 1)
Insert into User_City values ('Mumbai', 0)
Insert into User_City values ('Bangalore', 0)
Insert into User_City values ('Delhi', 0)
Insert into User_City values ('Hyderabad', 1)
مدل داده ADO.NET را برای بازیابی داده ها از پایگاه داده در برنامه ما اضافه کنید.
ایجاد کنترلر
روی پوشه کنترلر کلیک راست کرده و کنترلر کلاس مدلی که ساخته ایم را اضافه کنید و کد زیر را داخل کنترلر اضافه کنید.
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.Mvc;
using Dynamicappendpartial.Models;
namespace Dynamicappendpartial.Controllers
{
public class User_CityController : Controller
{
private Entities db = new Entities();
[HttpGet]
public ActionResult Index()
{
return View(db.User_City.ToList());
}
[HttpPost]
public string Index(IEnumerable<user_city> user_Cities)
{
if(user_Cities.Count(x => x.IsSelected) == 0)
{
return "You have not select any city";
}
else
{
StringBuilder sb = new StringBuilder();
sb.Append("Your selected city is -");
foreach(User_City user_City in user_Cities)
{
if(user_City.IsSelected)
{
sb.Append(user_City.C_Name + " , ");
}
}
sb.Remove(sb.ToString().LastIndexOf(" , "), 1);
return sb.ToString();
}
}
}
}
</user_city>
روی متد index کلیک راست کرده و نمای فهرست را اضافه کنید. کد زیر را در نمای نمایه اضافه کنید
@model List<dynamicappendpartial.models.user_city>
@{
ViewBag.Title = "Index";
}
@using (Html.BeginForm())
{
for (var i = 0; i < Model.Count(); i++)
{<table><tbody><tr><td> </td></tr></tbody><tbody><tr><td> </td><td>
@Html.HiddenFor(it => it[i].ID)
@Html.HiddenFor(it => it[i].C_Name)
@Html.DisplayFor(it => it[i].C_Name)</td><td> </td><td>
@Html.CheckBoxFor(it => it[i].IsSelected, new { Style = "vertical-align:3px ; margin-left:2px;}" })</td><td> </td></tr><tr><td> </td></tr></tbody></table>
}
<input id="Submit1" type="submit" value="submit">
}
</dynamicappendpartial.models.user_city>
اکنون برنامه را اجرا کنید و نیاز ما را آزمایش کنید، همانطور که ما استثنا کردیم کار خواهد کرد.
نتیجه
در این وبلاگ با استفاده از RadioButton و CheckBox با استفاده از HTML Helper در برنامه MVC آشنا شدیم. ما همچنین انواع مختلفی را با مثال بلادرنگ مرور کرده ایم.