JavaScript İstemcisi 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şamalar halinde oluşturacağız:

• Kitap listesi gösteriliyor.
• Bir kitabın detayı gösteriliyor.
• Yeni bir kitap ekleme.

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

• Model, iş etki alanındaki (bizim durumumuzda kitaplar ve yazarlar) verilerin sunucu tarafı gösterimidir.
• 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 bilgisi yoktur. 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ı verilerdir. Görünüm modelindeki güncelleştirmeler görünüme otomatik olarak yansıtılır. Görünüm modeli, görünümden düğme tıklamaları gibi olayları da alır.

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

Knockout Kitaplığı ekle

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'nde 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 observable sınıfı veri bağlamayı etkinleştirir. Gözlemlenebilir bir değişiklik olduğunda, tüm veriyle bağlı denetimler, kendilerini güncelleyebilmeleri için bilgilendirilir. observableArray(sınıfı gözlemlenebilir dizisi versiyonudur.) Başlangıç olarak, görüntü modeli üç gözlemlenebilir noktaya sahiptir:

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

yöntemi, getAllBooks kitap listesini almak için bir AJAX çağrısı yapar. Ardından sonucu books dizisine aktarır.

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ğlamayı ayarlar.

Betik Paketi Ekle

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. RegisterBundles yöntemine aşağıdaki kodu ekleyin.

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

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

ÖncekiSonraki