Merhaba, bir önceki yazımızda, Asp Net MVC teknolojisi için giriş yapmıştık. Asp dersleri serimize tam gaz devam edelim. Bu makalemizde, Visual Studio derleyici programın kurulumunu yapıp ilk projemizin, View kısmını yapacağız.
Şimdi, Asp Net MVC projemiz için programımızı indirelim.
Microsoft tarafından üretilen ve sürekli güncelleme alan programımızın son versiyonunu buradaki linkten indirebilirsiniz.
Not: Programın ücretli versiyonu da bulunmaktadır. Biz, yazı dizimiz boyunca Community versiyonunu ücretsiz kullanacağız. İki versiyon arasında ki farklar bizim geliştireceğimiz projeleri etkilemeyecek. Yazı dizimiz boyunca Visual Studio 2017 versiyonunu kullanacağız. Yapacağımız işlemler 2019 versiyonu ile aynı olacaktır.
Programın kurulumunu detaylı anlatmıyorum. Dikkat etmenizi istediğim bir nokta var. Görseldeki sayfada Asp.Net MVC seçeneğini seçmeniz gerekmektedir. Bunun dışında herhangi bir işlem yapmanıza gerek yok.
Bu nokta da sorun yaşarsanız lütfen yorumlarda benimle paylaşın. Yardımcı olurum.
Programımızı Tanıyalım.
Ekran görüntüsünde bazı alanlar kırmızı işaret ile gizlenmiştir. Bu noktalar projelerinizin kurulu olduğu dosya yolunu gösteriyor.
1 Numaralı Alan: Bu alanda, oluşturduğunuz projeleriniz yer almaktadır. Bir proje oluşturduktan sonra buraya eklenir, kolay ve hızlı erişim için oldukça faydalı bir alan.
Ctrl + Shift +N tuş kombinasyonu ile oluşturabilirsiniz. Yazı dizimiz boyunca bu tuş kombinasyonunu kullanacağız.
2 Numaralı Alan: Burada ki alanda, yeni oluşturacağımız projelerimiz için seçenekler bulunmaktadır. Yeni projemizi, buradan veya sol üstte yer alan File butonundan oluşturabiliriz.
3 Numaralı Alan: Bu alan için ayrı bir makalem var. Makaleme göz atmanızı öneriyorum. {{Yeni makale linki gelecek.}
İlk Asp.Net MVC projemizi oluşturalım.
1.Adım – Bu bölümde geliştirmek istediğiniz programlama dilini seçebilirsiniz. Biz Asp.Net MVC teknolojisi ile yazılımlarımızı geliştireceğiz.
2.Adım – Seçtiğiniz programlama diline özel seçenekler yer almaktadır. Biz .Net Freamework ile geliştirme yapacağız.
3.Adım – 2. adımda seçtiğiniz seçenek hakkında bilgi yer almaktadır.
4.Adım – Projemizin ismi, kurulacağı konum (dosya yolu), proje ismi (otomatik tamamlanır), proje versiyonu (4.5 kullanacağız).
Create directory for solution: proje için bir dizin oluşturması için işaretliyoruz.
Add to source control: Bu alan için yazdığım makaleyi okuyabilirsiniz. {{Yeni makale linki gelecek.}
Burada ki alanları, proje geliştirdikçe anlatacağım. Bu aşamada, Asp.net 4.5 Templates alanından Empty (Boş) ve Add folders and… alanından MVC seçeneklerini seçip onaylıyoruz. Ve projemizin temellerini atmış bulunmaktayız.
Ve projemizi oluşturduk! Ne güzel sayfamız bom boş 🙂
Controller ve View bu iki alanı bir önceki makalemde anlatmıştım, buradan makalemi okuyabilirsiniz.
Controller oluşturarak ilk kodlarımızı yazmaya başlıyalım. Bu makalemizde Form uygulamamızın Front End tarafını anlatacağım. Akabinde Back End ile devam edeceğiz.
Burada ki adımları takip ederek, Controller oluşturabilirsiniz.
Asp.Net MVC Controller Ne İşimize Yarayacak ?
Kullanıcıya yazdığımız kodları göstermek için View kısmını kullanacağız. View oluşturabilmemiz için Controller oluşturmak zorundayız. Çünkü: Controller, View kısmını tetikler ve view yapısının ayakta kullanıcıya gözükmesini sağlar.
Bu bağlamda, kullanıcılarımız view‘da yani form’un kullanıcıya gözüken kısmından bir değer girip gönderdiğinde biz arka planda (Controller tarafında) yakalayıp veri tabanına kayıt edebiliriz.
Bu adımda, Empty olan seçeneği seçiyoruz. Diğer controller yapılarını kullanmıyoruz. Kodları sıfırdan yazacağımız için boş bir Controller oluşturacağız.
Kontroller adını HomeController yapıyoruz. MVC projemizde, Home isminde bir Controller olmazsa, proje çalışmayacaktır. “Home” yerine “Default” da yazabilirsiniz. En yaygın olarak Home kullanıldığı için proje kapsamında Home yazalım.
Controller ekledikten sonra sağ tarafta Views kısmının hemen altında Home adında bir klasör açıldı. Bu dosyanın içerisinde HomeController‘a ait View dosyalarımızı barındıracağız.
Ve ilk Controller ‘ı ekledik, şimdi projemize view ekleyelim. Ardından projemizi ayağa kaldıralım. (Çalıştıralım 🙂 )
Return view(); Kodunun üzerinde sağ tıklayıp, Add view seçeneğini seçip onaylıyoruz. Ve View kısmını eklemiş, kullanıcılarımıza göstereceğimiz tasarımı yazmak için hazır konuma getirmiş oluyoruz.
View Name: Home controller eklediğimizde Views klasörünün altında Home adında bir klasör oluştu. Bu klasör içerisinde istediğimiz kadar view barındırabiliriz. Ancak bir web sitesinde index sayfası olmak zorundadır. Bu yüzden view name alanını bu aşamada Index şeklinde yazıp ekliyoruz.
Template: Bu selectbox alanını açtığınızda MVC ve entityfreamework tarafından hali hazırda yazılmış olan kodların olduğu seçenekleri göreceksiniz. Biz hazır olan herşeyden uzak duracağız 🙂 Empty seçip devam edelim.
Model Class: Bu alana şimdilik dokunmayalım. Daha kompleks çalışmalarımızda işimize yarayacaktır.
Geldik en sevdiğim noktalardan bir tanesine. MVC yapısının en önemli özelliklerinden bir tanesini anlatacağım.
Create as a partial view: MVC teknolojisinin en büyük özelliklerinden bir taneside tüm kodları düzgün bir yapı içerisinde sistematik tutmasıdır. PHP yazılım dilinde LARAVEL freamework de bu şekildedir. Biz Layout konusuna geldiğimizde daha detaylı anlatacağım. Html dosyalarımızı parçalamamızı sağlar. Bu şekilde herhangi bir yerde hata ile karşılaşırsak, elimizle koymuş gibi bulup düzeltebileceğiz.
Reference script libraries: Tüm web sitelerinde Script‘ler kullanılmatadır. Burada ki checkbox, web sitemizin ihtiyacı olan scriptleri eklemek için seçili geliyor. Değiştirmeyeceğiz. Sadece dosyalarda düzenlemeler yapmamız gerektiğinde lazım olacaktır.
Use a layout page: Makale devamında detaylı öğreneceğiz.
Görselde ki gibi düzenleme yaptıktan sonra Add butonuna basarak ilk View alanını ekliyoruz.
Asp Net HTML Yapısı
Burası anlatması zor, anladıktan sonrasında çok işinize yarayacak bir kısım. Gelin bu kısmı biraz irdeleyelim.
Home isminde bir Controller oluşturduk. Hemen peşinden, Home Controller altında Index view alanını ekledik. Yani, kullanıcılarımız bizim projemizde sadece burada yazacağımız kodları görebilecek. Controller kısmında yazdığımız kodları göremeyecekler. Görürlerse güvenlik açığımız olur. 🙂
Asp Net MVC yapısında .entity freamework ile geliştireceğimiz projemizde html dosyalarımızın uzantıları .cshtml ‘dir. Görselde ki gibi Index.cshtml dosyamızın içerisinde html kodlarımızı yazacağız. Yazdığımız tüm kodların (Back End /Front End) render edilmesi gerekiyor. Bunun için renderbody(); metodu kullanılmaktadır. Bu metod ile yazdığımız tüm kodlar render edilecek ve projemiz ayağa kalmış olacak.
Web sitelerinin bir yapısı vardır. Örneğin slider üstte, sidebar sağda veya solda gibi. Bu yapılara biz Layout (Düzen) diyorurz. Bizim Layout kodlarımız, Shared klasörünün içerisindedir. Bu şekilde layout değişiklikerimizi buradan yapacağız.
Asp Net MVC yapısı bir çok işi kolaylaştırıyor. Fakat bazı durumlarda HTML dosyasının içerisinde Back End (C#) kodları yazmamız gerekecek.
Asp Net MVC | HTML içerisinde C# kodları nasıl yazılır ?
Yukarudaki görselde, index.cshtml sayfasını inceleyelim. Kodlar şu şekildedir. ↓
@{
viewBag.title = "Index";
}Kodlardan görüldüğü üzere, Html dosyası içerisnde “@” işareti koyduğunuz her an C# kodları yazabiliriz. C# kodlarımız 1 satırdan fazla olacak ise “{}” süslü parantezleri kullanarak, kodlarımızı yazabiliriz.
Asp Net MVC | HTML içerisinde ki viewBag.title Nedir ?
Web sitelerinin SEO açısından güçlü olması gerekmektedir. Seo bilgileri dahilinde Title, Description, Keywords alanları bulunmaktadır. viewBag.title, buradaki kullanımda, Title bilgisini belirtmek için kullanılmıştır. Title alanında ne yazarsanız, sitenizin ilgili sayfasında ki title yazısı, yazdığınız yazı olacaktır.
Son Olarak Özetleyelim
Programımızı kurduk.İlk projemizi oluşturduk. Son olarak, Asp Net MVC projemizi çalıştıralım. Bunun için çeşitli yöntemler mevcut. İsterseniz F5 ile direkt çalıştırabilirsiniz. İsterseniz Ctrl+Shift+W tuş kombinasyonu ile çalıştırabilirsiniz.
F5 ile çalıştırmak: Bu yöntemle projenizi çalıştırısanız, proje arka planda ilk önce derlenir. Tüm kodlar derleyici (VS) tarafından derlenir ve varsayılan tarayıcınız açılarak kodlarınızın çıktısı gösterilir.
Ctrl+Shift+W: Bu yöntemle projenizi çalıştırırsanız, proje arka planda derlenmez. Kodlar’da ne yazıyorsa aynı şekilde varsayılan tarayıcınızda açılır. Ama projenizde C# kodları yazdıysanız (Controller tarafında) bu kodlar çalışmaz. Controller tarafında yazılan kodların hepsinin derlenmesi gerekiyor. Derlenmeden çalıştırırsanız, anlam veremediğiniz bir çok hata ile karşılaşırsınız.
Epey uzun bir makale oldu.
Bir sonra ki makalemde
- Form projesinin kodlarını yazacağız.
- Bootstrap teknolojisini projemize entegre edeceğiz.
- Şablon parçalamasına derinlemesine dalacağız.
konuları kaçırmamak için bizi İnstagram üzerinden takip etmeyi ve bildirimleri açmayı unutmayın.
