در این قسمت از آموزش ASP.NET Web API ، کد HTML اپلیکیشن را تعریف خواهیم کرد و ارتباط دادهای یا data binding بین HTML و View Model برقرار خواهیم کرد.
پست های قبلی آموزش Web API :
- آموزش APS.NET Web Api 2 با انتیتی فریم ورک ۶ (Entity Framework)
- افزودن مدل و کنترلرها – آموزش ASP.net Web API
- Seed کردن ساختمان داده – آموزش API
- روابط موجود در انتیتی – آموزش تصویری WEB API
- ساخت اشیاء انتقال داده یا DTOها
- ساخت اپلیکیشن سمت کاربر با فرمت Javascript
فایل 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 ویژگیهای نویسنده هر کتاب را میخواند.
حالا اگر اپلیکیشن را اجرا کنید، آن را به این شکل میبینید:
لیست کتابها، پس از لود صفحه، به صورت آسانکرون لود میشود. در حال حاضر، لینکهای “Details” عملگر نیستند. در بخش بعدی، این قابلیت را نیز اضافه خواهیم کرد.