ASP.NET MVC 5 Eğitimi
Bu eğitim sayesinde Model-View-Controller (MVC), yazılım mühendisliğinde kullanılan “mimari desen” tekniğini detaylıca öğreneceksiniz. Birçok bilgisayar uygulamasının amacı, veri deposundaki veriyi alarak, işleyip kullanıcıya ulaştırmaktır.
10 DERS'İN İçerik
Detayları:
Ø
ASP.NET MVC 5 Keşif Süreci
Ø
ASP.NET MVC 5 Web Uygulamaları Tasarımı
Ø ASP.NET MVC 5 Model
Ø ASP.NET MVC 5 Controller
Ø ASP.NET MVC 5 View
Ø
ASP.NET MVC 5 Routing
Ø ASP.NET MVC 5 Web Uygulamaları Stilleri(Bootstrap-CSS)
Ø
JavaScript ve JQuery Kullanarak MVC Web Uygulamaları
Ø ASP.NET MVC 5 Authentication(Kimlik Denetimi)
Ø
Esnek Bir ASP.NET MVC 5 Web Uygulaması İnşa Etmek
Ø ASP.NET MVC 5 Windows Azure
Ø ASP.NET MVC 5 Web Api
Ø ASP.NET MVC 5 Publish
Eğitim Süresi = 10 Ders
ASP.NET MVC 5 KEŞİF SÜRECİ:
MVC ile adamlar 20 yıl önce kullandığımız HTML ve Script yapısının en hızlı olduğunu kabul ettiler. HTML ortamında yazılım geliştirmek zor oldu için çeşitli alternatifler türettiler. Ancak günümüz hız çağı olduğu için Modern HTML ve Script yapını MVC içinde oluşturarak doğru yolu buldularJ
Eğer Visual Studio 2013 ve üstü bir sürüm varsa MVC5’i kullanabilirsiniz.
Visual Studio 2012 içinde MVC 5 teknolojisini kullanabilmek için Web Tools 2013.1 for the Visual Studio 2012 uygulamasını yüklemek gerekir.
MVC 5 kullanarak ASP.NET uygulamaları oluşturabiliriz. Ancak varsayılan olarak bu uygulamalar boştur. Yani yapılandırmasını bizim yapmamız gerekir.
Visual Studio 2012 içinde kullanabilmek için;
1) Tools menüsünden Extensions and Updates seçeneğine tıklanır.
2) Sol taraftan Update seçimi yapılıp Update butonuna basılır.
Gerekli güncellemeler tamamlandıktan sonra program kapatılır.
3) ASP.NET Web Tools 2013.1 for Visual Studio 2012 programı indirilerek kurulum dosyası çalıştırılır.
4) Kurulum başladıktan sonra I Accept ile kabul yapılır ve kurulumun tamamlanması beklenir.
5) En son şekildeki ekran karşımıza geldiğinde kurulum başarı ile tamamlanmıştır.
Kurulum tamamlandıktan sonra aşağıdaki özellikler Visual Studio 2012 içine eklenmiş olur.
- Bootstrap
- Project Templates
- Entity Framework 6
- ASP.NET Scaffolding
- NuGet 2.7
- Razor 3
Bootstrap:
MVC 5 uygulamaları geliştirmek için kullanılan özelliktir. Aşağıdaki şekille MVC uygulamaları geliştirirken çok sık karşılaşacağız. Bu hazır yapı bir Bootstrap ara yüzü sayesinde bize sunulmuştur.
Bir nevi HTML kütüphanesidir. CSS, HTML araç kitidir. Sayfalarımı yapılandırmakta kullandığımız HTML ifadelerini bünyesinde toplayan, sadece projemize bu kütüphaneleri dâhil ederek onlarca satır kod yazmaktan bizi kurtaran bu yapıda CSS ve JS hazır halde bulunuyor.
Kapsadığı bazı yapılar;
· Button
· Label
· Page header
· Alert
· Progress bar
· Dropdown
· Tooltips
Her gün birçok yenilik eklenen bu yapı https://github.com/twbs/bootstrap tarafından açık kaynak olarak geliştirilmektedir.
HTML5’in tüm özelliklerini destekleyen Bootstrap yapısında özel tasarlanmış JQuery eklentileri de vardır.
Hemen hemen tüm tarayıcılar bu yapıyı destekler.
Buradaki özellikleri kullanabilmek için <head> tagını arasına dâhil edilmelidir.
ÖRNEK:
1) Yeni bir uygulamayı Lesson1 adı ile şekildeki gibi oluşturalım.
2) Bir hazır kalıp istediğimiz için MVC seçimi yaparak onaylıyoruz.
3) Content kısmını açtığımızda hazır Bootstrap.css kütüphanelerini göreceğiz. Bunların içinde tanımlanmış yüzlerce kontrol biçimi bulunmaktadır.
4) Bu içeriği bir sayfada kullanmak için <head> tagının içine sürüklememiz gerekir.
5) Kullanabileceğimiz Scriptler de Scripts klasörü altındadır. Bunlarda aynı şekilde sürüklenerek sayfa da kullanılabilir.
6) Eğer boş bir proje oluşturuyorsanız ve Jquery’ler yoksa proje adı üzerinde sağ tuşa basarak Manage NuGet Package seçeneğine tıklıyoruz.
7) Burada Search kısmına Jquery yazarak bulup yükleme işlemini gerçekleştiriyoruz. Şayet yüklü ise sağ üst köşe de yeşil check işareti görünür.
8) Şimdi projemizi çalıştırarak hazır kalıbı inceleyelim.
Project Templates:
Bir önceki uygulamada yaptığımız gibi hazır bir kalıp üzerine projemizi inşa edebiliriz.
ASP.NET MVC 5 GİRİŞ:
MVC, içeresinde birden fazla tasarım desenini barındırır. MVC içinde kullanacağımız programlama kodu C# olabileceği gibi Visual Basic’de olabilir. Yapılan testler göstermiştir ki ASP.NET Web Form ’una göre ASP.NET MVC iki kat daha hızlıdır.
Bant genişliği kullanımında da MVC çok daha performanslıdır.
Kullanıcı tarafından bir istekte bulunulduğu zaman en kısa yoldan bu isteğe cevap verecek şekilde tasarlanmıştır. Bu da MVC yapısına çok büyük esneklik sağlar. Kullanıcı ilk istekte bulunduğunda bu Controller kısmına gider. Buradan Model kısmından veri tabanı ilişkisi araştırılır ve ardından View ile kullanıcıya yansıtılır.
Model: Uygulama içerisinde Veri etkileşimini sağlar. Veri tabanı ile ilişkiye geçme verileri getirme gönderme işlemlerinden sorumludur.
Controller: Gelen isteklere ilk olarak cevap veren bölüm. İstemi direk olarak algılar en kısa yoldan çözüm üretir ve View kısmında göndererek kullanıcıya HTML çıktısı olarak iletir.
View: Kullanıcı etkileşimini sağlayan yani kullanıcının istediği alanları görmesini sağlayan bölümdür.
Model-View-Controller (MVC), bir uygulamayı üç ana bileşene ayırır: Model, View (görünüm) ve Controller (denetleyici). ASP.NET MVC Framework, MVC tabanlı Web uygulamaları oluşturmak için ASP.NET Web Forms yapısına bir alternatif sağlamak amacıyla 2007 yılında ortaya çıktı. İlk kullanabilir sürümü olan ASP.NET MVC 1.0, Mart 2009 tarihinde piyasaya sürüldü ve bugün itibariyle beşinci versiyonunu kullanıyoruz.
MVC; Kimlik doğrulaması ve Masterpage gibi faydalı özellikleri kullanmaya devam ederken bazı yönlerde ASP.NET yapısından ayrılmıştır. Örnek olarak, ASP.NET MVC uygulamalarında PostBack ve Event tabanlı geliştirme mekanizması yoktur.
Çalışma Prensibi:
· İstemciden gelen talepler Controller içerisinde yer alan nesneler tarafından ele alınır.
· İlgili Controller gelen URL bilgisini çözümleyerek kendi içerisindeki uygun Action Metodunu çağırır.
· İlgili Action veri ile ilgili işlemler yapacaksa Model kısmındaki nesnelere erişir. Örneğin belli filtreler kullanarak kullanıcıya bir liste gösterilecekse, Action filtre değerlerini yöneterek veri tabanını sorgular.
· Controller, Action üzerinden getirilen verileri modele geçirerek ilgili View nesnesine gönderir.
· View nesnesi sayfa içeriğini render ederek HTML çıktıyı oluşturur ve çıktı istemciye gönderilir.
Avantajları:
· Model, View ve Controller bileşenlerini ayırarak karmaşıklığı yönetmeyi kolaylaştırır.
· Bakımı Kolaydır.
· Arama Motoru yapısına uygundur. Kolaylıkla entegre olarak içerik ve URL üretimi sağlar.
· ASP.NET ViewState (Görünüm durumu) veya sunucu tabanlı formları kullanmaz. Bu durum ASP.NET web form uygulamalarına alışmış geliştiriciler için dezavantaj olsa da, uygulama üzerinde tam kontrol isteyen geliştiriciler için idealdir.
· Tek bir Controller (Front Controller) üzerinden Web uygulama isteklerini işleyen bir tasarım deseni kullanır. Böylece zengin bir yönlendirme (routing) altyapısını destekleyen uygulamalar tasarlamanıza olanak sağlar.
· Microsoft destekli olarak, Codeplex üzerinde açık kaynak olarak devam etmesi.
· Test-kullanımlı geliştirme (TDD) için daha iyi destek sağlar.
CRUD(Create-Read-Update-Delete):
***Create(POST): Yeni öğe oluşturmak için kullanılır. Bunun için POST metodunu kullanıyoruz.
***Read(GET): Yeni öğeleri sorgulamak ya da edinmek için kullanılır.
***Update(PUT/PATCH):Adından da anlaşılacağı üzere güncelleme yapmak için kullanılır. PUT ve PATCH metodu var. PUT metodu ile tüm öğeyi güncellerken PATCH metodunu belirli alanlar için kullanırız.
***Delete(DELETE): Silme işlemi yapar.
@RenderBody():Shared klasörü altındaki _Layout sayfalarında bulunan bu kısım değişken bölgeyi temsil eder. Bunun dışındaki tüm bölgeler sayfa geçişlerinde sabit kalırken bu bölge değişir. (Master Page’de kullandığımız ContentPlaceHolder gibi düşünebilirsiniz)
DERS 1:
1) File/New Project dedikten sonra ASP.NET MVC Empty Project seçimi yaparak ismine Ders1 verip onaylıyoruz.
Yukarıdaki şekil VS 2012’ye aittir. 2013 sürümünü Lesson1’de yaptık. Orda ikinci aşamada kalıbı seçerek MVC işaretliyoruz
Dikkat ederseniz hiçbir Bootstrap ile ilgili kütüphane yok.
2) Controllers klasörü üzerinde sağ tuşa basarak Add/Controller seçeneğine tıklayalım.
3) MVC Controller-Empty seçimi yaparak onaylayalım.
4) İsmine ders1Controller vererek onaylayalım.
5) Görüntü şekildeki gibi olacaktır. Varsayılan olarak bir Index Action’ı gelir.
6) Biz aşağıdaki kodları ilave edelim.
public string Mesaj()
{
return "Bu ilk MVC Sayfamız";
}
7) View kontrolü üzerinde sağ tuşa basarak Add/View seçeneğine tıklayalım. Şekildeki gibi Mesaj isimli View’ı oluşturalım.
8) App_Start altındaki Route.Config.cs sayfasını açalım. Bu sayfa projeyi çalıştırdığımızda ilk hangi sayfayı yükleyeceğine karar verir. Varsayılan olarak Home klasörü içindeki Index.cshtml dosyası tanımlıdır. Bizim böyle bir klasörümüzde dosyamızda yoktur.
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
Biz yukardaki ifadeyi aşağıdaki gibi değiştirelim. Bunun anlamı projeyi çalıştırdığımızda ilk olarak ders1 klasöründeki ders1 action’ı dolayısı ile ders1.cshtml dosyası yüklenecektir.
defaults: new { controller = "ders1", action = "Mesaj", id = UrlParameter.Optional }
9) Projeyi derleyerek yükleyelim.
RAZOR VIEW ENGINE KULLANIMI:
Razor da bir görüntüleme motorudur (view-engine). Esasında ASPX ‘de bir görüntüleme motoruydu ancak onun yapısında bazı HTML tagları koymak için <% %> işaretleri kullanıyorduk, işte Razor bizi bu yapıdan kurtarıyor. MVC3 den itibaren kullanılmaya başlanmıştır.
Razor’un avantajları:
Bir Web sayfasında en az karakterle çok şey yapmamızı sağlar. Daha kolay okunur ve kolay bir akış sağlar.
HTML kodlarını yazarken çok şey bilmemiz gerekiyordu. Artık daha kolay yapı ile öğrenmesi kolay olduğu için .net ve html kodlarını birbiri içerisinde zorlanmadan kullanmayı sağlar. .net kodlarına başlamadan sadece @ işaretini koyarsınız ve Razor kodları rahatlıkla kullanabiliriz.
Yeni bir dil değildir: Yeni bir dil değil, bilinen bir dilin (C#, VB, Html) daha iyi ve anlaşılır olarak yazılmasını sağlar.
Controller ve ya web server gerektirmeden, birim test edilebilir özelliği vardır.
Sayfa Düzeni (Layout) Yapacağımız projelerde sayfanın düzenini basit ve dinamik bir şekilde kontrol etmek için;
Html.RenderPartial bu metotla Shared yada ilgili kontrolün altında belirttiğiniz sayfayı, sayfanıza çağırmaya olanak sağlar. Bir nevi include file gibidir.
@{Html.RenderPartial(“_FishPartial”,fish);} Şeklinde kullanıyoruz, bu kodu yazdığımız yere Shared klasörü içerisinde ki yada ilgili kontrol klasörü içindeki _menu.cshtml sayfası çağrılır. Çağırırken uzantıyı yazmamıza gerek yoktur, otomatik olarak aspx, ascx, cshtml ve vbhtml uzantılarında ilgili sayfayı bulur.
Aşağıdaki gibi de kullanılabilir.
Html.RenderPartial("~/Views/Fish/_FishPartial.cshtml", fish);
RenderPage Yukarıda ki kontrolün aynısı gibi çalışır, tek fark çağırırken tam yolu vermemiz zorunludur. Bu sebepden dolayı çağıracığımız dosyanın bulunduğu klasörün bir önemi yoktur, istediğimiz dosyadan istediğimiz sayfayı çağırabiliriz.
@RenderPage(“~/Views/Fish/_FishPartial.cshtml”) şeklinde kullanıyoruz.
Yukarıda ki iki yöntemde de datayı ilgili sayfalara gönderebiliyor ve o sayfalarda işlem yapabiliyoruz.
|
1 2 |
@{Html.RenderPartial("_FishPartial ",fish);} @RenderPage("~/Views/Home/_yuksel.cshtml",ViewBag.dinamik) |
RenderSection bu yöntem ile sayfa içinde ki kod bloğunu farklı bir yerde göstermek için kullanıyoruz. Yukarıdaki yöntemlerin aksine dışarıdan değil içeriden çağırma işlemini yapıyoruz.
@RenderSection(“menu”, false) diyoruz, burada ki false gerekliliği ifade ediyor. Sonrasında görüntülenecek section bloğunu yazıyoruz. @section menu{<h1>menu</h1>}
Razor Sözdimi (Syntax)
Razor view engine kodlarının başına @ işareti koyuyoruz. Fakat bir mail adresini elle yazmak istediğimizde sıkıntı oluyor. Bunu ortadan kaldırmak için 2 tane @@ ile yazıyoruz. test@@test.com gibi..
Dinamik kodlarla html kodlarını iç içe yazdığımız bu yapıda nokta(.) sorun çıkartabiliyor. Yani @degisken. yazdığımızda ToString(), ToLower() gibi metotların listelendiğini görürüz hâlbuki biz sadece nokta koymak istiyoruz. Bunun için@(degisken). şeklinde değişkeni parantez içine almamız yeterlidir.
Bir if bloğu yada herhangi bir kod bloğu içinde direk metin yada html kodu yazmamız gerekebilir. Bunun için razor bize 2 farklı yöntem sunuyor. İlk yöntemde tek satırlık yazımlar için @:tek satırlık yazım ve çok satırlı yazımlar için <text>çok satırlı yazım</text>
|
01 02 03 04 05 06 07 08 09 10 11 |
@if (true) { @:Tek satır yazım. <text> çok satırlı yazım </text> } |
|
|
|
NOT:Bu
yapı ile ilgili uygulamayı PROJE1’in 108.adımından
itibaren yapabilirsiniz.
VIEWBAG-HELPER
ViewBag: Mvc 3 ile birlikte gelen en önemli özelliklerindendir. Mvc 3 öncesinde ViewData[“degisken_adı”] şeklinde view katmanımıza veri gönderiyorduk, view tarafında ise ViewData[“degisken”] nesnesini ilgili modele dönüşümünü sağlıyorduk, yani 2 türlü iş yapıyorduk. ViewBag ile bu durum ortadan kalkıyor, ViewBag var değişkeni gibi çalışıyor, hangi türü yazarsak o türe dönüşüyor. Yani dönüştürmeden direk olarak kullanabiliyoruz. Script kullananlar bilir, oradaki val değişkeni gibidir.
|
//Controller Kısmı public ActionResult Index() { ViewBag.dinamik = context.balıklar; return View(); }
//View Kısmı @foreach (var z in ViewBag.dinamik) { @z.BalıkAdı } |
Helper: Birçok kullanımı vardır. Bir kalıp olarak bir bilgiyi tanımlamak ve ardından onu defalarca kullanabiliriz. Ayrıca Helper kütüphaneleri ile Twitter,FaceBook gibi uygulamaları web sayfamızın içine gömebiliriz. Bir nevi fonksiyon olarak düşünebiliriz. Razor yazma kalıplarını kullanarak fonksiyonumuzu yazıyoruz ve çağırıp kullanıyoruz.
|
//xxx.cshtml dosyamızın içine @helper stokDurumu(int ad){ if (stok < 1) { @:Yok :( } else { var. @ad adet } }
//Herhangi bir yerden erişilip kullanılması @foreach (var z in Model) { @stokDurumu(z.stok) } |
UYGULAMA:
1) Yeni bir ASP.NET Empty projeyi ders2 adı ile oluşturalım.
2) HomeController adı ile yeni bir kontrol ekleyelim.
3) ActionResult Index kısmını aşağıdaki gibi düzenleyelim.
public ActionResult Index()
{
//Aşağıdaki satırı ekledik.
ViewBag.YeniMesaj = "Bu mesaj Home Controller içindeki Index'ten geliyor";
return View();
}
4) Yukardaki küme parantezlerinin arasında sağ tuşa basarak Add/View seçeneğine tıklayalım
5) Gelen pencerede değişiklik yapmadan Add butonuna basalım.
Bu arada Layout kutusunu işaretlediğim için otomatik olarak BootStrap dosyaları projeme dahil oldu.
Aynı şekilde Script dosyaları da geldi;
Jquery’nin son sürümünü yükledikten sonra değişiklik şekildeki gibi olacaktır.
6) Index.cshtml dosyasını gibi düzenleyelim. Dikkat ederseniz kod kısmı @ işareti başlıyor ve satır sonlarına noktalı virgül koymuyoruz.
7) Sayfayı çalıştırdığımızda görüntü şekildeki gibi olacaktır.
8) Şimdi de basit bir Helper örneği yapalım. Index.cshtml dosyasının altına aşağıdaki kodları ilave edelim. Sayfayı yükleyerek sonucu gözlemleyelim.
@helper deneme (string content)
{
<p style="font-size:xx-large;color:red;font-family:Algerian"> @content</p>
}
@deneme("Merhaba")
@deneme("Bugün ANKARA!")
SAYFALAR ARASI GEÇİŞ:
Sayfalar arası geçişi iki türlü yapabiliriz.
Eğer script ile geçiş yapacaksak aşağıdaki ifadeyi yazmamız gerekir.
window.open('@Url.Action(...)');
Eğer link kullanacaksak aşağıdaki formatı kullanırız.
@Html.ActionLink(“ Diğer Sayfa”,"Index", "Home");Aşağıdaki gibi parametreli de kullanılabilir.
@Html.ActionLink(“ Diğer Sayfa”,"Index", "Home", new { Id = 10 }, new { target = "_blank" });
Veya
<a href="~/Mvcders/mvc1.htm"><b>>MVC 5 -Lesson 1</b>Keşif Süreci-Giriş-Sayfalar Arası Geçiş</a>
Şimdi en son uygulamamızdan devam edelim.
9) Home klasörünün altına sayfa2 isimli View dosyasını şekildeki gibi ekleyelim.
10) Sayfa 2’nin kod kısmına aşağıdaki kodu ilave edelim.
@Html.ActionLink("Ana Sayfa","Index", "Home")
11) HomeControllers.cs içine aşağıdaki kodu ekleyelim.
public ActionResult Sayfa2()
{
return View();
}
12) index.cshtml dosyasının altına aşağıdaki ifadeleri ekleyelim.
<input id="Button1" type="button" value="Diğer Sayfa" onclick="huhu()" />
<script type="text/javascript">
function huhu()
{
window.open('@Url.Action("sayfa2")');
}
</script>
13) Çalıştırarak sonuçları gözlemleyelim.
