public ViewResult GetAllcourse() => View();

@{
    ViewData["Title"] = "GetAllcourses";
}
 <table class="table table-sm table-striped table-bordered m-2">
        <thead>
            <tr>
                <th>Course ID</th>
                <th>CourseNumber</th>
                <th>CourseName</th>
                <th>CourseDescription</th>
                <th>Price</th>
                <th>Capacity</th>
                <th>Update</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script src="/lib/jquery/jquery.js"></script>
    <script src="/lib/jquery/jquery.min.js"></script>
    <script src="/lib/jquery/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            ShowAllCourses();
            
            function ShowAllCourses() {
                $("table tbody").html("");
                $.ajax({
                    type: "GET",
                    url: "https://localhost:7081/api/Course/GetAllCourses",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json", 
                     //crossDomain: true,
                    success: function (result, status, xhr) {
                        
                        $.each(result, function (index, value) {
                            $("tbody").append($("<tr>"));
                            appendElement = $("tbody tr").last();
                            appendElement.append($("<td>").html(value["coursesId"]));
                            appendElement.append($("<td>").html(value["courseNumber"]));
                            appendElement.append($("<td>").html(value["courseName"]));
                            appendElement.append($("<td>").html(value["courseDescription"]));
                            appendElement.append($("<td>").html(value["price"]));
                            appendElement.append($("<td>").html(value["capacity"]));
                            appendElement.append($("<td>").html("<a href=\"UpdateReservation.html?id=" + value["id"] + "\"><img src=\"/icon/edit.png\" /></a>"));
                            appendElement.append($("<td>").html("<img class=\"delete\" src=\"/icon/delete.jpg\" />"));
                        });
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        
                        if (jqXHR.status == 500) {
                            alert(Internal error:  + jqXHR.responseText);
                        } else {
                            alert(Unexpected error. + jqXHR.responseText);
                        }
                    }
                });
            }
            $("table").on("click", "img.delete", function () {
                
                var CourseId = $(this).parents("tr").find("td:nth-child(1)").text();
                
                $.ajax({
                     type: "delete",
                    url: "https://localhost:7081/api/Course/DeleteCourse?id="+CourseId,
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json", 
                    success: function (result, status, xhr) {
                        ShowAllCourses();
                    },
                    error: function (xhr, status, error) {
                        console.log(xhr)
                    }
                });
            });
        });
    </script>

تمام الان دور نشغل هذا View ، شغل التطبيق وادخل الرابط التالي : 

https://localhost:7242/Course/GetAllcourse

بتكون النتيجة:

تمام التمام

الان نشوف Delete

طريقة الاستدعاء نفس الطريقة السابقة باستثناء تغيير اسم Action وارسال رقم Course المطلوب نحذفه. 

طبعا لأغراض تعليمة في هذه المقال نرسل رقم Course بهاذ الشكل ، في التطبيقات والمواقع الحقيقية المفروض يكون في نوع من الحماية، حتي ما يعرف المستخدم ارقام المواد ويعمل اعمال تخريبية.(ممكن تستخدم التشفير للأرقام وفي درس مستقل بخصوص ذلك مستقبلا ).

طيب في كود الحذف استدعينا action باسم DeleteCourse وبعثنا parameter باسم CourseId .

نرجع للمشروع MyFirstAPIProject وخلونا نعمل تعديل على action الخاص بالحذف (نضيف الكود التالي): 

       [HttpDelete]
        [Route("DeleteCourse")]
        public async Task<int> DeleteCoursesModel(int id)
        {
            connection = new SqlConnection(configuration.GetConnectionString("STDCS"));
            int Result = 0;
            try
            {
                string sqlQuery = "update courses set status=0  where CoursesId="+ id;
                DbProviderFactory dbFactory = DbProviderFactories.GetFactory(connection);
                using (var cmd = dbFactory.CreateCommand())
                {
                    cmd.Connection = connection;
                    cmd.CommandType = CommandType.Text;
                    cmd.CommandText = sqlQuery;
                    connection.Open();
                    await Task.Run(() => cmd.ExecuteNonQuery());
                    connection.Close();
                    Result = 1;
                }
            }
            catch (Exception ex)
            {
                Result = 0;
            }
            finally
            {
            }
            return Result;
        }

لاحظ ان في هذا الكود عملنا update وما عملنا Delete الهدف من ذلك هو الاحتفاظ بجميع السجلات في قاعدة البيانات(ممكن ترجع الها باي وقت). الفكرة ان بنعرض البيانات حسب الحالة اذا كانت 0 ما بتعرضها واذا كانت 1 بنعرضها).

تمام. 

خلونا نحاول نجرب الحذف ونشوف النتيجة. 

الصورة التالية شكل قاعدة البيانات قبل الحذف(لاحظ ان جميع السجلات الحالة الها 1)

var CourseId = $(this).parents("tr").find("td:nth-child(1)").text();