آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

ساختن View

دوره های مرتبط با این مقاله

ساختن view (UI)

در این قسمت، قصد داریم برای برنامه یک صفحه HTML تعریف کنیم و بین HTML و view model اطلاعات منتقل کنیم.

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

@section scripts {
 Scripts.Render("~/bundles/app")
}
< div class="page-header" >
                            < h1 >BookService
< /div >
< div class="row" >
< div class="col-md-4" >
                            < div class="panel panel-default" >
                            < div class="panel-heading" >
                            < h2 class="panel-title" >Books
     < /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 برای استایل دهی Bootstrap هستند. مهمترین المان ها آنهایی هستند که attribute های data-bind را دارند. این attribute ، HTML را به view model بسط می دهد.

برای مثال:

"text: error">

در این مثال، انقیاد(binding) text باعث می شود عنصر < p > مقدار خاصیت error را از view model نمایش دهد. لازم به یادآوری است که error به عنوان یک ko.observable معرفی شده است:

self.error = ko.observable();

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

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

در اینجا binding text خاصیت Author در هر book را می خواند. اگر الان شما برنامه را اجرا کنید، برنامه شما باید شبیه تصویر زیر باشد:

آموزش Web Api

لیست کتاب ها بعد از بارگذاری صفحه به صورت ناهمسان(asynchronous) بارگذاری می شود. در این قسمت لینک های Details کاربردی نیستند. در قسمت بعد این عملکرد را توضیح خواهیم داد.

  • 1003
  •    1084
  • تاریخ ارسال :   1395/03/07

دانلود PDF دانلود فیلم آموزشی دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ساختن View
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

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