VueJS ve Asp.net MVC İlk Bakış
VueJS ve Asp.net MVC İlk Bakış

Bu makalede Javascript frameworklerinden Vue JS‘i kısaca tanıyıp, VueJS ve Asp.net MVC kullanarak örnek bir proje hazırlayacağız. Projeyi sayfanın altındaki linkten indirebilirsiniz.

Youtube’ da Fatih Acet’ in videoları sayesinde haberdar olduğum VueJS’ i yine aynı videolar sayesinde tanımaya başladım. Bu aşamada aklımdaki pek çok sorudan biri VueJS’ in Asp.net MVC ile nasıl çalışacağıydı. MVC’ de bizi zorlayan işleri Vuejs ile nasıl çözebiliriz sorusunun yanıtlarını henüz yeterince ilerleyemediğim (zaman darlığından) için veremeyeceğim. Ancak Asp.net MVC ile VueJS kullanımı için çok basit de olsa bir örnek paylaşmak istedim.

Kısaca VueJS

AngularJS’ e alternatif ve daha hafif (lightweight) bir framework olarak lanse ediliyor. Modüler bir yapısı var.

Yenilikçi bir component yapısı var. HTML, CSS ve Javascript kodlarınızı aynı dosya içinde (.vue uzantılı) yazmanıza olanak sağlıyor.

Çift yönlü veri bağlama (2 way data binding) mekanizmasına sahip. Bu özelliği ile MVC uygulamalarına MVVM yetenekleri kazandırabilir.

Örnek Proje

VueJS’ i kullanmaya başlamak için <head></head> tagları arasında VueJS’ i çağırmanız yeterli. VS ile yeni bir MVC projesi oluşturup Index.cshtml ile çalışmaya başlayabiliriz. Visual Studio kullanıcıları için server vb. gerekliliklerin kurulumu söz konusu olmadığı için bu kısmı hızlıca geçiyorum. Ancak Json işlemleri için Nuget paket yöneticisinden Newtonsoft.Json paketini kurmamız gerekiyor.

Projede var olan bir Controller içinde sayfada görünecek olan verileri oluşturup ActionResult ile View’ a göndermemiz gerekiyor. Burada dikkat etmemiz gereken bir konu var, View’ a göndereğimiz verinin tipi dizi (array) yada nesne (object) olmalıdır. Bunun için Models kalsörü içinde Ogrenci ve Model isminde iki sınıf (class) oluşturdum. Yeni bir List içerisine Ogrenci tipinde verilerle doldurup Json Serialize ederek Model sınıfı içindeki Ogrencilerimiz özelliğine aktarıp View’ a gönderiyoruz. (Tüm bunları yaparken defalarca ne gerek var bunlara dediğim oldu.)

Sınıflarımız şöyle;

HomeController içindeki Index Action’ ı şöyle;

Veriyi View’ a gönderdik, artık View içinde bu veriyi yakalayıp VueJS ile sayfaya yazabiliriz. Gönderdiğimiz veriyi Json.parse metodundan geçirerek window.veriler nesnesine aktarıyoruz ki Vue ile verilere erişebilelim.

Body etiketi içinde Vue’ nun etkin olacağı yerde bir HTML elemanına id ataması yapmamız gerekiyor. Bu Vue’ dan gönderdiğimiz verinin sayfanın neresinde görüneceğini belirtmemiz için gerekli.

Bu basit örneğimizin VueJS kodlarını yazabiliriz. Script tagları arasında Vue’ dan yeni bir örnek alıp, el:’#ilk’ tanımlamasıyla bu Vue kodlarının etkin olacağı elementi tanımlıyoruz. data: {veri: window.veriler} tanımlaması ile parse ettiğimiz veriyi Vue’ nun veri kaynağına taşıyoruz. Buraya kadar yazdığımız js kodlarımız aşağıdaki gibi olmalı.

Artık bir çok satır ve sütundan oluşan veriyi sayfada gösterebiliriz. Bunun için C# benzeri bir foreach yapısını yani “v-for” kullanıyoruz. Bunun gösterimi için basitçe bir <ul><li> yapısıda kullanılabilir, daha düzenli olması adına tablo yapısıda kullanılabilir. Örneğini aşağıda göreceğiniz v-for’ un tablo içerisindeki kullanımı örnek proje içerisinde bulabilirsiniz. Bu işleri <div id="ilk"></div> etiketleri arasında yapmamız gerektiğini unutmayalım.

Index.cshtml dosyasının tam hali söyle olmalı;

Bu haliyle çok basit bir örneği tamamlamış olduk. Örnek projeyi indirmek için buraya tıklayabilirsiniz. VueJS ile ilgili daha fazla bilgi almak ve öğrenmek için Fatih Acet’ in VueJS eğitim videolarını ve VueJS resmi sitesini kullanabilirsiniz.

Bir önceki yazımız olan Asp.net Repeater Kullanımı başlıklı makalemizi de okumanızı öneririz.

CEVAP VER