دوره های آموزشی
خانه / Web API / ساخت رابط کاربری (UI)

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

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

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

 

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

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

برای مثال:

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

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

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

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

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

Web API

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

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

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

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