إضافة التحقق من صحة البيانات وعرض رسائل الخطأ الدرس الخامس

يوليو 17, 2024

9٬863 2 دقائق

في هذا الدرس، سنتعلم كيفية إضافة التحقق من صحة البيانات في ASP.NET وعرض رسائل الخطأ للمستخدمين. سنستخدم ميزات التحقق المدمجة في ASP.NET Core لتأكيد صحة البيانات قبل حفظها في قاعدة البيانات.

إضافة التحقق من صحة البيانات إلى النموذج

تحديث الفئة Product:
- افتح ملف Product.cs وأضف التعليقات التوضيحية للتحقق من صحة البيانات:

using System.ComponentModel.DataAnnotations;

public class Product
{
    public int Id { get; set; }

    [Required(ErrorMessage = "Name is required")]
    [StringLength(100, ErrorMessage = "Name can't be longer than 100 characters")]
    public string Name { get; set; }

    [Required(ErrorMessage = "Price is required")]
    [Range(0.01, 10000.00, ErrorMessage = "Price must be between 0.01 and 10000.00")]
    public decimal Price { get; set; }
}

تحديث العروض لعرض رسائل الخطأ

تحديث Create.cshtml:
- افتح ملف Create.cshtml وأضف مساحات عرض رسائل الخطأ:

@model YourNamespace.Models.Product

<!DOCTYPE html>
<html>
<head>
    <title>Create Product</title>
</head>
<body>
    <h1>Create Product</h1>
    <form asp-action="Create" method="post">
        <div>
            <label asp-for="Name"></label>
            <input asp-for="Name" />
            <span asp-validation-for="Name" class="text-danger"></span>
        </div>
        <div>
            <label asp-for="Price"></label>
            <input asp-for="Price" />
            <span asp-validation-for="Price" class="text-danger"></span>
        </div>
        <button type="submit">Create</button>
    </form>
</body>
</html>

تحديث Edit.cshtml:

افتح ملف Edit.cshtml وأضف مساحات عرض رسائل الخطأ:

@model YourNamespace.Models.Product

<!DOCTYPE html>
<html>
<head>
    <title>Edit Product</title>
</head>
<body>
    <h1>Edit Product</h1>
    <form asp-action="Edit" method="post">
        <div>
            <label asp-for="Name"></label>
            <input asp-for="Name" />
            <span asp-validation-for="Name" class="text-danger"></span>
        </div>
        <div>
            <label asp-for="Price"></label>
            <input asp-for="Price" />
            <span asp-validation-for="Price" class="text-danger"></span>
        </div>
        <input type="hidden" asp-for="Id" />
        <button type="submit">Save</button>
    </form>
</body>
</html>

تمكين التحقق من صحة جانب العميل (Client-side Validation)

تحديث _ViewImports.cshtml:
- افتح ملف _ViewImports.cshtml وتأكد من وجود السطر التالي:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

تحديث Views/Shared/_Layout.cshtml:

افتح ملف Views/Shared/_Layout.cshtml وأضف المراجع التالية لجافا سكريبت في نهاية الملف قبل إغلاق وسم </body>:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js"></script>

تحديث المتحكم لعرض رسائل الخطأ

تحديث HomeController:
- تأكد من أن الطرق Create و Edit تعيد نفس العرض مع البيانات المدخلة في حال عدم صحة النموذج:

[HttpPost]
public IActionResult Create(Product product)
{
    if (ModelState.IsValid)
    {
        _context.Products.Add(product);
        _context.SaveChanges();
        return RedirectToAction("Index");
    }
    return View(product);
}

[HttpPost]
public IActionResult Edit(Product product)
{
    if (ModelState.IsValid)
    {
        _context.Products.Update(product);
        _context.SaveChanges();
        return RedirectToAction("Index");
    }
    return View(product);
}

تشغيل التطبيق واختبار التحقق من صحة البيانات

اضغط على زر “Run” أو اضغط F5 لتشغيل التطبيق.
جرب إدخال بيانات غير صحيحة في نماذج الإنشاء والتعديل للتحقق من عرض رسائل الخطأ بشكل صحيح.

في هذا الدرس، تعلمت كيفية إضافة التحقق من البيانات إلى نماذج ASP.NET واستخدام التعليقات التوضيحية لعرض رسائل الخطأ للمستخدمين. يعد التحقق من صحة البيانات جزءًا أساسيًا من أي تطبيق لضمان أن البيانات المدخلة تتبع القواعد المطلوبة قبل حفظها في قاعدة البيانات.