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.

Açıklama: Açıklama: Açıklama: Açıklama: Extentions and Update in VS 2012

 

 

 

 

 

 

 

2) Sol taraftan Update seçimi yapılıp Update butonuna basılır.

Açıklama: Açıklama: Açıklama: Açıklama: Visual Studio 2012 Update

 

 

 

 

 

 

 

 

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.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip17.jpg

 

 

 

4) Kurulum başladıktan sonra I Accept ile kabul yapılır ve kurulumun tamamlanması beklenir.

Açıklama: Açıklama: Açıklama: Açıklama: Web Tools Options

 

 

 

 

 

 

 

 

 

 

 

 

 

5) En son şekildeki ekran karşımıza geldiğinde kurulum başarı ile tamamlanmıştır.

Açıklama: Açıklama: Açıklama: Açıklama: Final installation in WebPlatform Installer

 

 

 

 

 

 

 

 


 

Kurulum tamamlandıktan sonra aşağıdaki özellikler Visual Studio 2012 içine eklenmiş olur.

 

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.

Açıklama: Açıklama: Açıklama: Açıklama: MVC 5 Bootstrap

 

 

 

 

 

 

 

 

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.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip65.png

 

 

 

 

 

 

 

 

 

 

2) Bir hazır kalıp istediğimiz için MVC seçimi yaparak onaylıyoruz.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip68.png

 

 


 

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.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip70.png

 

 

 

 

 

 

 

 

 

 

4) Bu içeriği bir sayfada kullanmak için  <head> tagının içine sürüklememiz gerekir.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip72.png

 

 

 

 

 

 

5) Kullanabileceğimiz Scriptler de Scripts klasörü altındadır. Bunlarda aynı şekilde sürüklenerek sayfa da kullanılabilir.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip73.png

 

 

 

 

 

 

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.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip75.png

 

 

 

 

 

 

 

 

 

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.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip76.png

 

 

 

 

 

8) Şimdi projemizi çalıştırarak hazır kalıbı inceleyelim.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip74.png

 

 

 

 

 


 

Project Templates:

Bir önceki uygulamada yaptığımız gibi hazır bir kalıp üzerine projemizi inşa edebiliriz.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip68.png

 

 

 

 


 

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.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip219.jpg

 

 

 

 

 

 

 

Bant genişliği kullanımında da MVC çok daha performanslıdır.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip220.jpg

 

 

 

 

 

 

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.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip221.jpg

 

 

 

 

 

 

 

Model: Uygulama içerisinde Veri etkileşimini sağlar. Veri tabanı ile ilişkiye geçme verileri getirme gönderme işlemlerinden sorumludur.

 

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip77.png

 

 

 

 

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.

 

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip78.png

 

 

 

 

View: Kullanıcı etkileşimini sağlayan yani kullanıcının istediği alanları görmesini sağlayan bölümdür.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip79.png

 

 


 

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.


 

 

 

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip222.jpg

 

 

 

 

 

 

 

 

 

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)

 

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip80.png

 

 


 

DERS 1:

 

1) File/New Project dedikten sonra  ASP.NET MVC Empty Project seçimi yaparak ismine Ders1 verip onaylıyoruz.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip223.jpg

 

 

 

 

 

 

 

 

 

 

 

 

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

 

 

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip81.png

Dikkat ederseniz hiçbir Bootstrap ile ilgili kütüphane yok.

 

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip82.png

 

 

 

 

 

 

 

 

 

 

 

 

 

2) Controllers klasörü üzerinde sağ tuşa basarak Add/Controller seçeneğine tıklayalım.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip224.jpg

 

 

 

 

 

3) MVC Controller-Empty seçimi yaparak onaylayalım.

 

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip225.jpg

 

 

 

 

 

 

4) İsmine ders1Controller vererek onaylayalım.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip226.jpg

 

 

 

 

 

5) Görüntü şekildeki gibi olacaktır. Varsayılan olarak bir Index Action’ı gelir.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip227.jpg

 

 

 

 

 

 

 

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.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip228.jpg

 

 

 

 

 

 

 

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.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip229.jpg

 

 


 

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.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip83.png

 

 

 

 

 

 

 

 

 

 

 

 

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip84.png

 

 

2) HomeController adı ile yeni bir kontrol ekleyelim.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip260.jpg

 

 

 

 

 

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip261.jpg

 

 

 

 

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip262.jpg

 

 

 

 

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

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip263.jpg

 

 

 

 

 

 

 

 

 


 

5) Gelen pencerede değişiklik yapmadan Add butonuna basalım.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip264.jpg

 

 

 

 

 

 

 

 

 

Bu arada Layout kutusunu işaretlediğim için otomatik olarak BootStrap dosyaları projeme dahil oldu.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip85.png

 

 

 

 

 

 

Aynı şekilde Script dosyaları da geldi;

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip86.png

 

 


 

Jquery’nin son sürümünü yükledikten sonra değişiklik şekildeki gibi olacaktır.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip87.png

 

 

 

 

 

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.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip265.jpg

 

 

 

 

 

 

 

7) Sayfayı çalıştırdığımızda görüntü şekildeki gibi olacaktır.

 

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip266.jpg

 

 

 

 


 

 

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!")

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip89.png

 

 

 

 

 

 

 

 

 

 

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.

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip88.png

 

 

 

 

 

 

 

 

 

 

 

 

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip268.jpg

 

 

 

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.

 

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip90.png

 

 

 

 

 

 

 

 

 

 

 

Açıklama: Açıklama: Açıklama: Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip270.jpg