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 membangun 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 dari data di sisi server dalam domain bisnis (dalam kasus kami, buku dan penulis).
• Tampilannya 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. Pembaruan pada 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 NuGet Package Manager. 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 isi dari perubahan yang dapat diamati berubah, maka observable akan memberi tahu semua kontrol yang terikat data, agar mereka dapat memperbarui diri. (Kelas observableArray adalah versi array dari observable.) Untuk memulainya, model tampilan kami memiliki dua observable:

• 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.

ko.applyBindings metode ini adalah bagian dari pustaka Knockout. Ini mengambil 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