ASP .NET MVC 5’de Bootstrap ve KnockoutJS

Selamlar;

Öncelikle bu güzel tatil gününde herkesin bayramını kutlar, sağlık, esenlik ve huzur dolu nice bayramlar dilerim.

Bugün front-end web uygulamaları geliştirmede popüler ASP.NET MVC 5’de, Bootstrap ve KnockoutJS’in nasıl kullanıldığını hep beraber inceleyeceğız.

Twitter Bootstrap, biz web developerlara hatasız, güçlü ve kullanışlı bir HTML, CSS, JavaScript framework’ü sunar. Bu yapı günümüzde hali hazırdaki birçok browser ile uyumlu çalışır. Bootstarp kullanmanın en büyük avantajı, bize Form, Table, List gibi kullanıma hazır UI elemanları sağlamasıdır.

Bugünkü örneğimizde işe alım için başvuran kişilerin bilgilerini kaydettiğimiz bir form hazırlayacağız. Öncelikle aşağıdaki gibi PersonInformation tablosu oluşturulur.

Visual Studio 2015’de aşağıda görüldüğü gibi Asp.Net Web App boş bir Mvc projesi yaratılır.

WebApp

Database işlemleri için Entity Framework ve CodeFirst kullanılmıştır. Solution’a aşağıdaki gibi bir DAL projesi yaratılıp eklenir.

Entity

PersonInformation poco’su aşağıdaki gibi oluşturulur.

Şimdi form ekranları için yeni bir proje yaratıp, HTML UI için Knockout.js Javascript kütüpahanesini kullanacağız. KnockoutJs client side tarafta MVVM design patternini kullanan lightweight bir web arayüz aracıdır. NuGet’den aşağıdaki gibi indirilir.

knock

Bootstarp ve Jquery Library de NuGet’den aşağıdaki gibi indirilir. Önemli bir nokta ben bootstrap package’ı indirdiğimde fontlar gelmedi. Sanırım bu ufak bir bug:) Bunun için bootstrap.com adresinden bootstrap’in son geçerli versiyonu v3.3.5’i indirilip, fonts altındaki tüm “glyphicons-halflings” ile başlıyan font dosyaları projedeki “Content” folder altına atılır. Böylece sayfada gelmeyen simgeler görünmeye başlar.

boot2

boot

Şimdi geldik javascript tarafında KnockoutJs ile yazacağımız kodlara. Öncelikle aşağıdaki javascript kütüpahaneleri PersonInfo.js dosyasına eklenir.

Aşağıdaki kodda öncelikle bir ViewModel oluşturulur. Ve bu model sayfa yüklemesi tamamlandığında ($(document).ready())  durumunda bind edilir. “self” dediğimiz, ViewModel’in kendisidir. Belirlenen user propertyleri “self”‘e atanır. Daha sonra “PersonInfo”‘a ait tanımlanan dinamic propertyler’e ilgili ViewModel’deki değerler atanır. Böylece “Edit”, “Update” gibi işlemler için dönüş tipi “PersonalInfo” şeklinde belirlenmiş olunur. İlgili kişi üzerinde çalışalacağı zaman buna bind olan ViewModel ve ona bağlı olan PersonInfo bundan etkilenir.

Script ilk yüklenirken “self”‘e yani ViewModel’e, dinamik yeni propertyler tanımlanırken default değerler aşağıdaki gibi atanır. Mesela “Persons”‘ın bir dizi olacağı “[]” ataması ile belirlenir. Ayrıca “Occupations” meslekler  ve “City” array propertyleri dropdown olarak açılacak listeye datasource olması amaçlı default olarak doldurulan alanlardır. Ayrıca script ilk yüklendiğinde kayıtlı kişileri çekip listelemek için, “loadInformation()” methodu kullanılır. Ilgili method “GetPerson()”‘a request atarak “self.Persons” array property’sini doldurur.  Bir önemli nokta da “SelectedOccupation” propertysi dir. Bu değişken, seçilen mesleği üzerine alır. Ve değişim durumunda, yani “subscribe” event’i tetiklenince, ilgili değişmiş değer “Occupation” değerine aşağıdaki gibi atanır.

Şimdi sıra geldi seçilen bir kişinin ViewModel’e atanıp ilgili alanda gösterilmesine: (per) gelen kişi bilgilerini içeren yukarıda tanımladığımız “PersonInfo” sınıfına aittir. “modal(‘show’)” özelliğine bootstarp konusunda değineceğiz. “IsUpdatable” tanımlı değişkeni, ilgili PersonInfo’nun kaydetme durumunda “Update” mi “Insert” mü olucağına karar veren bir parametredir. Mesela burada “true” değeri atanmıştır. Çünkü edit işlemi gerçekleşecektir, yani databasede “Update” yapılacaktır.

İlgili PersonInfo sınıfının kaydetme işleminde “Update” mi “Insert” mü olacağının kararını yukarıda belirtiğimiz “IsUpdatable” parametresi ile belirleyip, Insert için “SavePerson()” “Update” için “UpdatePerson()” methodlarına, ilgili sınıf json olarak ajax “Post” edilmiştir. Her iki methodda da olumlu sonuçlanması durumunda, tüm kayıtlar tekrardan çekilip, ViewModel doldurulmuş ve bunu kullanan tüm elementler bundan etkilenerek ilgili datayı yapılan değişiklikle birlikte tekrardan göstermiştir. Ayrıca “IsUpdatable”‘in tekrardan false’a atanması ihmal edilmemiştir.

Son olarak kayıt silindiği zaman aşağıdaki function çağrılmakta ve silinecek PersonInfo ajax “Post” ile “PersonID” parametresi “DelPerson()” methoduna gönderilmektedir.

PersonInfo.js(Full):

Şimdi sıra geldi server side tarafında ilgili kayıt için yapılan C.R.U.D işlemlerine: Database işlemleri için Entity framework ve Linq kullanılmıştır.

Aşağıda görüldüğü gibi “GetPerson()” methodu için “PersonInformation” listesi çekilip “JsonResult” olarak döndümüştür. “UpdatePerson()” methodunda “PersonInformation” tipinde parametre alınıp ilgili kayıt güncellenir. Aynı şekilde “SavePerson()” methodunda yeni kişi kaydedilir. “DelPerson()”‘da da silinecek kişinin “ID” değeri parametre olarak alınıp silinir.

HomeController.cs(Full) :

Şimdi sıra geldi UI ekrana. Öncelikle “<head>” altına alttaki script kütüphaneleri ve css dosyaları include edilir. Böylece jquery, knockoutjs, bootstarp ve yazdığımız PersonInfo.js projemize eklenmiş olur.

Record

Öncelikle aşağıda görüldüğü gibi kayıtlı kişileri sıralayan tabloyu oluşturalım. Bunun için DataBinding UI  kullanılmıştır. Yukarıda, sayfa ilk yüklenirken PersonInfo.js’de “loadInformation()” function’ını çağırılmıştır. ViewModel’deki “Persons” property’si tek tek gezilerek herbir “PersonInfo” modeli ilgili text alana “data-bind” edilir. Tabloda 2 tane işlem kolonu vardır. “Güncelleme ve Silme”. Bir de yukarıda “Yeni Çalışan Ekle” şeklinde bir button bulunmaktadır. Güncelle ve Silme işlemlerinde root’a yani ViewModel le bağlı yukarıda tanımlanan (“getSelect()” ve “delete()”) functionları çağrılmıştır.

Yeni kayıt eklemek için “btnaddperson” idli button’un, tıklanma durumunda bootstrap ile tanımlı gelen “modal()” functionın kullanım şekli aşağıdaki gibidir. Bu sayede ilerde tanımlayacağımız görünmeyen div, sanki popup bir sayfa gibi gözükecektir.

newrecord2

Aşağıda “personPage” divinin altına yeni kullanıcı girişi için farklı tipte input elemanları konmuştur. “class=’modal'” bootstarp’den gelen bir css dir. “modal(‘show’)” ve “modal(‘hide’)” functionları, tanımlı “personPage” divini popup gibi gösterip, gizler. PersonInfo’ya ait giriş elementleri ilgili div altına tanımlanmış ve view model’e knockoutJs sayesinde bind edilmişlerdir. Burda diğerlerinden farklı olarak “Occupations” yani işler combosu data-bind için”options:Occupations (listenin çekileceği alan),optionsCaption:’Birini Seçiniz’ (default başta görünecek text), value: SelectedOccupation (seçli elemanın bağlanacağı property)” attributeları ile tanımlanmıştır. “SelectedOccupation” değişince “subscribe()” functionı tetiklenir ve “Occupation” buna bağlı olarak değişir.  PersonInfo sınıfı da ilgili değişiklikten etkileneceği için kaydetme ve güncelleme işlemleri de, doğru bir şekilde yapılmış olunur. Kaydetme işlemi için “save()” methodu çağrılır. Yeni kayıt girişinde “IsUpdatable” “false” olduğı için “SavePerson()” methodu çağrılarak yeni kayıt girişi sağlanır.

editrec2

Index.cshtml(Full):

Güncelle yani kalem ikonlu buttona basıldığında “getSelected()” methodu çağrılır. İlgili kayıt çekilip “IsUpdatable”‘a “true” değeri atanır. Böylece update işleminin yapılacağı anlaşılır ve “UpdatePerson()” methodu çağrılır.

Böylece geldik bir makalenin daha sonuna. Bu makalede bootstrap sayesinde tasarım anlamında nerede ise hiç bir çalışma yapılmadan , ayrıca knockoutJS ile UI Databinding kullanılarak single page bir uygulama nasıl yapılır hep beraber inceledik.

Yeni bir makalede görüşmek üzere hoşçakalın.

Source Code: http://www.borakasmer.com/projects/Bootstarp.rar

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

13 Cevaplar

  1. Gençay Yıldız dedi ki:

    Harikasınız hocam,
    Sizi tanıdığıma çok memnun oldum.Verimli bir blog yaratıyorsunuz ve sizden bu konuda oldukça feyz alıyorum.

    Kaliteli içeriklerinizde bilgi konusunda oldukça bonkör olduğunuz için teşekkür ederim.

    Saygılarımla…

  2. çağrı dedi ki:

    Sanada iyi bayramlar kaptan (geçte olsa)

  3. Cihan Dokur dedi ki:

    Ellerine sağlık Bora, çok güzel bir anlatım olmuş.

  4. Mustafa dedi ki:

    Harikulade bir yazı olmuş, ellerinize gönlünüze sağlık, böyle bilinmedik, kaynak sıkıntısı çekilen noktalarda yeni yazılar görmek dileğiyle, iyi çalışmalar dilerim.

  5. Emre Sevinç dedi ki:

    Çok güzel bir paylaşım olmuş. Elinize sağlık hocam.

  6. murat dedi ki:

    merhaba. projeyi indiremedim link yanlış sanıırım düzeltir misiniz

  7. Melih dedi ki:

    Hocam çok güzel bir paylaşım gerçekten teşekkür ederim. Sorum şu şekilde,
    düzenleme yapmak için seçilen kaydın işinin dropdown listte seçili gelmesini knockout js de nasıl yaparım teşekkürler.

    • borsoft dedi ki:

      Selamlar Melih,

      Öncelikle teşekkürler. Bir dropdown listeki bir elemanı seçili olarak getirmek için, örneğin bu makalede işi diye bir dropdown var. ==> “

      Buradaki “self.SelectedOccupation”‘a ilgili value değerini set eder isen, set edilen eleman comboda seçili olarak gelir.

      İyi çalışmalar.

      • Melih dedi ki:

        hocam iyi akşamlar öncelikle teşekkür ederim. Şöyle bir problemim var . Ürünlerin listelendiği bir sayfam ve bu ürünlerin edit edilebileceği modal dan oluşmuş bir popup var. Burada ki ürünün kategorisinin selectedCategory özelliği elle başka bir değer set etmeme rağmen hala kategori listesinde ki ilk kategori seçili geliyor. Debug olarak baktığım zaman pop up açılırken selectedCategory iki kez tetikleniyor. ilkinde benim set ettiğim değer gelirken, ikincisinde kategorilerin ilk elemanı geldiği için sorun yaşıyorum. Yardımcı olur musunuz. iyi çalışmalar

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir