نمایش جزئیات هر آیتم – آموزش Web API 2

در این پست از آموزش Web API 2 ، قابلیت نمایش جزئیات را به هر کتاب خواهید افزود.

با این مقاله از آموزشگاه های برنامه نویسی در مشهد همراه ما باشید.

پست های قبلی آموزش ۲ Web API :

 

در app.js، کد زیر را به vie model اضافه کنید:

self.detail = ko.observable();

self.getBookDetail = function (item) {
    ajaxHelper(booksUri + item.Id, 'GET').done(function (data) {
        self.detail(data);
    });
}

به مسیر Views/Home/Index.cshtml و المان  data bind را به لینک جزئیات اضافه کنید:

<ul class="list-unstyled" data-bind="foreach: books">
  <li>
    <strong><span data-bind="text: AuthorName"></span></strong>: <span data-bind="text: Title"></span>
    <!-- New code -->
    <small><a href="#" data-bind="click: $parent.getBookDetail">Details</a></small>
  </li>
</ul>

این کد، کنترلگر کلیک یا click handler در تگ <a> را در تابع getBookDetail بر روی view model بایند می‌کند.

در فایل مشابه، نشانه زیر را:

<div class="col-md-4">
    <!-- TODO: Book details -->
</div>

با این جایگزین کنید:

<!-- ko if:detail() -->

<div class="col-md-4">
<div class="panel panel-default">
  <div class="panel-heading">
    <h2 class="panel-title">Detail</h2>
  </div>
  <table class="table">
    <tr><td>Author</td><td data-bind="text: detail().AuthorName"></td></tr>
    <tr><td>Title</td><td data-bind="text: detail().Title"></td></tr>
    <tr><td>Year</td><td data-bind="text: detail().Year"></td></tr>
    <tr><td>Genre</td><td data-bind="text: detail().Genre"></td></tr>
    <tr><td>Price</td><td data-bind="text: detail().Price"></td></tr>
  </table>
</div>
</div>

<!-- /ko -->

این نشانه گذاری جدولی که دیتا بایند شده است را در ویژگی‌های قابل مشاهده detail در view model می‌سازد.

عبارت یا سینتکس “<!– ko –>” به شما اجازه می‌دهد Knockout binding را، خارج از عنصر DOM بسازید. در این شرایط، بایند if باعث می‌شود این بخش از نشانه گذاری تنها زمانی نمایش داده شود که details به صورت null نباشد.

<!-- ko if:detail() -->

حالا اگر این اپلیکیشن را اجرا کنید و بر روی یکی از لینک‌های detail کلیک کنید، اپلیکیشن به شما جزئیات کتاب را نمایش خواهد داد.

Web API

 

جهت شرکت در دوره های آکادمی برنامه نویسان مشهد می توانید از طریق شماره تماس های پایین سایت با ما در ارتباط باشید

دریافت مشاوره حرفه ای و رایگان از متخصصین آکادمی برنامه نویسان مشهد

شما این فرصت را دارید، با تکمیل فرم زیر، قبل از انتخاب دوره آموزشی مناسب خود از مشاوره حرفه ای و رایگان متخصصین کلاس برنامه نویسی در مشهد استفاده کنید
  • این فیلد برای اعتبار سنجی است و باید بدون تغییر باقی بماند .

درباره‌ی برنامه نویسان

همچنین ببینید

احراز هویت با استفاده از Google در ASP.NET Core 2.0

آموزش احراز هویت با استفاده از Google در ASP.NET Core 2.0 : گاهی اوقات، لازم …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *