Breeze/Knockout şablonu

tarafından Mads Kristensen

Breeze/Knockout MVC Şablonu Ward Bell tarafından yazılmıştır

Breeze/Knockout MVC Şablonunu İndirin

"Tek sayfalı uygulama" (SPA) adını duydunuz ve ne olduğunu merak ettiniz. Bu konuyu okuyabilseniz de kendiniz için deneyimlemeniz daha iyi olur. Peki kim örnek indirmek için zaman ayıracak? Visual Studio'nuz varsa, ASP.NET MVC 4 "Breeze/Knockout Tek Sayfalı Uygulama" şablonuyla 60 saniyeden kısa bir süre içinde çalışan örnek bir SPA'nız olur.

Breeze/Knockout SPA Şablonu nedir?

Çoğu proje şablonu bir uygulama iskeleti oluşturur. Kodunuzu ekleyerek bu kemiklere et eklersiniz ve sonunda çalışan bir uygulama teslim edebilirsiniz. Breeze/Knockout SPA şablonu farklıdır. Çalışmanız için örnek bir uygulama oluşturur. Bir SPA uygulaması tasarımını ve SPA oluşturma tekniklerinin çoğunu gösterir.

Breeze/Knockout şablonu, ASP.NET and Web Tools 2012.2 Güncelleştirmesi'nde yer alan KnockoutJS SPA şablonundaki bir çeşitlemedir. Breeze SPA şablonu aynı kullanıcı deneyimine sahip bir uygulama oluşturur, ancak veri yönetimi için Breeze kullanarak farklı bir uygulamaya sahiptir.

KnockoutJS SPA şablonu, basit bir uygulama için yeterli olan ham jQuery AJAX ile hizmet isteklerinde bulunur. Ancak daha gelişmiş uygulamaların daha zorlu veri yönetimi gereksinimleri vardır. Örneğin, çoğu uygulama:

• Genişletilmiş kullanıcı oturumu sırasında sunucuyu sorgulayıp yeniden sorgular.
• Sorgu filtreleri, sıralama ve sayfalama ekleme.
• Aynı verileri birden çok ekranda paylaşın.
• Değişiklikleri birçok nesnede biriktirip tek bir işlem olarak kaydedin.
• Kullanıcının veritabanında değişiklik yapmadan önce hataları düzeltebilmesi için istemcideki değişiklikleri doğrulayın.

BreezeJS kitaplığı bu işleri sizin için gerçekleştirir ve en önemli uygulama mantığını ve kullanıcı deneyimini geliştirmenizi sağlar.

Breeze, geçmişte tek başına masaüstü uygulamaları olarak sunulan uygulama türleri olan JavaScript ve HTML'de zengin veri uygulamaları oluşturmaya yönelik açık kaynak bir kitaplıktır.

Breeze/Knockout şablonu, daha sağlam bir veri yönetimi altyapısına doğru ilk kritik adımı atmanıza yardımcı olur. KnockoutJS SPA şablonuyla dışa doğru aynı olan örnek bir Todo uygulaması üretir. İçerde, AJAX veri katmanını Breeze ile değiştirir, böylece iki yaklaşımı yan yana karşılaştırabilirsiniz. Elbette, breeze uygulamasının potansiyeline dokunmaz. Ancak Breeze'in nasıl çalıştığını ve bu geçişi yapmak için ne kadar az gerekli olduğunu göreceksiniz.

Haydi başlayalım.

Breeze/Knockout Şablon Projesi Oluşturma

Yukarıdaki İndir düğmesine tıklayarak şablonu indirip yükleyin. Şablon bir Visual Studio Uzantısı (VSIX) dosyası olarak paketlenmiştir. Visual Studio'yu yeniden başlatmanız gerekebilir.

Şablonlar bölmesinde Yüklü Şablonlar'ı seçin ve Visual C# düğümünü genişletin. Visual C# altında Web'i seçin. Proje şablonları listesinde ASP.NET MVC 4 Web Uygulaması'nı seçin. Projeyi adlandırın ve Tamam'a tıklayın.

Yeni Proje sihirbazında Breeze Knockout SPA'yı seçin.

Uygulamayı hata ayıklamadan derlemek ve çalıştırmak için Ctrl-F5 tuşlarına veya hata ayıklama ile çalıştırmak için F5 tuşuna basın.

Uygulama ilk kez çalıştığında bir oturum açma ekranı görüntüler. "Kaydol" bağlantısına tıkladığınızda, kullanıcı adı ve parola girebileceğiniz yeni bir sayfa görüntülenir. (Oturum açma ve kayıt sayfaları ASP.NET MVC kullanılarak oluşturulur.) Kayıt formunu gönderdiğinizde, sunucu hesabınız için iki öğe içeren bir TodoList oluşturur. Sonra onları sarı bir notla size sunar.

Artık SPA diyarındasınız. Todos'ı işlerken gördüğünüz ve deneyimlediğiniz her şey, Knockout ve Breeze yardımıyla istemcide işlenir ve yönetilir. Uygulamayı kullanıcı olarak keşfedin... ama geliştirici gözüyle. Ağ trafiğini yakalamak için tarayıcınızdaki geliştirici araçlarını kullanın. (Internet Explorer'da: F12 tuşuna basın, Ağ sekmesini seçin ve Yakalamayı başlat'a tıklayın.) Şimdi aşağıdakileri deneyin:

• Yeni bir Yapılacaklar öğesi ekleyin.
• Etikete tıklayın ve Todo öğesi başlığını düzenleyin
• Öğeyi tamamlandı olarak işaretlemek için onay kutusunu işaretleyin. Metin kutusunun devre dışı bırakıldığından başlığın artık düzenlenemez olduğuna dikkat edin.
• Etiketin sağındaki 'x' işaretine tıklayın. Öğe kaybolur ve veritabanından silinir.
• Başka bir öğe seçin ve başlığını temizleyin. Başlığın gerekli olduğunu belirten bir doğrulama hatası alırsınız. Kısa bir duraklamadan sonra önceki başlık geri yüklenir.
• Saçma bir şekilde uzun bir başlık yazın. Başlığın çok uzun olduğunu belirten farklı bir doğrulama hatası alırsınız.
• "Yapılacaklar Listesi Ekle" düğmesine tıklayın. Önceki listenin solunda yeni bir liste görünür.
• Gerekli ve uzunluk doğrulamalarını tetikleyen TodoList başlığıyla oynayın.
• Hata iletisini temizlemek için başlık metin kutusuna tıklayın.
• TodoList ve todos değerlerini silmek için sağ üst köşedeki dairedeki "x" işaretine tıklayın.

Doğrulama mantığı Breeze tarafından istemci tarafından gerçekleştirilir. Sunucu modeli sınıflarında doğrulama öznitelikleri istemciye yayılır ve istemci sunucuyla bağlantı oluşturmadan önce otomatik olarak yürütülür.

Ağ trafiğini gözden geçirin. Breeze bir hata algıladığında sunucuya hiçbir çağrı olmadığına dikkat edin. Her geçerli değişiklik "/api/Todo/SaveChanges" için bir POST isteğiyle sonuçlandı. Breeze, değişiklikleri paketleyip Web API denetleyicisinin SaveChanges yöntemine tek bir istek olarak gönderir. Bu, her öğe için ayrı ayrı PUT, POST ve DELETE istekleri yapan KnockoutJS SPA şablonundan farklıdır.

İçeriye göz atma

Bu uygulamanın istemci tarafı ve sunucu tarafı vardır. İstemci tarafı yığını, küçük bir HTML ve uygulama JavaScript modüllerinin ("uygulama" klasöründe) ve üçüncü taraf JavaScript kitaplıklarının ("Betikler" klasöründe) birleşiminden oluşur.

KnockoutJS SPA şablonunu araştırdıysanız, bu çok tanıdık görünmelidir. Mavi kutulara odaklan. Ui mimarisi, görünümün HTML pencere öğelerinin görünüm modelindeki destekleyici sunu kodundan temiz bir şekilde ayrıldığı Model-View-ViewModel (MVVM) mimarisidir. Veri bağlama sistemi (bu örnekte Knockout), görünümü ve görünüm modelini koordine eder ve böylece her biri diğerini yakından bilmeden işini yapabilir.

Model, Todo verilerini kapsüller. Modeldeki varlıklar Breeze tarafından Knockout gözlemlenebilir özellikleriyle oluşturulur, böylece doğrudan görünümdeki pencere öğelerine bağlanabilirler. Görünüm modeli, veri bağlamından model varlıklarını almasını ve kaydetmesini ister. Veri bağlamı, işin büyük bölümünü Breeze'e devreder.

Sunucu tarafı yığını bazı geliştirici kodlarından ve üç temel .NET kitaplığından oluşur: Web API,Entity Framework ve Breeze.NET.

Temel mimari, KnockoutJS SPA şablonuyla aynıdır. Ancak, uygulama çok daha basittir: DTO'lar silindi ve Entity Framework ayrıntılarının çoğu Breeze.NET için temsilci olarak atandı.

Sonraki Adımlar

Breeze web sitesinde hem istemci hem de sunucu yığınlarının kapsamlı tartışması tarafından yönlendirilen kodu keşfetmenizi öneririz.

Breeze istemci tarafı sorgusuyla yürütmeyi deneyebilirsiniz; bazı filtreler ve sıralamalar ekleyin. Uçtan uca SPA geliştirme konusunda daha iyi bir his elde etmek için daha fazla model özelliği ve daha fazla varlık ekleyebilirsiniz. Tasarımdan emin olduğunuzda Todo özelliklerini kaldırabilir ve kendi özelliklerinizle değiştirebilirsiniz.

Yakında bir sonraki büyük adıma hazır olacaksınız: İstemci tarafı ekranları ekleme ve bunlar arasında gezinme. Bu SPA şablonunu geride bırakıp, Durandal'ı Breeze ve Knockout karışımına ekleyen John Papa'nın Sıcak Havlusu gibi daha eksiksiz bir SPA yığınına döneceksiniz.