عمليات CRUD operations (Create, Read, Update, Delete)

-

سنبدأ الان بتعلم عمليات CRUD (إنشاء، قراءة، تحديث، حذف). سنتابع العمل على المشروع السابق وهنا نتعامل مع ملفات الطلاب، حيث نعمل على إضافة طالب جديد. 

بعد الانتهاء من هذا الدرس بنكون قادرين على اجراء العمليات مع قواعد البيانات

انتقل الى ملف StudentsModel داخل مجدل model وتأكد من احتواءه على الحقول التالية: 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace StudentsAcademy.Models
{
    public class StudentsModel
    {
        public string CustomerNo { get; set; }
        public string FullName { get; set; }
        public DateTime Birthday { get; set; }
        public int Gender { get; set; }
        public int Nationality { get; set; }
        public string Address { get; set; }
        public string UserName { get; set; }
        public string Password { get; set; }
        public string Email { get; set; }
        public string Mobile { get; set; }
        public string Note { get; set; }
        public DateTime CurrentDate { get; set; }
        public PaymentModel Payment { get; set; }
    }
}

لاحظ انه تم تعريف كل من Gender وNationality بالنوع int حيث سنقوم بربط هذه الحقول مع قواعد البيانات، الآن يجب تخزين بيانات الطالب في مكان مؤقت في المشروع. لهذا سنقوم بإنشاء static class.
انتقل الى المجلد Repository ثم قم بإنشاء class جديد باسم StudentRepository.cs ثم أضف الكود التالي اليه: 

using StudentsAcademy.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace StudentsAcademy.Repository
{
    public static class StudentRepository
    {
        private static List<StudentsModel> allStudents = new List<StudentsModel>();
        public static IEnumerable<StudentsModel> AllStudents
        {
            get { return allStudents; }
        }
        public static void Create(StudentsModel Student)
        {
            allStudents.Add(Student);
        }
    }
}

في هذه static class يوجد private field يسمى allStudents وهو من نوع List من StudentsModel. سيحتوي هذا الحقل على جميع الطلاب الذين تم إرسالهم من form. بخثوث function المسمى AllStudents وهي عباره عن public property من النوع IEnumerable والتي ستعيد المتغير "allStudents ".
تم إضافة function باسم " Create " التي ستعمل على إضافة طالب، والي بيتم فيها استخدام Parameter من نوع StudentsModel باسم Student  ،ومن ثم اضافته الى قائمة " allStudents".

تمام الان نضيف control  باسم Students
(قمنا بالفعل بانشاء هذا الملف من قبل)
انتقل الى مجدل Controllers وتأكد من وجود ملف باسم StudentsController.cs في حال لم يكن موجد يجب إضافة ملف بهذا الاسم.  لإضافة هذا الملف انقر يمين فوق مجلد Controllers  ثم اختر Add - Controlle، انتضر بضع ثواني حتي يتم اضافة الملف . 
سيكون شكل المشروع بعد الاضافة :

الان نعدل على هذ الملف باضافة الكود التالي:


using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using StudentsAcademy.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace StudentsAcademy.Controllers
{
    public class StudentsController : Controller
    {
        public IActionResult Index()
        {
           return View();
        }
        // HTTP GET VERSION public IActionResult NewStudent() {return View();} // HTTP POST VERSION [HttpPost] public IActionResult NewStudent(StudentsModel studentsModel) {StudentRepository.Create(studentsModel); return View("Thanks", studentsModel);}        public IActionResult ReceivedDataByRequest()
        {
            string CustomerNo = Request.Form["CustomerNo"];
            string FullName = Request.Form["FullName"];
            string Birthday = Request.Form["Birthday"];
            return View("ReceivedDataByRequest", $"Customer Number :{CustomerNo} ,FullName is {FullName} ,Birthday is {Birthday}");
        }
        public IActionResult ReceivedDataByParameter(string CustomerNo,string FullName, string Birthday)
        {
            return View("ReceivedDataByRequest", $"Customer Number :{CustomerNo} ,FullName is {FullName} ,Birthday is {Birthday}");
        }
        public IActionResult ReceivedDataByModelBinding(StudentsModel Student)
        {
            //TempData["UserName"] = "Admin";
            return View("ReceivedDataByModelBinding", Student);
        }
        public IActionResult StudentInfo()
        {
            //var userContent = HttpContext.Session.Get<LoginModel>("UserDetails");
           //ViewBag.UserName = userContent.UserName;
            StudentsModel _Student = new StudentsModel();
            _Student.CustomerNo = "2100001";
            _Student.FullName = "Admin Admin";
            _Student.Birthday = Convert.ToDateTime("01/01/1980");
            _Student.Gender = 1;
            _Student.Nationality = 1;
            _Student.Address = "Jordan";
            _Student.UserName = "Admin";
            _Student.Password = "abc123";
            _Student.Email = "[email protected]";
            _Student.Mobile = "000000000";
            _Student.Note = "";
            _Student.CurrentDate = DateTime.Now;
            //ViewBag.UserName ="Admin";
            return View(_Student);
        }
        public JsonResult GetStudentDetails()
        {
            var model = new Models.StudentsModel
            {
                CustomerNo = "2100001",
                FullName = "Admin Admin"
            };
            return Json(new { Data = model });
        }
        public IActionResult CallSharedView()
        {
            return View();
        }
    }
}
تم في هذه Controller انشاء 2 action باسم NewStudent: 

  • الأول: من نوع HTTP GET   وهو الافتراضي وسيتم استدعاؤه عندما يتم طلب new student request بشكل طبيعي. يتم استدعاء هذا action عند طلب الرابط /Students/NewStudent

الكود :

// HTTP GET VERSION
        public IActionResult NewStudent()
        {
            return View();
        }


  • الثاني: من نوع HTTP POST وسيتم استدعاؤه عند عمل submitted ل form. سيكون هذا action مسؤولاً عن تلقي البيانات receiving submitted data.

الكود : 

        // HTTP POST VERSION  
        [HttpPost]
        public IActionResult NewStudent(StudentsModel studentsModel)
        {
           StudentRepository.Create(studentsModel);
            return View("Thanks", studentsModel);
        }
لاحظ هنا اننا قمنا باستدعاء Action من  Controller  آخر وهو StudentRepository 

الفرق بين HTTP GET  و HTTP POST 

ببساطة يقوم HTTP GET بإرجاع View. ولا يتطلب أي attribute  مثل post.
تحتوي HTTP POST على attribute من نوع HttpPost. بالاضافة الى ارسال parameter  من النوع "StudentsModel". عند النقر على زر form’s، تحصل هذه parameter  تلقائيًا على قيمة جميع HTML tags التي يملأها المستخدم. يتم ذلك تلقائيًا بواسطة ميزة ASP.NET Core Model Binding.
بعد ذلك ، تتم إضافة بيانات الطالب (من forms data) إلى StudentRepository ومن ثم تقوم  returned statement  بإرجاع control  إلىView  باسم     ‘Thanks’ مع بيانات الطالب.

اضافة View 
اكيد حتي نعرض بيانات الطالب نحتاج الى انشاء View، ومثل ما تعلمنا سابقا كيف نعمل View،بالضغط يمين على action ومن ثم اختيار Add View، بعدها سيتم انشاء مجلد تحت view باسم ال control وفي هذا المثال سيتم انشاء مجلد باسم Students واسم view بكون مثل اسم action وفي هذا المثال الاسم الخاص ب View هو NewStudent

انتقل الى View ثم أضف الكود التالي 
@model StudentsModel
@{
    Layout = null;
}
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    Welcome,@HttpContextAccessor.HttpContext.Session.GetString("UserName")
    <hr />
    <div class="container">
        <form id="external-account" asp-page="" asp-route-returnUrl="" method="post" class="form-horizontal">
            <div class="form-group">
                <label>CustomerNo:</label>
                <input class="form-control" asp-for="CustomerNo" />
            </div>
            <div class="form-group">
                <label>FullName:</label>
                <input class="form-control" asp-for="FullName" />
                <span asp-validation-for="FullName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label>Birthday:</label>
                <input class="form-control" asp-for="Birthday" />
            </div>
            <div class="form-group">
                <label>Gender:</label>
                <select class="form-control" asp-for="Gender">
                    <option value="M">Male</option>
                    <option value="F">Female</option>
                </select>
            </div>
            <div class="form-group">
                <label>Nationality:</label>
                <select class="form-control" asp-for="Nationality">
                    <option value="M">Jordan</option>
                    <option value="F">Saudi Aribae</option>
                    <option value="F">UAE</option>
                </select>
            </div>
            <div class="form-group">
                <label>Address:</label>
                <input class="form-control" asp-for="Address" />
            </div>
            <div class="form-group">
                <label>UserName:</label>
                <input class="form-control" asp-for="UserName" />
            </div>
            <div class="form-group">
                <label>Password:</label>
                <input class="form-control" asp-for="Password" />
            </div>
            <div class="form-group">
                <label>Email:</label>
                <input class="form-control" asp-for="Email" />
            </div>
            <div class="form-group">
                <label>Mobile:</label>
                <input class="form-control" asp-for="Mobile" />
            </div>
            <div class="form-group">
                <label>Note:</label>
                <input class="form-control" asp-for="Note" />
            </div>
            <button class="btn btn-primary" type="submit">Submit</button>
        </form>
    </div>
@{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
تم تطبيق  attributes التالية asp-for على HTML tags. 
الكود asp-for هي tag helper attribute تربط HTML tags مثل (labels, inputs, select, etc.) مع model properties.
الكود التالي هو طريقة ربط asp-for مع رقم الطالب CustomerNo في form (الموضح أدناه):
<div class="form-group">
   <label>CustomerNo:</label>
   <input class="form-control" asp-for="CustomerNo" />
</div> 

أضف View باسم Thanks.cshtml
بالنقر يمين فوق مجلد Studnets في مجلد Views اختر Add - View . 
بكون الشكل :



 
ثم اضف الكود التالي :

@{
    ViewData["Title"] = "Thanks";
}
<h2>Thanks, Student added successfully</h2>

وظيفة هذا ال view فقط عرض رسالة تشير الى انه تم انشاء ملف الطالب بنجاح. 

داخل علامة h2 تم إضافة رسالة تم إضافة الطالب بنجاح.
وهيك في هذا الدرس بنكون فهمنا كيف بتم عملية الاضافة ، في الدروس القادمه بنتعلم كيف ممكن نعمل هذه العمليات على قاعدة البيانات مباشرة