در این جلسه از آموزش ASP.NET Core قصد داریم نحوه ایجاد فرم توسط Tag Helper را بررسی نماییم، سپس به اعتبارسنجی فرم توسط Tag Helper خواهیم پرداخت. در جلسات گذشته نحوه ایجاد فرم توسط Html Helper را بررسی نمودیم و به معرفی Data Annotation ها جهت اعتبارسنجی مدل و فرم پرداختیم. همچنین در جلسه 38 مبحث اعتبارسنجی فرم را با جزئیات مورد بحث قرار دادیم. در این جلسه، مبحث ایجاد فرم و اعتبارسنجی با استفاده از تگ هلپرها را مورد بحث قرار میدهیم.
ایجاد فرم توسط Tag Helper
جهت ایجاد یک فرم ممکن است به تگ هلپرهای asp-controller، asp-action، asp-for، asp-items و برخی تگ هلپرهای دیگر نیاز داشته باشیم. در واقع با استفاده از Tag Helperهای ذکر شده میتوانیم Html Tagهای عادی را به مدل و فیلدهای متناظر آنها متصل نماییم.
ما برای پروژه‌ی این دوره آموزشی، قصد داریم تا یک Model جدید با نام Category ایجاد نماییم. سپس برای عملیات CRUD (ایجاد – خواندن – بروزرسانی و حذف) مدل ذکر شده یک Controller با نام CategoryController ایجاد مینماییم. در ادامه این جلسه، یک اکشن‌متد با نام Create ایجاد میکنیم. این اکشن‌متد نیازمند یک نما میباشد که آنرا در مسیر Views/Category/Create.cshtml میبایست ایجاد میکنیم.
کد مدل Category که در پوشه Models ایجاد میگرددقابل مشاهده میباشد.
public class Category
{
public string ID { get; set; }
public string CategoryName { get; set; }
public string Description { get; set; }
public CategoryActiveOptions Active { get; set; }
}فیلد Active دارای دو انتخاب میباشد که لیست آن از یک enum فراخوانی میگردد. کد مربوط به enum در ادامه قابل مشاهده میباشد.
public enum CategoryActiveOptions
{
Yes,
No
}
}کد مربوط به کنترولر Category و اکشن‌متد Create در ادامه قابل مشاهده میباشد.
public class CategoryController : Controller
{
public IActionResult Create()
{
return View();
}
[HttpPost]
}View مربوط (Category/Create.cshtml) به این اکشن متد میبایست به مدل Category متصل گردد. همچنین یک فرم با استفاده از Tag Helper های ذکر شده ایجاد مکنیم. ضمنا تگ فرم را بویسله تگ‌هلپرهای asp-controller و asp-action به کنترلر و اکشن‌متد متناظر متصل میکنیم. ضمنا جهت اتصال تگهای Label، Input و Select به فیلدهای مورد نظر، از تگ‌هلپر asp-for استفاده میکنیم. به علاوه برای بارگذاری آیتم‌های مربوط به Select از تگ‌هلپر asp-items میتوانیم استفاده کنیم.
@model Category
@{
ViewBag.Title = "Create New Category";
}
<form asp-controller="Category" asp-action="Create" method="post">
<div>
<label asp-for="CategoryName"></label>
<input asp-for="CategoryName" />
</div>
<div>
<label asp-for="Description" ></label>
<input asp-for="Description" />
</div>
<div>
<label asp-for="Active" ></label>
<select asp-for="Active" asp-items="Html.GetEnumSelectList<CategoryActiveOptions>()"></select>
</div>
<div><button type="submit">Create</button></div>
</form>ضمنا برای بهبود ظاهر فرم میتوانیم از کلاس‌های Bootstrap استفاده نماییم که در ادامه قابل مشاهده میباشد.
@model Category
@{
ViewBag.Title = "Create New Category";
}
<form asp-controller="Category" asp-action="Create" method="post" class="mt-5 offset-3 col-6 border border-primary pt-2 pb-2 px-2 py-2">
<div>
<label asp-for="CategoryName" class="form-label"></label>
<input asp-for="CategoryName" class="form-control" />
</div>
<div>
<label asp-for="Description" class="form-label"></label>
<input asp-for="Description" class="form-control" />
</div>
<div>
<label asp-for="Active" class="form-label"></label>
<select asp-for="Active" class="form-select" asp-items="Html.GetEnumSelectList<CategoryActiveOptions>()"></select>
</div>
<div><button type="submit" class="btn btn-primary mt-2">Create</button></div>
</form>اعتبارسنجی فرم توسط Tag Helper
جهت اعتبارسنجی فرم و مدل همانگونه که قبلا اشاره شد، میبایست برای فیلدهای مورد نظر در مدل، بویسله Data Annotation شروط پذیرش مورد نظر را اعمال نماییم. از آنجاییکه قبلا به بررسی انواع Data Annotation مانند RegularExpression، Compare، Required و موارد دیگر با جزئیات کامل پرداخته ایم، در این جلسه به معرفی دو خصوصیت MaxLength و MinLength خواهیم پرداخت و مدل Category را برای اعتبار سنجی بر اساس نیاز وب اپلیکیشن خود آماده میکنیم. همانگونه که از نام MaxLength و MinLength مشخص میباشد، برای تعیین حداقل و حداکثر کاراکتر مجاز برای ورود اطلاعات میباشند. ما در این جلسه به جای استفاده از خصوصیت StringLength از این دو خصوصیت استفاده خواهیم کرد.
public class Category
{
public string ID { get; set; }
[Required]
[Display(Name = "Category Name")]
[MaxLength(50)]
[MinLength(3)]
public string CategoryName { get; set; }
[RegularExpression(@"^(\w*\ *\.*\-*\\*\/*)*$", ErrorMessage = "Comment does not accept some special characters")]
public string Description { get; set; }
[Required]
public CategoryActiveOptions Active { get; set; }
}پس از آن، میتوانیم برای نمایش پیغام خطای مربوط به اعتبارسنجی هر فیلد درون نمای خود، از تگ‌هلپر asp-validation-for استفاده نماییم. همچنین برای نمایش دسته‌ایی پیغام‌های خطای اعتبارسنجی میتوانیم از تگ‌هلپر asp-validation-summary استفاده کنیم که سه حالت none، ModelOnly و All دارد. ما جهت نمایش تمام خطاهای مربوطه از گزینه All استفاده میکنیم.
@{
ViewBag.Title = "Create New Category";
}
<form asp-controller="Category" asp-action="Create" method="post" class="mt-5 offset-3 col-6 border border-primary pt-2 pb-2 px-2 py-2">
<div>
<label asp-for="CategoryName" class="form-label"></label>
<input asp-for="CategoryName" class="form-control" />
<span asp-validation-for="CategoryName" class="text-danger"></span>
</div>
<div>
<label asp-for="Description" class="form-label"></label>
<input asp-for="Description" class="form-control" />
<span asp-validation-for="Description" class="text-danger"></span>
</div>
<div>
<label asp-for="Active" class="form-label"></label>
<select asp-for="Active" class="form-select" asp-items="Html.GetEnumSelectList<CategoryActiveOptions>()"></select>
<span asp-validation-for="Active" class="text-danger"></span>
</div>
<div><button type="submit" class="btn btn-primary mt-2">Create</button></div>
<div asp-validation-summary="All" class="text-danger"></div>
</form>ضمنا برای بررسی معتبر بودن فرم و داده ارسال شده به کنترلر، میبایست از ModelState.IsValid استفاده نماییم. این متد در صورت معتبر بودن فرم، مقدار True را برمیگرداند. به علاوه ModelState.IsValid باید در اکشن‌متد Createکه در حالت HttpPost میباشد بررسی گردد.
public class CategoryController : Controller
{
public IActionResult Create()
{
return View();
}
[HttpPost]
public IActionResult Create(Category category)
{
if (ModelState.IsValid)
{
}
return View();
}
}در صورت نیاز به جزئیات بیشتر، میتوانید ویدئو آموزشی این جلسه را تماشا نمایید. همچنین برای آگاهی از جلسات بعدی این دوره آموزشی، ما را در اینستاگرام، تلگرام، یوتیوب و آپارات دنبال کنید. ضمنا لیست کامل جلسات در این قسمت در دسترس شما میباشد و سورس کد این جلسه را میتوانید از GitHub ما دانلود نمایید.
دانلود اسلایدهای آموزشی این جلسه از اینجا