تعديل وحذف البيانات الدرس الرابع

يوليو 14, 2024

8٬471 2 دقائق

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

تعديل وحذف البيانات

إضافة عرض لتعديل المنتجات

إنشاء عرض Edit:
- انقر بزر الماوس الأيمن على مجلد Views ثم مجلد Home.
- اختر “Add” ثم “View”.
- سمّها Edit واضغط “Add”.
تحرير ملف 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" />
        </div>
        <div>
            <label asp-for="Price"></label>
            <input asp-for="Price" />
        </div>
        <input type="hidden" asp-for="Id" />
        <button type="submit">Save</button>
    </form>
</body>
</html>

تحديث المتحكم لتعديل البيانات

تحديث HomeController:
- أضف الطرق التالية:

public IActionResult Edit(int id)
{
    var product = _context.Products.Find(id);
    if (product == null)
    {
        return NotFound();
    }
    return View(product);
}

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

حذف البيانات

إضافة عرض لتأكيد الحذف

إنشاء عرض Delete:
- انقر بزر الماوس الأيمن على مجلد Views ثم مجلد Home.
- اختر “Add” ثم “View”.
- سمّها Delete واضغط “Add”.
تحرير ملف Delete.cshtml:

@model YourNamespace.Models.Product

<!DOCTYPE html>
<html>
<head>
    <title>Delete Product</title>
</head>
<body>
    <h1>Delete Product</h1>
    <p>Are you sure you want to delete this product?</p>
    <div>
        <h2>@Model.Name</h2>
        <p>Price: @Model.Price</p>
    </div>
    <form asp-action="Delete" method="post">
        <input type="hidden" asp-for="Id" />
        <button type="submit">Delete</button>
    </form>
    <a asp-action="Index">Cancel</a>
</body>
</html>

تحديث المتحكم تعديل وحذف البيانات

تحديث HomeController:
- أضف الطرق التالية:

public IActionResult Delete(int id)
{
    var product = _context.Products.Find(id);
    if (product == null)
    {
        return NotFound();
    }
    return View(product);
}

[HttpPost]
public IActionResult Delete(Product product)
{
    var productToDelete = _context.Products.Find(product.Id);
    if (productToDelete == null)
    {
        return NotFound();
    }

    _context.Products.Remove(productToDelete);
    _context.SaveChanges();
    return RedirectToAction("Index");
}

إضافة روابط التعديل والحذف إلى عرض الفهرس (Index)

تحديث Index.cshtml:

@model IEnumerable<YourNamespace.Models.Product>

<!DOCTYPE html>
<html>
<head>
    <title>Product List</title>
</head>
<body>
    <h1>Product List</h1>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Price</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var product in Model)
            {
                <tr>
                    <td>@product.Name</td>
                    <td>@product.Price</td>
                    <td>
                        <a asp-action="Edit" asp-route-id="@product.Id">Edit</a> |
                        <a asp-action="Delete" asp-route-id="@product.Id">Delete</a>
                    </td>
                </tr>
            }
        </tbody>
    </table>
</body>
</html>

تشغيل التطبيق واختبار تعديل وحذف البيانات

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

في هذا الدرس، تعلمت كيفية إضافة وظائف لتعديل وحذف البيانات في تطبيق ASP.NET باستخدام Entity Framework Core. يمكنك الآن إدارة بياناتك بشكل كامل من خلال التطبيق.