Membuat Klien JavaScript

Unduh Proyek yang Selesai

Di bagian ini, Anda akan membuat klien untuk aplikasi, menggunakan HTML, JavaScript, dan pustaka Knockout.js . Kami akan membuat aplikasi klien secara bertahap:

• Menampilkan daftar buku.
• Menampilkan detail buku.
• Menambahkan buku baru.

Pustaka Knockout menggunakan pola Model-View-ViewModel (MVVM):

• Model ini adalah representasi sisi server dari data di domain bisnis (dalam kasus kami, buku, dan penulis).
• Tampilan adalah lapisan presentasi (HTML).
• Model tampilan adalah objek JavaScript yang menyimpan model. Model tampilan adalah abstraksi kode UI. Ini tidak memiliki pengetahuan tentang representasi HTML. Sebaliknya, ini mewakili fitur abstrak tampilan, seperti "daftar buku".

Tampilan terikat data ke model tampilan. Updates ke model tampilan secara otomatis tercermin dalam tampilan. Model tampilan juga mendapatkan peristiwa dari tampilan, seperti klik tombol.

Pendekatan ini memudahkan untuk mengubah tata letak dan UI aplikasi Anda, karena Anda dapat mengubah pengikatan, tanpa menulis ulang kode apa pun. Misalnya, Anda mungkin menampilkan daftar item sebagai <ul>, lalu mengubahnya nanti menjadi tabel.

Menambahkan Pustaka Knockout

Di Visual Studio, dari menu Alat , pilih Pengelola Paket NuGet. Lalu pilih Konsol Manajer Paket. Di jendela Konsol Manajer Paket, masukkan perintah berikut:

Install-Package knockoutjs

Perintah ini menambahkan file Knockout ke folder Skrip.

Membuat Model Tampilan

Tambahkan file JavaScript bernama app.js ke folder Skrip. (Di Penjelajah Solusi, klik kanan folder Skrip, pilih Tambahkan, lalu pilih File JavaScript.) Tempelkan kode berikut:

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());

Di Knockout, observable kelas mengaktifkan pengikatan data. Ketika konten perubahan yang dapat diamati, yang dapat diamati memberi tahu semua kontrol terikat data, sehingga mereka dapat memperbarui diri mereka sendiri. (Kelas observableArray adalah versi array yang dapat diamati.) Untuk memulainya, model tampilan kami memiliki dua yang dapat diamati:

• books menyimpan daftar buku.
• error berisi pesan kesalahan jika panggilan AJAX gagal.

Metode ini getAllBooks melakukan panggilan AJAX untuk mendapatkan daftar buku. Kemudian mendorong hasilnya ke books array.

Metode ko.applyBindings ini adalah bagian dari pustaka Knockout. Dibutuhkan model tampilan sebagai parameter dan menyiapkan pengikatan data.

Menambahkan Bundel Skrip

Bundling adalah fitur di ASP.NET 4.5 yang memudahkan untuk menggabungkan atau menggabungkan beberapa file ke dalam satu file. Bundling mengurangi jumlah permintaan ke server, yang dapat meningkatkan waktu pemuatan halaman.

Buka file App_Start/BundleConfig.cs. Tambahkan kode berikut ke metode RegisterBundles.

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

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

SebelumnyaBerikutnya