كيفية استدعاء Web API باستخدام JQuery - الاضافة والتعديل
-
في هذا الدرس نتعلم كيف ممكن نستدعي API بهدف الاضافة insert الى قاعدة البيانات وكيف ممكن نقرا البيانات من View وارسالها الى API ، وبعدها بتعلم كيف ممكن نعمل Update على البيانات الموجودة.
تمام جاهزين نبدأ الدرس: يلا
اولا طريقة الاستدعاء API هي نفسها باستخدام ajax.$ لكن الفرق ان هنا في بيانات نرسلها من خلال API بهدف الاضافة او التعديل.
حتي نفهم الموضوع بشكل اكثر خلونا نعمل في مشروع StudentPortal اضافة وهي View باسم AddCourse (ممكن نعمل صفحة HTML نفس ما عملنا في الدرس السابق)
ننتقل الى CourseController ونعمل Action باسم AddCourseByJQuery وبكون الكود كالتالي:
public ViewResult AddCourseByJQuery() => View();
ملاحظة : سابقا اضفنا action باسم AddCourses وعرفنا كيف نستدعي API من داخل .Net Core
طيب الان دور نعمل View انقر يمين فوق action واختار منها Add New View
الان نضيف الكود التالي على هذا View :
@model CoursesModel
@{ Layout = "_Layout"; ViewBag.Title = "Add a Course By JQuery";}
<h2>Add a Course </h2>
<div class="form-group">
<label for="CourseNumber">Course #:</label>
<input class="form-control" id="CourseNumber" />
</div>
<div class="form-group">
<label for="CourseName">Course Name:</label>
<input class="form-control" id="CourseName" />
</div>
<div class="form-group">
<label for="CourseDescription">Course Description:</label>
<input class="form-control" id="CourseDescription" />
</div>
<div class="form-group">
<label for="Price">Price:</label>
<input class="form-control" id="Price" />
</div>
<div class="form-group">
<label for="Capacity">Capacity:</label>
<input class="form-control" id="Capacity" />
</div>
<div class="text-center panel-body">
<button type="submit" class="btn btn-sm btn-primary" id="AddButton">Add</button>
</div>
<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">
الكود عبارة عن HTML يحتوي على مجموعة من Input التي هي عبارة عن :
<input class="form-control" id="CourseNumber" />
<input class="form-control" id="CourseName" />
<input class="form-control" id="CourseDescription" />
<input class="form-control" id="Price" />
<input class="form-control" id="Capacity" />
بالإضافة الى input من نوع button الذي سيعمل على استدعاء API
تمام الان ننتقل الى جزء JQuery ونضيف الكود التالي في الصفحة:
<script type="text/javascript">
$("#AddButton").click(function (e) {
$.ajax({
url: "https://localhost:7081/api/Course/AddCourses",
headers: {
Key: "abc@123"
},
type: "post",
contentType: "application/json",
data: JSON.stringify({
CourseNumber: $("#CourseNumber").val(),
CourseName: $("#CourseName").val(),
CourseDescription: $("#CourseDescription").val(),
Price: $("#Price").val(),
Capacity: $("#Capacity").val()
}),
success: function (result, status, xhr) {
location.href = "GetAllcourse";;
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.status);
alert(errorThrown);
if (jqXHR.status == 500) {
alert(Internal error: + jqXHR.responseText);
} else {
alert(Unexpected error. + jqXHR.responseText);
}
}
});
});
</script>
نفهم الكود المكتوب :
لاحظ اول سطر عند النقر فوق button ، يتم استخدام طلب AJAX باستخدام الكود $.ajax ، بحيث يحتوي مجموعة من parameters وهي
URL : عنوان API المطلوب استخدامه.
contentType : من نوع json
headers : يستخدم لإرسال security Key الى API بواسطة HTTP Header ، الهدف هنا اعطاء صلاحيات لهذا الاستدعاء حيث تم اضافة Authenticate في API
تذكر الكود الذي استخدمناه في API كان
bool Authenticate()
{
var allowedKeys = new[] { "abc@123", "abc225@@", "AbcABC@@" };
StringValues key = Request.Headers["Key"];
int count = (from t in allowedKeys where t == key select t).Count();
return count == 0 ? false : true;
}
type : من نوع Post لأن الهدف هنا هو كتابة على قاعدة البيانات.
Data : يتم قراءة البيانات المدخلة من input وتخزينها في data parameter ومن ثم ارسالها باستخدام jQuery AJAX، بتنسيق JSON الى API
تذكر ، في method Web API Post تحتوي على [FromBody] attribute.حيث يتم استقبل هاذه data parameter.
الكود الخاص بالإضافة في API
[HttpPost]
[Route("AddCourses")]
public async Task<ActionResult> PostCoursesModel([FromBody] CoursesModel coursesModel)
{
....
}
في حال نجاح العملية تم استخدم الكود
location.href = "GetAllcourse";;
حيث نعمل على اعادة المستخدم الى صفحة عرض جميع المواد وعرض الاضافة الجديدة.
في حال الخطأ يتم اظهار رسالة خطأ
تمام ، الان دور نجرب التطبيق ونشوف النتيجة
بعد ادخال البيانات واستدعاء API شوف الصورة كيف تم استقبال البيانات (الصورة)
بعد الاضافة لاحظ تم اضافة مادة جديدة رقم 9
تمام الان نشوف كيف ممكن نعمل update على الداتا باستخدام JQuery
نرجع الى الرابط
https://localhost:7242/Course/GetAllcourse
في هذا View رجعنا جميع المواد الموجدة في قاعدة البيانات باستخدام JQuery.
كانت نتيجة التنفيذ :
مثل ما شفنا في الصورة اضفنا icon للتعديل ،
في هذا ال 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("<img class=\"Edit\" 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)
}
});
});
$("table").on("click", "img.Edit", function () {
var CourseId = $(this).parents("tr").find("td:nth-child(1)").text();
location.href = "UpdateCourseByJQuery?id="+CourseId ;
});
});
</script>التعديل السابق هو تعديل على Edit تمام مثل ال Delete استخدمنا JQuery عند النقر على img tag . وبعدها رحعنا رقم الكورس ومن ثم استدعينا API الخاص بالتعديل باسم UpdateCourseByJQuery.
تمام الفكرة هون : بنعمل استدعاء لصفحة خاصة بتحديث البيانات وبنرسل رقم المادة، ثم في هذه الصفحة بنعمل ارجاع للبيانات وعرضها بناء على رقم المادة، وبعدها بنعمل التعديل المطلوب ثم بنعمل استدعاء API المسؤول عن تحديث البيانات.
طيب نبدأ بعمل View خاص بعرض البيانات بناء على رقم ID، نعمل action جديد داخل CourseController باسم UpdateCourseByJQuery بإضافة الكود :
public ViewResult UpdateCourseByJQuery() => View();
محتاجين الان فقط action من نوع Get وما في حاجة الى إضافة Post وذلك بسبب ان نستخدم JQuery .
تمام الان دور نظيف View بالنقر يمين فوق action واختر Add New View وبعدها نضيف الكود التالي الى هذا View :
والكود الخاص بهذا View هو نفس الكود الخاص بالإضافة (كود HTML فقط) اما أكواد JQuery اكيد فيها تعديل.
في View اضف الكود التالي :
@model CoursesModel
@{ Layout = "_Layout"; ViewBag.Title = "Edit a Course By JQuery";}
<h2>Edit a Course </h2>
<div class="form-group">
<label for="CoursesId"></label>
<input type="text" class="form-control" id="CoursesId" readonly />
</div>
<div class="form-group">
<label for="CourseNumber">Course #:</label>
<input class="form-control" id="CourseNumber" />
</div>
<div class="form-group">
<label for="CourseName">Course Name:</label>
<input class="form-control" id="CourseName" />
</div>
<div class="form-group">
<label for="CourseDescription">Course Description:</label>
<input class="form-control" id="CourseDescription" />
</div>
<div class="form-group">
<label for="Price">Price:</label>
<input class="form-control" id="Price" />
</div>
<div class="form-group">
<label for="Capacity">Capacity:</label>
<input class="form-control" id="Capacity" />
</div>
<div class="text-center panel-body">
<button type="submit" class="btn btn-sm btn-primary" id="UpdateButton">UpdateButton</button>
</div>
<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 () {
GetCourse();
function GetCourse() {
let params = (new URL(document.location)).searchParams;
let id = params.get("id");
$.ajax({
url: "https://localhost:7081/api/Course/GetCoursesById?id=" + id,
type: "get",
contentType: "application/json",
success: function (result, status, xhr) {
$.each(result, function (index, value) {
$("#CoursesId").val(value["coursesId"]);
$("#CourseNumber").val(value["courseNumber"]);
$("#CourseName").val(value["courseName"]);
$("#CourseDescription").val(value["courseDescription"]);
$("#Price").val(value["price"]);
$("#Capacity").val(value["capacity"]);
});
},
error: function (jqXHR, textStatus, errorThrown) {
if (jqXHR.status == 500) {
alert(@@#Internal error: @@# + jqXHR.responseText);
} else {
alert(@@#Unexpected error.@@# + jqXHR.responseText);
}
}
});
}
$("#UpdateButton").click(function (e) {
let params = (new URL(document.location)).searchParams;
let id = params.get("id");
data = new FormData();
data.append("CourseId", $("#CourseId").val());
data.append("CourseNumber", $("#CourseNumber").val());
data.append("CourseName", $("#CourseName").val());
data.append("CourseDescription", $("#CourseDescription").val());
data.append("Price", $("#Price").val());
data.append("Capacity", $("#Capacity").val());
alert(data);
$.ajax({
url: "https://localhost:7081/api/Course/UpdateCourses",
type: "post",
data: data,
contentType: "application/json",
success: function (result, status, xhr) {
location.href = "GetAllcourse";;
},
error: function (jqXHR, textStatus, errorThrown) {
if (jqXHR.status == 500) {
alert(@@#Internal error: @@# + jqXHR.responseText);
} else {
alert(@@#Unexpected error.@@# + jqXHR.responseText);
}
}
});
});
});
</script>
تماما مثل Delete استخدمنا JQuery عند تحميل الصفحة لاستدعاء function باسم GetCourse في هذا function استخدمنا الكود
let params = (new URL(document.location)).searchParams;
let id = params.get("id");
بهدف ارجاع رقم الكورس من QueryString ارجع للكود في Edit وتلاحظ ان ارسلنا رقم الكورس في QueryString
وبعدها استدعينا API المسؤول عن ارجاع الكورس بناء على ID ومن ثم قراءنا البيانات وعرضنها في input الموجودة في الصفحة( ما في كود جديد كل الكود الموجود تم شرحه سابقا).
تمام الان بعد ما عرضنا البيانات في input اصبحنا جاهزين لعمل التعديل وإرساله على API خاص بالتعديل.
الكود الخاص ب Update ، استخدمنا JQuery بحيث يتم عند النقر فوق UpdateButton يتم قراءة البيانات من ال View وتخزينها في متغير من نوع FormData باسم data، وفي النهاية بحصل على object يحتوي على مجموعة بيانات المطلوب عمل تعديل لها، وبعدها نبعث هذا object على شكل JSON مع استدعاء API الخاص بالتعديل.
شغل التطبيق وشوف النتيجة وراسلنا.
اترك تعليقك