[Blog Post] Visual Studio 2013 Preview ile ASP.NET MVC 5’e Giriş ve İlk Uygulama


VisualStudio2013PreviewLogo2

Merhaba arkadaşlar,

Bir önceki yazımda “bir Twitter kullanıcının tweetlerini nasil alınabilir?” bunu tartıştık. Bu yazımda Build 2013 konferasında duyurulan yeniliklerden/teknolojilerden birisi olan ASP.NET MVC 5’ın önceki versiyonları ile arasındaki farkların neler olduğunu, basit bir kaç Controller ve View’i  Visual Studio 2013 Preview kullanarak nasıl geliştirilebilir bunu tartışacağız.

Hazırlık

Windows 7 Ultimate işletim sistemi üzerinde kurulu olan Visual Studio 2013 Preview kullanarak .NET 4.5 kullanarak uygulamamızı geliştireceğiz.

Visual Studio 2013 Preview‘i indirmek için tıklayınız.

Adım adım yüklemeyi aşağıda anlatacağım çünkü kurulum sırasında IE10’un yüklenmesini zorunlu kılan bir ekran var! Kurulumu gerçekleştirenler bu bölümü atlayabilirler.

Yukarıdaki linke tıkladığınızda aşağıdaki sayfa açılacak.

VisualStudio2013Preview

Visual Studio 2013 Preview’a tıkladığınızda indirme ile ilgili bölümü görüntüleyeceksiniz.

VisualStudio2013Preview2

Yukarıdaki (+) simgesine tıkladığınızda indirmek için seçim yapacağınız ekrana geleceksiniz.

VisualStudio2013Preview3

Ben burada “Install now” seçeneğine tıkladım. Bu seçenek önce yaklaşık 1mb lık bir dosya indirecek daha sonrada interneti kullanarak gerekli olan ortalama ortalama 9.5gb lık dosyaları indirecek. Exe versiyonunu veya ISO halinde de indirmeniz mümkün. Ardından indirmek için herhangi bir Windows Live hesabını kullanarak giriş yapıyorsunuz ve mutlu son indirme linki aşağıdaki gibi karşınıza çıkıyor.

VisualStudio2013Preview4

IE10 olmadan ise yüklemeye devam edemiyorsunuz. Aşağıdaki hata karşınıza çıktığında şaşırmayın çünkü daha sonrasında bir restart atmak zorunda kalacaksınız.

VisualStudio2013Preview5

IE10 yükledikten sonra isterseniz yükleme sırasında istemediğiniz bölümleri çıkarabiliyorsunuz. Yükleme işlemini tamamladığımıza göre artık biraz kod yazmaya başlayabiliriz.

Giriş

ASP.NET MVC 5 projesi oluşturduğunuzda yaşayacağınız deneyim önceki sürümlerden biraz daha farklı olacak. ASP.NET MVC 5 kullanabilmeniz veya öğrenmeniz için önceki versiyonlarını bilmenize gerek olduğunu düşünmüyorum sonuçta sıfırdan bir başlangıç yapıyorsunuz. En yenisini öğrenmeniz ve son teknolojiden başlamanız sizin için avantaj olacaktır.

Uygulama

Visual Studio 2013 Preview’i ilk defa açıyorsanız aşağıdaki gibi olmasını hep istediğim gibi bir ekran ile karşılaşıyorsunuz. Blue dediğinizde ise Visual Studio 2010dan vazgeçemeyenlerin sevdiği o tasarım karşınıza çıkacak.

VisualStudio2013Preview_ChooseYourColorTheme

Adım 1: ASP.NET Web Application  Projesi Açmak

Aşağıdaki sayfayı gördüğünüzde biraz şaşırabilirsiniz. Evet, önceden böyle bir ekran yoktu. Nerede ASP.NET MVC diyebilirsiniz.

VisualStudio2013Preview_ASPNET_Web_Application

Ayrıca yine Web sekmesinin altında Visual Studio 2012’yide görebiliyorsunuz. Bu sekmeye tıkladığınızda Visual Studio 2012’deki proje türlerinden de seçim yapabilirsiniz.

VisualStudio2013Preview_ASPNET_Web_Application_Visual_Studio_2012

Aşağıdaki gibi .NET Framework 4.5 seçili olduğuna dikkat ederek, “IlkMVC5Projesi” adında ASP.NET Web Application türünde projeyi oluşturuyoruz.

VisualStudio2013Preview_ASPNET_Web_Application_MVC

Adım 2: ASP.NET Proje türü olarak MVC’yi seçiyoruz.

Yukarıda OK dedikten sonra karşımıza herkes için büyük bir süpriz olan ve ASP.NET’in bir bütün olarak tüm proje türlerini içerisinde barındırdığı bir ekran geliyor.

VisualStudio2013Preview_ASPNET_Web_Application_New_ASPNET_Project_MVC

Adım 3: Solution Explorer’i İnceleyelim

VisualStudio2013Preview_ASPNET_Web_Application_New_ASPNET_Project_MVC_SolutionExplorer

Solution Explorer’da dikkatinizi çeken en büyük değişiklik sanırım klasör simgelerindeki değişiklikler. Startup.cs dosyası olmuştur. Bunun dışında img klasörünün Content içerisinden dışarıya çıktığını görüyoruz aynı ASP.NET MVC 3’teki gibi. Yine Content klasörünü incelediğimizde CSS Framework‘u olarak ise beklendiği gibi Bootstrap kullanıyor. App_Start klasörünün altında Identity.cs ve Startup.Auth.cs isimli 2 dosya yine değişiklikler arasında yerini alıyor. Bunların ne işlere yaradıklarını ne zaman kullanılacaklarını ve ne gibi değişiklikler yapılması gerektiğini sonraki yazılarımda anlatacağım.

Adım 4: Uygulamayı Çalıştıralım

Uygulamayı çalıştırdığımızda ekranın tasarımının nasıl değiştiğini göreceğiz. Burada CSS 3’ün media özelliğinin çok güzel kullanıldığını görebiliriz. Videodan inceleyebilirsiniz:

Adım 5: “Merhaba” Adında Yeni Bir Controller Ekleyelim

Controller’a sağ tıkladığımızda Add dediğimizde Scaffold seçeğini seçiyoruz. Bu özellik ve ekranda yine Visual Studio 2013 Preview’e özel.

VisualStudio2013Preview_Add_Controller_Scaffold

Aşağıdaki ekrandan ise nasıl bir Scaffold template’ini seçiyoruz ona karar vermemiz gerekiyor. Burada ben Empty türünde seçim yaptım.

VisualStudio2013Preview_Add_Controller_Scaffold_AddScaffold

“Merhaba” diye belirtiyoruz.

VisualStudio2013Preview_Add_Controller_Scaffold_AddScaffold_AddController

Adım 6: Controller İçerisine 3 Tane Metot Yazıyoruz

VisualStudio2013Preview_Add_Controller_Scaffold_AddScaffold_ActionResult

Çalıştırdığımızda sonucunu görelim:

VisualStudio2013Preview_Add_Controller_Scaffold_AddScaffold_Controller

Dunya() metotunu kullanabilmemiz için View eklememiz gerekiyor aksi durumda hata alırız.

Adım 7: View Ekleme

View eklemeden önce, Views klasörüne sağ tıklayıp Add Folder dedikten sonra Merhaba diye isimlendiriyoruz.

VisualStudio2013Preview_Add_Controller_Scaffold_AddView_Scaffold

Aşağıdaki ekrandan “ASP.NET MVC 5 – View without Model” i seçerek Dunya diye isimlendiriyoruz.

VisualStudio2013Preview_Add_Controller_Scaffold_AddView_Scaffold_Empty_Without_Model

VisualStudio2013Preview_Add_Controller_Scaffold_AddView_Scaffold_Empty_Without_Model_MerhabaDunya

Adım 8: Dunya isimli View’i Düzenleme

VisualStudio2013Preview_Add_Controller_Scaffold_AddView_Scaffold_Empty_Without_Model_MerhabaDunya_View

Burada sadece örnek olması için içerisine bu şekilde bir metin yazdık. Aşağıda çalıştırıp incelediğimizde bu View’in çağırıldığını görebiliyoruz.

VisualStudio2013Preview_Add_Controller_Scaffold_AddView_Scaffold_Empty_Without_Model_MerhabaDunya_View2

Burada gelen en büyük yeniliklerden bir taneside Dunya isimli View’in içerisinde olup projeyi çalıştırdığınızda otomatik olarak bu Dunya isimli metot çağırılıyor. Önceki versiyonlarda bu tarz bir özellik mevcut değildi.

Adım 9: “Merhaba/Sayin/{isim}” için Route Tanımlayalım

Projeyi çalıştırdığımızda adres çubuğuna Merhaba/Sayin/MahmutCan yazdığımızda herhangi bir hata almayız fakat “MahmutCan” parametresi null olarak gelir ve dolayısıyla istediğimiz işlevi sağlayamayız.

VisualStudio2013Preview_ASPNET_MVC_5_Route_Tanimlama

Route’ların nasıl tanımlandığı ne şekilde kullanıldığını ve nelere dikkat etmemiz gerektiğini bu yazımda detaylı olarak anlatmıştım. Bu işlemleri yaptığımızda sonuçlarını görebiliyoruz:

VisualStudio2013Preview_ASPNET_MVC_5_Route_Tanimlama_Route_Parametre

En sonda yer alan ismi değiştirdiğinizde görebilirsiniz:

VisualStudio2013Preview_ASPNET_MVC_5_Route_Tanimlama_Route_Parametre2

Sonuç

ASP.NET MVC in ne kadar önemli olduğu ve Microsoft’tun ne kadar onun üzerine düştüğünü ve yayınlaşmasını istediğini aslında Microsoft’un hemen hemen yaptığı tüm demolarda ASP.NET MVC’yi kullanmasından anlayabiliyoruz. Bununla beraber Visual Studio 2013 Preview ile önemli adımlar atıldı ve ASP.NET MVC 5’ın geliştirilmesine devam ediliyor. Bu uygulamada basit olarak ne gibi değişikliklerin geldiğini, kullanımdaki ufak farklılıkları ve yeni ekranları size anlatmaya çalıştım.

Kaynaklar

Umarım faydalı bir yazı olmuştur.

Her türlü yorumunuzu, görüş ve önerilerinizi bana her zaman yazabilirsiniz.

MVC ile kalın

, , , , , , ,

  1. #1 by cem on July 22, 2013 - 8:37 am

    Çok teşekkürler,beğeni ile takip ediyoruz…

  2. #3 by zeki on September 11, 2013 - 12:36 am

    microsoft sonunda klasik asp ye 2000 li yıllara geri dönecek microsoft ne yaptığının farkında değil bence karma karışık uyduruk uyduruk işler yapıyor. silverlight ne oldu piyasada hiç yok çok az uygulama var. web formlar en başından beri sıkıntılıydı. linq veritabanları ile web üzerinde çalışmak uygulamayı yada siteyi çok yavaşlatıyor. bana göre SqlCommand yada OleDbCommand en hızlı yöntem. mvc ne kadar script üzerinde sorunları kaldırıyor ve arama motoru dostu olsa bile database ile hız sorunu olacak diye düşünüyorum. birde yarın birgün bu razor mvc de işe yaramıyormuş. başka bişe çıkarsa hiç şaşırmam. Allah tan html, sql ve java karışamıyor. onlarından hakkında gelirdi diye düşünüyorum

  3. #4 by emingoroglu on May 13, 2014 - 9:06 am

    Emeğine Sağlık…

  1. [Blog Post(Turkish)] ASP.NET MVC İle İlgili Tüm Yazılarım (29 Yazı, 1 Yazı Dizisi ve 1 İpucu Serisi) [Güncellendi] | Mahmut Can Sozeri

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s