ساخت رابط کاربری (UI)

در این قسمت  از  آموزش ASP.NET Web API  ، کد HTML اپلیکیشن را تعریف خواهیم کرد و ارتباط داده‌ای یا data binding بین HTML و View Model برقرار خواهیم کرد.

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

 

فایل  Views/Home/Index.cshtml  را باز کنید. کد زیر را با کل محتوای درون این فایل جایگزین کنید.

@section scripts {
  @Scripts.Render("~/bundles/app")
}

<div class="page-header">
  <h1>BookService</h1>
</div>

<div class="row">

  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h2 class="panel-title">Books</h2>
      </div>
      <div class="panel-body">
        <ul class="list-unstyled" data-bind="foreach: books">
          <li>
            <strong><span data-bind="text: AuthorName"></span></strong>: <span data-bind="text: Title"></span>
            <small><a href="#">Details</a></small>
          </li>
        </ul>
      </div>
    </div>
    <div class="alert alert-danger" data-bind="visible: error"><p data-bind="text: error"></p></div>
  </div>

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

  <div class="col-md-4">
    <!-- TODO: Add new book -->
  </div>
</div>

تگ های div  استایلشان را از بوت استرپ دریافت می کنند   . عناصر مهم، عناصر با ویژگی data-bind هستند. این ویژگی، HTML را با view model لینک میکند.

برای مثال:

<p data-bind="text: error">

در این مثال، بایند “text” باعث می‌شود تگ <P> مقدار error را از view model خوانده و نشان دهد. به خاطر داشته باشید که error به شکل ko.observable معرفی شده است:

self.error = ko.observable();

هرزمان مقدار جدیدی برای error مشخص شود، Knockout متن داخل عنصر <p> را به روز می‌کند.

بایند کرد نforeach به Knockout باعث می شود که محتوای داخل آرایه books را به شکل حلقه خوانده شود . برای هر آیتم درون آرایه، Knockout یک عنصر جدید <li> می‌سازد. بایندهای درون foreach ، به ویژگی‌های آرایه ارجاع داده می شود . برای مثال:

<span data-bind="text: Author"></span>

در اینجا بایند text ویژگی‌های نویسنده هر کتاب را می‌خواند.

حالا اگر اپلیکیشن را اجرا کنید، آن را به این شکل می‌بینید:

Web API

لیست کتاب‌ها، پس از لود صفحه، به صورت آسانکرون لود می‌شود. در حال حاضر، لینک‌های “Details” عملگر نیستند. در بخش بعدی، این قابلیت را نیز اضافه خواهیم کرد.

ورکشاپ رایگان دوره های تخصصی برنامه نویسی

شما این فرصت را دارید، با تکمیل فرم زیر، قبل از انتخاب دوره آموزشی مناسب خود، در ورکشاپ رایگان دوره های تخصصی برنامه نویسی شرکت کنید

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

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

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