ساخت اپلیکیشن سمت کاربر با فرمت Javascript

در این بخش از آموزش Web API با استفاده از HTML، Javascript و  Knockout.js   اپلیکیشنی برای سمت کاربر خواهیم ساخت. این اپلیکیشن سمت کاربر  شامل قسمت های زیر می باشد :

• نمایش لیست کتاب‌ها
• نمایش جزئیات کتاب‌ها
• افزودن کتاب جدید

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

• آموزش APS.NET Web Api 2 با انتیتی فریم ورک ۶ (Entity Framework)
• افزودن مدل و کنترلرها – آموزش ASP.net Web API
• Seed کردن ساختمان داده – آموزش API
• روابط موجود در انتیتی – آموزش تصویری WEB API
• ساخت اشیاء انتقال داده یا DTOها
• ساخت اپلیکیشن سمت کاربر با فرمت Javascript
• ساخت رابط کاربری (UI)

Knockout از الگوی (MVVM) یا Model-View-ViewModel استفاده می‌کند:

• Model قسمتی از پروژه است که کلاس های  business domain در آن تعریف می شود (برای مثال، کتاب‌ها و نویسنده‌ها).
• View لایه  نمایش اطلاعات است (HTML).
• View model اشیائی در زبان Javascript است که مدل‌ها را نگه می‌دارد. View model در واقع کد انتزاعی رابط کاربری است. هیچ کدی به زبان HTML در خود ندارد. به جای آن، ویژگی‌های دیداری مانند لیست کتاب‌ها را در خود دارد.

آموزش Web API

نمایش داده‌ها بستگی به View model دارد. به روز رسانی‌های view model به صورت خودکار در نمایش داده تاثیر دارد. View model همچنین رویدادهایی مانند کلیک‌های هر دکمه را ثبت میکند.

این روش باعث می شود که تغییرات در رابط کاربری اپلیکیشن به راحتی انجام شود ، چون شما مقید سازی داده ها را بدون نوشتن کد اضافی می توانید انجام دهید . به عنوان مثال لیست آیتم های نمایش داده شده به وسیله ul را بخواهید بعدا به جدول تبدیل کنید.

افزودن Knockout Library

در Visual Studio و از طریق منوی Tools، گزینه  Library Package Manager را انتخاب کنید. سپس گزینه Package Manager Console را انتخاب نمایید. در پنجره باز شده با عنوان Package Manager Console، دستور زیر را وارد نمایید:

Install-Package knockoutjs

این دستور فایل‌های Knockout را به پوشه اسکریپت‌ها اضافه می‌کند.

ساخت View Model در آموزش Web API

فایل Javascript یی با نام app.js را به پوشه اسکریپت‌ها اضافه کنید.(در بخش Solution Explorer، بر روی پوشه Scripts راست کلیک کنید، سپس Add را انتخاب نموده و Javascrpt File را برگزینید.) کد زیر را در آنجا paste کنید:

var ViewModel = function () {
    var self = this;
    self.books = ko.observableArray();
    self.error = ko.observable();

    var booksUri = '/api/books/';

    function ajaxHelper(uri, method, data) {
        self.error(''); // Clear error message
        return $.ajax({
            type: method,
            url: uri,
            dataType: 'json',
            contentType: 'application/json',
            data: data ? JSON.stringify(data) : null
        }).fail(function (jqXHR, textStatus, errorThrown) {
            self.error(errorThrown);
        });
    }

    function getAllBooks() {
        ajaxHelper(booksUri, 'GET').done(function (data) {
            self.books(data);
        });
    }

    // Fetch the initial data.
    getAllBooks();
};

ko.applyBindings(new ViewModel());

در Knockout، کلاس observable بایند کردن داده‌ها را فعال می‌کند. زمانی که محتوای observable  تغییر می‌کند، observable  به تمام کنترل‌های data-bound خبر می‌دهد تا خود را به روز کنند. (کلاس observableArray ورژن آرایه‌ای برای observable  است.) برای شروع، View model ما دو observable دارد:

• Books لیست کتاب‌ها را در خود دارد.
• error در صورتی که فراخوانی AJAX با شکست مواجه شود، پیامی مبنی بر رخداد خطا صادر می‌کند.

متد getAllBooks، با فراخوانی AJAX ، لیست کتاب‌ها را به دست می‌آورد. پس از آن نتایج را در آرایه Books قرار می‌دهد.

متد ko.applyBindigs بخشی از  کتابخانه Knockout می‌باشد. این متد View model را به عنوان یک پارامتر گرفته و data-binding را انجام می دهد .

افزودن Script Bundle

باندل کردن ویژگی‌ای در ASP.NET 4.5 است که ترکیب چند فایل را در یک فایل به سادگی انجام می دهد . باندل کردن تعداد درخواست‌های ارسالی به سرور را کاهش داده و همین امر می‌تواند موجب بهبود زمان بارگیری صفحه شود.

فایل App_Start/BundleConfig.cs را باز کنید. کد زیر را به متد RegisterBundles  اضافه کنید.

public static void RegisterBundles(BundleCollection bundles)
{
    // ...

    // New code:
    bundles.Add(new ScriptBundle("~/bundles/app").Include(
              "~/Scripts/knockout-{version}.js",
              "~/Scripts/app.js"));
}

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