JavaScript İstemcisini Oluşturma

Tamamlanan Projeyi İndir

Bu bölümde HTML, JavaScript ve Knockout.js kitaplığını kullanarak uygulama için istemci oluşturacaksınız. İstemci uygulamasını aşamalı olarak oluşturacağız:

• Kitap listesi gösteriliyor.
• Bir kitap ayrıntısı gösteriliyor.
• Yeni bir kitap ekleme.

Knockout kitaplığı Model-View-ViewModel (MVVM) desenini kullanır:

• Model, iş alanındaki verilerin sunucu tarafı gösterimidir (bizim örneğimizde kitaplar ve yazarlar).
• Görünüm, sunu katmanıdır (HTML).
• Görünüm modeli, modelleri barındıran bir JavaScript nesnesidir. Görünüm modeli, kullanıcı arabiriminin kod soyutlamasıdır. HTML gösterimi hakkında bilgi sahibi değildir. Bunun yerine, görünümün "kitap listesi" gibi soyut özelliklerini temsil eder.

Görünüm, görünüm modeline bağlı veridir. Görünüm modeline Güncelleştirmeler otomatik olarak görünüme yansıtılır. Görünüm modeli, görünümden düğme tıklamaları gibi olayları da alır.

Herhangi bir kodu yeniden yazmadan bağlamaları değiştirebileceğiniz için bu yaklaşım uygulamanızın düzenini ve kullanıcı arabirimini değiştirmeyi kolaylaştırır. Örneğin, öğelerin listesini olarak <ul>gösterebilir ve daha sonra tablo olarak değiştirebilirsiniz.

Knockout Kitaplığı ekleme

Visual Studio'da Araçlar menüsünde NuGet Paket Yöneticisi'ni seçin. Ardından Paket Yöneticisi Konsolu'nu seçin. Paket Yöneticisi Konsolu penceresinde aşağıdaki komutu girin:

Install-Package knockoutjs

Bu komut, Knockout dosyalarını Betikler klasörüne ekler.

Görünüm Modeli Oluşturma

Betikler klasörüne app.js adlı bir JavaScript dosyası ekleyin. (Çözüm Gezgini'da Betikler klasörüne sağ tıklayın, Ekle'yi ve ardından JavaScript Dosyası'nı seçin.) Aşağıdaki kodu yapıştırın:

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'ta sınıfı veri bağlamayı observable etkinleştirir. Gözlemlenebilir bir değişikliğin içeriğinde gözlemlenebilir, veriye bağlı denetimlerin tümünü bilgilendirerek kendilerini güncelleştirebilmelerini sağlar. observableArray(sınıfı, gözlemlenebilir dizisi sürümüdür.) Başlangıç olarak, görünüm modelimizin iki gözlemlenebilir noktası vardır:

• books kitap listesini barındırıyor.
• error bir AJAX çağrısı başarısız olursa bir hata iletisi içerir.

yöntemi, getAllBooks kitapların listesini almak için bir AJAX çağrısı yapar. Ardından sonucu diziye iter books .

ko.applyBindings yöntemi, Knockout kitaplığının bir parçasıdır. Görünüm modelini parametre olarak alır ve veri bağlamasını ayarlar.

Betik Paketi Ekleme

Paketleme, ASP.NET 4.5'te birden çok dosyayı tek bir dosyada birleştirmeyi veya paketlemeyi kolaylaştıran bir özelliktir. Paketleme, sunucuya yönelik istek sayısını azaltır ve bu da sayfa yükleme süresini iyileştirebilir.

App_Start/BundleConfig.cs dosyasını açın. Aşağıdaki kodu RegisterBundles yöntemine ekleyin.

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

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

ÖncekiSonraki