public async Task<ActionResult<IEnumerable<CoursesModel>>> GetCoursesModel()

using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using StudentPortal.Models;
namespace StudentPortal.Controllers
{
    public class CourseController : Controller
    {
        public async Task<IActionResult> Index()
        {
            List<CoursesModel> CoursesList = new List<CoursesModel>();
            using (var httpClient = new HttpClient())
            {
                using (var response = await httpClient.GetAsync("https://localhost:7081/api/Course/GetAllCourses"))
                {
                    string apiResponse = await response.Content.ReadAsStringAsync();
                    CoursesList = JsonConvert.DeserializeObject<List<CoursesModel>>(apiResponse);
                }
            }
return View(CoursesList);
        }
    }
}

تمام لاحظ الكود

List<CoursesModel> CoursesList = new List<CoursesModel>();

 عرفنا List من نوع CoursesModel حتي نخزن البيانات فيها. 

بعدها استخدمنا الامر 

 

var response = await httpClient.GetAsync("https://localhost:7081/api/GetAllCourses")

الهدف قراءة البيانات من Web API باستخدام httpClient.GetAsync الى هو مشتق من System.Net.Http namespace 

لاحظ كمان ان Index Action من نوع async يعني asynchronous  والسبب ان HttpClient class تقدم طلبًا غير متزامن asynchronous فقط والذي يمكن أن يحدث فقط من طريقة إجراء غير متزامن asynchronous action method. واكيد بنستخدم await  مع async

وطبعا بما ان احنا شغالين Local اكيد بكون الرابط Local ( الرابط متغير حسب API)، بعدها عرفنا متغير باسم apiResponse بحتوي على محتويات APIباستخدام response.Content.ReadAsStringAsync()، وحسب ما تعلمنا وعرفنا ان API برجع الداتا على شكل JSON، بعدها لازم نعمل Deserialize لهاي الداتا، بعدها استخدمنا الامر

 JsonConvert.DeserializeObject<List<CoursesModel>>(apiResponse);

 وعملنا Deserialize حتي نرجع البيانات ونخزنها في CoursesList 

اخر سطر رجعنا الداتا الي تخزنت في المتغير CoursesList الى View،

تمام خلينا نحاول نشغل التطبيق، ستكون النتيجة خطأ :(لاحظ الصورة )

السبب في هذا الخطا ان بعد ما عملنا View لهذا Action 

 

طيب الان صار دور نعمل View حتي نعرض البيانات، ولعمل View المطلوب انقر يمين فوق index action في ال controlloer وبعدها اخترا Add View

وبعدها بنختار 

خلينا نحاول نشغل التطبيق الان بالدخول الى الرابط   :

https://localhost:7242/Course

ملاحظة : يما ان الشغل local ، فا لازم يكون المشروع تبع API شغال حتي يتم قراءة البيانات بشكل صحيح

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

لاحظ ان ما في اي بيانات رجعت، للتاكد من ان الشغل صح وما في مشاكل خلينا نعمل BreakBoint في index action ونشوف النتائج (شوف الصورة)

@model IEnumerable<CoursesModel>
@{ Layout = "_Layout"; ViewBag.Title = "Get Course by Id";}
 
<h2>Get Course by Id </h2>
<h3>@ViewBag.StatusCode</h3>
<form method="post">
    <div class="form-group">
        <label for="id">Course Id:</label>
        <input class="form-control" name="id" />
          
    </div>
    <hr />
    <div class="form-group">
      <button type="submit" class="btn btn-sm btn-secondary">Get Course Details</button>
    </div>
</form>
@if (Model != null)
{
    <h2>Course Details</h2>
  
<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>
        @foreach (var C in Model)
        {
            <tr>
                <td>@C.CoursesId</td>
                <td>@C.CourseNumber</td>
                <td>@C.CourseName</td>
                <td>@C.CourseDescription</td>
                <td>@C.Price</td>
                <td>@C.Capacity</td>
                <td>
                    <a asp-action="UpdateReservation" asp-route-id="@C.CoursesId">Edit
                        @*<img src="/icon/edit.png" />*@
                    </a>
                </td>
<td>
                    <form asp-action="DeleteReservation" method="post">
                        <input type="hidden" value="@C.CoursesId" name="CoursesId" />
                        <input type="button" value="Delete" class="btn btn-danger">
                       @* <input type="image" src="/icon/close.png" />*@
                    </form>
                </td>
            </tr>
        }
    </tbody>
</table>
}

public ViewResult AddCourses() => View();
        [HttpPost]
        public async Task<IActionResult> AddCourses(CoursesModel coursesModel)
        {
            CoursesModel receivedCoursesModel = new CoursesModel();
            using (var httpClient = new HttpClient())
            {
                StringContent content = new StringContent(JsonConvert.SerializeObject(coursesModel), Encoding.UTF8, "application/json");
                using (var response = await httpClient.PostAsync("https://localhost:7081/api/Course/AddCourses", content))
                {
                }
            }
           return Redirect("Index");
        }

كما فعلنا في action السابق تم إضافة نوعين  2 action هنا الاول HTTP GET والثاني  HTTP POST.

الفرق هنا ارسلنا object  من نوع CoursesModel يحتوي على تفاصيل المادة.

تحتاج Web API method إلى بيانات بتنسيق JSON ، لذلك يجب عمل serializing للبيانات لتحويلها الى JSON ومن ثم تحويلها إلى نوع StringContent class.

الكود 

StringContent content = new StringContent(JsonConvert.SerializeObject(coursesModel), Encoding.UTF8, "application/json");

الان اصبح عندنا Object  من نوع StringContent باسم content يحتوي تفاصيل المادة الجديدة، الخطوة القادمة ارسال هذا Object الى Web API باستخدام httpClient.PostAsync على شكل   parameter ويكون رقم 2 

الكود 

using (var response = await httpClient.PostAsync("https://localhost:7081/api/Course/AddCourses", content))

تمام الان دور نشغل التطبيق ونشوف النتائج:

ادخل الرابط التالي في المتصفح: 

https://localhost:7242/Course/AddCourses

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

تمام جرب دخل بيانات للمادة بعدها اضغط على add 

للتذكير : لازم مشروع API يكون شغال.

بعمل Breakpoint في مشروع Web API بتكون النتيجة مثل الصورة :

مثل ما هو واضح القيم موجوده في  CoursesModel 

الكود الأخير: 

           return Redirect("Index");

بنرجع الصفحة لصفحة عرض جميع المواد 

تمام الان بنطلب منك تطبيق Edit , و Delete حتي نتأكد ان الموضوع واضح ومفهوم. (إذا ما عرفت كيف راسلنا وبنبعثلك الطريقة)