08 Ekim

ASP.NET MVC DERS NOTLARI

2020

MESLEK YÜKSEKOKULLARI

BİLGİSAYAR PROGRAMCILIĞI

İNTERNET PROGRAMCILIĞI II DERSİ

Hazırlayan
Serkan DERELİ

İlk Baskı: 08.10.2020

Dr. Serkan Dereli Sayfa 1

08 Ekim
ASP.NET MVC DERS NOTLARI
2020

1.) MVC Nedir?

MVC’de bir uygulamanın kullanıcı ara yüzü 3 ana bölüme ayrılır:

• Model: Data işlemlerinin ve iş kurallarının tanımlanır, class’lar oluşturulur

• View: Kullanıcı arayüzünün nasıl gösterileceği tanımlanır
• Controller: Kullanıcı arayüzündeki işlemler ile data ve/veya spesifik katman arasındaki iletişim
sağlanır.

MVC mimarisini aşağıdaki resimden hareketle yorumlayalım:

• Diyelim ki kullanıcı tarayıcıdan bir istekte bulundu. Bu istek ilk olarak Controller’ a gider,
• Controller bu isteğin sonucunun sorgulanması adına isteği Modele gönderir.
• Model de Controllerdan kendisine gelen istek sonucu dönen verileri, tekrar Controller’ a
gönderir.
• Controller kendisine Model tarafından gönderilen verileri View’ a gönderir ve böylece
kullanıcı yapmış olduğu isteğin sonucunu ekranında görür.

Controller’ da daha çok backend kodları (ASP.NET), Model’ de daha çok (SQL kodları), View’ da ise
frontend kodları (Html, Css, Js), bulunmaktadır.

1.1.) MVC’nin Avantajları

 Makarna kod (Farklı teknolojideki kodların aynı sayfa içinde bulunması) yazmamızı önler.
Düzenli kod yazmaya teşvik eder.
 MVC mimarisi sayesinde farklı teknolojiler farklı sayfalarda bulunacağından hata ayıklama
kolaylaşır.
 Katmanların birbirlerinden ayrı olması test edilebilirliği kolaylaştırır.
 MVC ’nin sahip olduğu farklı katmanlar sayesinde yazdığımız kodların yeniden kullanılabilirliği
artar. (Farklı projelerimizde önceki projelerimizde kullandığımız kodları tekrardan
kullanabiliriz)
 MVC mimarisi sayesinde yazılan kodların anlaşılırlığının yüksek olması yazılım geliştirme
aşamasında bir ekibin proje üzerinde çalışmasında kolaylık sağlar. Ekipçe çalışma ise yazılım
geliştirme sürecini hızlandırır ve projenin erken bitmesine olanak sağlar.

Dr. Serkan Dereli Sayfa 2

08 Ekim
ASP.NET MVC DERS NOTLARI
2020

1.2.) Framework Nedir?

Framework anlamı itibarıyla “geliştirme çatısı” demektir. Gerçekten de hangi yazılım dili kullanılırsa
kullanılsın, platformun genel amacı yapılan işlemlerin süresini kısaltmak, yazılıma bir iskelet
oluşturabilmektir.

Framework, bilgisayar programcılığında yazılım geliştirmeye ve sistem oluşturmaya yarayan bir

araçtır. Bu aracın kendisi bir süreç kümesidir, bu yüzden yazılım mühendisleri tarafından framework
soyutlama olarak tanımlanır.

Bilgisayar programlamasında soyutlama, mekânsal veya zamansal detayları kaldırma işlemidir. Bu

süreçte framework, ayrıntıların düzenlenmesini basitleştirerek sistemin düzgün çalışmasını sağlamak
için sadece en gerekli yapısal şeyleri bırakır.

Framework, zamandan tasarruf etmek ve kısayollar sağlamak için tasarlanmıştır.

Framework, bir uygulamayı geliştirme sürecini optimize eder ve çalışmayı basitleştiren kodun
kullanılmasına, değiştirilmesine ve entegre edilmesine izin verir.

Günümüzde kullanılan özellikle ticari yazılımların geliştirilmesinde framework gereklidir.

Framework olmazsa, bir uygulamayı geliştirmek için çok daha fazla zaman ve emeğe ihtiyaç
duyulur.

1.3.) NET Framework

.Net Framework, ileri düzey uygulama geliştirmek için oluşturulmuş ve windows işletim sistemi ile
kapsamlı bir şekilde entegre edilmiş bir programlama modelidir.

Framework bilindiği gibi, içerisinde uygulama geliştirme arayüzleri (API) ve programcıların ihtiyaç
duyduklarında çağırabilecekleri paylaşımlı bir kod kütüphanesi barından paketlere denir.

Bu kütüphanedeki (Framework Class Library (FCL)) kodlar pek çok çeşit fonksiyon çalıştırabiliyor. Bu
sayede programcılar ufak işlemler için gerekli fonksiyonları sıfırdan yazmak zorunda kalmıyor.

Dr. Serkan Dereli Sayfa 3

08 Ekim
ASP.NET MVC DERS NOTLARI
2020

Diğer framework paketlerine kıyasla .NET, ayrıca uygulamalar için çalışma alanı (runtime enviroment)
da sunuyor. Çalışma alanları, içinde uygulamaların çalıştığı sanal makine benzeri bir kum havuzudur
denebilir.

Söz konusu .NET olunca, bu çalışma alanı Common Language Runtime (CLR) olarak adlandırılır.
Örneğin bir kullanıcı bir uygulamayı çalıştırdığında, uygulamanın kodları çalışma alanında makine
diline derlenir ve ardından uygulama çalıştırılır.

Uygulamaları çalışma alanları içinde çalıştırmanın birden fazla avantajı mevcut. Bunların en önemlisi
ise uyumluluktur.

Geliştiriciler kodlarını C#, C++, F#, Visual Basic gibi sık kullanılan programlama dillerinde yazabilir ve
bu kodlar .NET destekli bütün donanımlar üzerinde çalıştırılabilir.

1.4.) ASP.NET MVC Sayfa Yaşam Döngüsü

Bu yaşam döngüsü kullanıcının bir ASP.NET MVC sayfayı talep ettiği an başlar ve sayfa
görüntülendiğinde tamamlanır. Bu sayfanın normal bir şekilde işleyişi MVC mantığı ile aynı tarzdadır.

Ancak .NET mantığıyla bakıldığında MVC yapısının işletilmesinde aşağıdaki sıra takip edilmektedir.
Aynı zamanda bir talebin yaşam döngüsü olarak da bu sıra izlenmektedir.

1) HTTP Request: Sizin her ASP.NET MVC uygulamasını görüntülemek istemeniz bir request(istek) tir.
Bu istediğinizi HTTP üzerinden IIS tarafından alınır. Her yaptığınız istek Server tarafından bir yanıtla
son bulması gerekir.

2) Routing: ASP.NET MVC uygulamasını her istek yaptığınızda bu isteğin hangi Controller ve hangi
Action için olduğu bu aşamada ayırt edilir. Yaptığınız yanıt “UrlRoutingModule”, “HTTP Module”
tarafından durdurulur. “UrlRoutingModule” bir isteği durdurduğu zaman, gelen istek “RouteTable”
’dan hangi Controller tarafından üstleneceğine karar verilir.

Dr. Serkan Dereli Sayfa 4

08 Ekim
ASP.NET MVC DERS NOTLARI
2020

3) Controller: RouteTable’dan gelen route bilgisine göre Controller hangi Action’ı çalıştıracaksa o
View çalıştırılır. View, Controller tarafından render edilmez. Controller tarafından geriye ViewResult
döndürülür.

4) ViewResult: ViewResult, View’i render etmek için aktif View Engine’i çağırır.

5) ViewEngine: Bir CSHTML dosyayı oluşturduğunuzda içerisindeki script ve markuplar, Razor View
Engin tarafından bazı ASP.NET API’lerini, modelden alınan Veritabanı bilgilerini HTML’e çevirmek için
kullanır.

6) View: View Engine tarafından HTML’e çevirilen kodlar kullanıcıya sunulur.

7) Response: HTTP üzerinden View kullanıcıya gösterilir.

Dr. Serkan Dereli Sayfa 5

08 Ekim
ASP.NET MVC DERS NOTLARI
2020

2.) VS2019 ile ASP.NET MVC Proje Başlatmak

Visual Studio .NET tabanlı projeler gerçekleştirmek için kullanılan en önemli Microsoft IDE’sidir. Şimdi
ASP.NET Mvc projesi başlatmak için aşağıdaki adımları takip ediniz.

2.1.) MVC Projesi Oluşturmak

1) Visual Studio 2019’u başlatınız.
2) Aşağıdaki ekrandan “Create a new project” seçeneğini seçiniz ve sonraki ekrana geçiniz.

3) Aşağıdaki ekranın sol sütunundaki öğelerden “ASP.NET Web Application (.NET Framework)”
seçeneğini seçiniz ve “Next” tuşuna basarak sonraki ekrana geçiniz.

4) Sonraki aşama proje dosyalarının kaydedileceği konumu ve proje ismini belirlediğimiz aşama
olup aşağıdaki resimde görülmektedir. “1” nolu bölümden projenin ismini, “2” nolu bölümden

Dr. Serkan Dereli Sayfa 6

08 Ekim
ASP.NET MVC DERS NOTLARI
2020

projenin kaydedileceği konumu ve “3” nolu bölümden ise NET framework versiyonunu
değiştirebiliriz.

5) Sonraki aşama projenin MVC projesi olup olmayacağına karar verilen aşamadır ve aşağıdaki
resimde görülen ayarlamalar yapılmalıdır. Sonrasında “Create” butonuna basılarak işlemler
tamamlanmalıdır.

6) Artık işlemler tamamlanmıştır. Ekrana çıkan bar ile işlemin sona ermesi beklenmelidir.

Dr. Serkan Dereli Sayfa 7

08 Ekim
ASP.NET MVC DERS NOTLARI
2020

7) Son olarak işlem bitmiştir ve karşımıza aşağıda görülen ekran gelmiştir.

Günümüzdeki her IDE (Tümleşik Geliştirme Ortamı) yazılımında olduğu gibi Visual Studioda da
paneller yoğun şekilde kullanılır. Bu panellerden en önemlisi olan “Solution Explorer” penceresi proje
dosyalarının bulunduğu ve projeye herhangi bir dosya ilave edilmek istendiğinde kullanılacak olan
paneldir.

Dr. Serkan Dereli Sayfa 8

08 Ekim
ASP.NET MVC DERS NOTLARI
2020

Projede varsayılan olarak bulunan dosyalar yukarıda ki “Solution Explorer” panelinde görülmektedir.
“App_Data” klasörü Veritabanı dosyası ile çalışılacaksa o dosyaların bulunduğu klasördür.
“App_Start” projenin başlangıç ayarlarıyla çalışması için gerekli ayarlamaların bulunduğu klasördür.
“Content” klasöründe javascript, css, jquery ve sayfada kullanılan bazı multimedya dosyalarının
bulunduğu klasördür. Kullanıcılar harici olarak oluşturdukları dosyaları bu klasör içerisine
oluşturmalıdır. “Controllers-Models ve Views” klasörü projede gerekli MVC dosyalarının bulunması
gereken klasörlerdir.

2.2.) Projeyi Çalıştırmak

Projeyi çalıştırmak demek tarayıcıya View dosyasını göndermek demektir. O nedenle “Solution
Explorer” panelindeki “Views” klasörü odaklanmamız gereken klasördür. Bu klasör içeriği hali hazırda
aşağıdaki gibidir. Resimde açıkça görülmektedir ki Controller her dosyası için “Views” klasöründe ayrı
bir klasör oluşturulur ve her Controller metodu için ayrı bir “.cshtml” view sayfası oluşturulur.

Projeyi tarayıcıya göndermek için “cshtml” sayfalarından birinin üzerine sağ tıklayıp varsayılan tarayıcı
ile o view sayfası açılmalıdır. “Index.cshtml” sayfası tarayıcıya yüklendiğinde aşağıdaki gibi
görünecektir. Bunun için aşağıdaki resimde görüldüğü gibi “View in Browser” seçeneği seçilir.

Dr. Serkan Dereli Sayfa 9

08 Ekim
ASP.NET MVC DERS NOTLARI
2020

Karşımıza aşağıda ekran gelmelidir. ASP.NET projeleri genel olarak ilk yüklemede sanal bir çalışma
alanında çalıştırılıp sonra makine diline çevrildiklerinden dolayı açılması biraz zaman alabilir.
Sonrasında ise çok daha hızlanacaktır.

Şekil 1. Proje içerisindeki Index View

Görüldüğü gibi varsayılan bir stil ile sayfalar oluşturulmuştur. Bunun için genel bir tasarım sayfası
içerisine oluşturulan sonraki view dosyaları aktarılmaktadır. Bunun için kullanılan ana tasarım
dosyalarının genel adı “Layout” olarak bilinir ve “Views” klasörü altında konumlandırılmışlardır. Bizler
istersek kendimize ait “Layout” sayfaları oluşturabiliriz.

2.3.) Layout Sayfası

“Layout” sayfaları ana tasarım dosyalarıdır. Şimdi projede bulunan “Views/Shared/_Layout.cshtml”
sayfasını açalım. Kodlar aşağıdaki gibi gelmelidir.

[1] <!DOCTYPE html>

[2] <html>
[3] <head>
[4] <meta charset="utf-8" />
[5] <meta name="viewport" content="width=device-width, initial-scale=1.0">
[6] <title>@ViewBag.Title – BİP OTOMOTİV</title>
[7] @Styles.Render("~/Content/css")
[8] @Scripts.Render("~/bundles/modernizr")
[9] </head>
[10] <body>
[11] <div class="navbar navbar-inverse navbar-fixed-top">
[12] <div class="container">
[13] <div class="navbar-header">
[14] <button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
[15] <span class="icon-bar"></span>
[16] <span class="icon-bar"></span>
[17] <span class="icon-bar"></span>
[18] </button>
[19] @Html.ActionLink("BİP OTOMOTİV", "Index", "Home", new { area = ""
}, new { @class = "navbar-brand" })
[20] </div>

Dr. Serkan Dereli Sayfa 10

08 Ekim
ASP.NET MVC DERS NOTLARI
2020

[21] <div class="navbar-collapse collapse">

[22] <ul class="nav navbar-nav">
[23] <li>@Html.ActionLink("Ana Sayfa", "Index", "Home")</li>
[24] <li>@Html.ActionLink("Araçlar", "Vehicle", "Home")</li>
[25] <li>@Html.ActionLink("Hakkımızda", "About", "Home")</li>
[26] <li>@Html.ActionLink("İletişim", "Contact", "Home")</li>
[27] </ul>
[28] </div>
[29] </div>
[30] </div>
[31] <div class="container body-content">
[32] @RenderBody()
[33] <hr />
[34] <footer>
[35] <p>&copy; @DateTime.Now.Year – Sakarya MYO Bilgisayar
Programcılığı</p>
[36] </footer>
[37] </div>
[38]
[39] @Scripts.Render("~/bundles/jquery")
[40] @Scripts.Render("~/bundles/bootstrap")
[41] @RenderSection("scripts", required: false)
[42] </body>
[43] </html>

Views/Shared/_Layout.cshtml

Bu kodlamada bazı yerlerde “@” işareti ile başlayan yerler görünmektedir. Bu bir Asp.Net Mvc
kodunun view sayfasında kullanılacağı zaman gereklidir. Çünkü normalde bunlar komut grubuna
girmektedir ve Controller sayfasına aittir.

23-26 arası kod satırları MVC yapısında link oluşturmak için kullanılır.

39, 40 ve 41 nolu satırlarda stil veya script dosyalarının sayfaya nasıl entegre edileceği görülmektedir.

32 nolu satırda görülen “@RenderBody” komutu ise herhangi bir view sayfası bu Layout sayfasını
temel alacaksa o view sayfası bu komutun olduğu alana yerleşecektir.

2.4.) Projeye Action ve View Ekleme

Action aslında tek başına bir takım işlemler gerçekleştirdikten sonra bir view sayfasını yükleyen
mekanizmadır. Bunun için “HomeController.cs” sayfasını açıp aşağıdaki kodları ekleyelim.

[1] public ActionResult Vehicle()

[2] {
[3] return View();
[4] }

HomeController/Vehicle

Bu Controller metodunda herhangi bir işlem yapılmamakta sadece bir view sayfası yüklenmektedir.
Bunun için yüklenmesi istenilen view sayfası eklemek için metod üzerinde sağa tıklayıp “Add View”
seçeneği seçilmelidir. Ekrana aşağıdaki pencere gelecektir.

Dr. Serkan Dereli Sayfa 11

08 Ekim
ASP.NET MVC DERS NOTLARI
2020

Yukardaki ayarlamalar yapıldıktan sonra “Add” butonuna tıklanır. “Use a layout page” kısmı bu view
sayfasının kullanacağı ana tasarım dosyasını ifade etmektedir. Eğer bu kısım seçilmezse bomboş bir
sayfa ile işlem yapılacaktır.

View sayfasının kodu aşağıdaki gibi olacaktır.

[1] @{
[2] ViewBag.Title = "Vehicle";
[3] Layout = "~/Views/Shared/_Layout.cshtml";
[4] }
[5]
[6] <h2>Vehicle</h2>

Views/Home/Vehicle.cshtml

Şimdi de Index.cshtml sayfasını Bip Oto şeklinde yeniden güncelleyelim. Kodları şu şekilde
değiştirelim. Internetten üç adet resim indirip “Content/Resimler” klasörü içerisine atınız.

[1] @{
[2] ViewBag.Title = "Home Page";
[3] }
[4]
[5] <div class="jumbotron">
[6] <h1>Bip Oto</h1>
[7] <p class="lead">1979 yılından dedemiz Rahmi Aydın tarafından başlatılan tamir
dükkanından, sigorta acenteliğine ve sonrasında online işlemlerin yapıldığı
limited şirkete köklü değişim...</p>
[8] <p><a href="#" class="btn btn-primary btn-lg">Devamı &raquo;</a></p>
[9] </div>
[10]
[11] <div class="row">
[12] <div class="col-md-4">
[13] <h2>Geçmiş</h2>
[14] <p><img src="~/Content/Resimler/1.jpg" class="img-responsive img-rounded"
/></p>
[15] <p>
[16] Oto sanayi sitelerinin olmadığı, sokak arasında dükkanların
konumlandığı günlerdi. Dedemiz Rahmi Aydın da kamyon merakıyla başlayan
yolculuğuna geçirdiği kaza sonucu dükkan açarak ve bu dükkanda küçük tamiratlar
yaparak başladı.

Dr. Serkan Dereli Sayfa 12

08 Ekim
ASP.NET MVC DERS NOTLARI
2020

[17] </p>
[18] <p><a class="btn btn-default" href="#">Devamı &raquo;</a></p>
[19] </div>
[20] <div class="col-md-4">
[21] <h2>Değişim</h2>
[22] <p><img src="~/Content/Resimler/2.jpg" class="img-responsive img-rounded"
/></p>
[23] <p>Sonrasında sanayi siteleri hayatımıza girdi ve Bip Oto artık bu sitede
konumlandı. Artık alan daha fazla büyüdü, iki araç aynı anda girip işleme tabi
tutulabiliyordu.</p>
[24] <p><a class="btn btn-default" href="#">Devamı &raquo;</a></p>
[25] </div>
[26] <div class="col-md-4">
[27] <h2>Büyüme</h2>
[28] <p><img src="~/Content/Resimler/3.jpg" class="img-responsive img-rounded"
/></p>
[29] <p>Artık işler daha fazla büyüdü, buna paralel olarak aile nüfusu arttı.
Dedemiz tam bir aile şirketi kurma tutkusuna sahipti. Önce çocuklarını sonrasında
torunlarını bu iş için yetiştirdi. Şimdi 18 kişinin çalıştığı büyük bir kurum
olmanın gururunu yaşamaktayız.</p>
[30] <p><a class="btn btn-default" href="#">Devamı &raquo;</a></p>
[31] </div>
[32] </div>

Views/Home/Index.cshtml

Şekil 2. HomController/Index View

Dr. Serkan Dereli Sayfa 13

08 Ekim
ASP.NET MVC DERS NOTLARI
2020

2.5.) Projeye CSS ve Layout Eklemek

Bu bölümde yeni bir CSS stil dosyası eklenecek, bu stil dosyası temelinde yeni bir Layout sayfası
oluşturulacak ve bu Layout şablon dosyası temelinde ise yeni bir Action’ın tetiklediği yeni bir View
sayfası oluşturulmaktadır.

CSS dosyaları projede “Content” klasörü içerisine eklenmelidir. Bunun için bu klasör üzerinde sağ tuş
yaptıktan sonra “Add > Style Sheet” seçeneklerini takip edip dosya ismini “myCss.css” olarak
değiştiriniz. Bu dosyanın içeriği şu şekilde olacaktır.

[1] body {
[2] margin-left: 100px;
[3] margin-right:100px;
[4] background-color: antiquewhite;
[5]
[6] font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
[7] font-size: 14px;
[8] }
[9]
[10] .head {
[11] color: brown;
[12] }
[13]
[14] .head2 {
[15] color: chocolate;
[16] }

Content/myCss.css

Şimdi ise “Shared” klasörü üzerinde sağ tuş yaptıktan sonra “Add > MVC 5 Layout Page” seçeneklerini
takip edip “_myLayout.cshtml” dosyasını oluşturunuz. Dosyanın içeriğini aşağıdaki gibi değiştiriniz.

[1] @{
[2] Layout = null;
[3] }
[4]
[5] <!DOCTYPE html>
[6]
[7] <html>
[8] <head>
[9] <meta name="viewport" content="width=device-width" />
[10] <title>@ViewBag.Title2</title>
[11] <link href="~/Content/myCss.css" rel="stylesheet" />
[12] </head>
[13] <body>
[14] <div>
[15] <h1 class="head">@ViewBag.Head</h1>
[16] <h2 class="head2">@ViewBag.Head2</h2>
[17] </div>
[18] <hr />
[19] <div>
[20] @RenderBody()
[21] </div>
[22] </body>
[23] </html>

Shared/_myLayout.cshtml

Dr. Serkan Dereli Sayfa 14

08 Ekim
ASP.NET MVC DERS NOTLARI
2020

Bu aşamada ise “HomeController” içerisine yeni bir View sayfasını görüntüleyecek Action kodunu
aşağıdaki gibi oluşturunuz.

[1] public ActionResult Family()

[2] {
[3] ViewBag.Title2 = "Bip - Ailemiz";
[4] ViewBag.Head = "Sakarya Bip Otomotiv";
[5] ViewBag.Head2 = "Aile Geleneğimiz";
[6] return View();
[7] }

HomeController/Family Action

Şimdi ise yukardaki Action kod üzerinde sağa tıklayıp “Add View” seçeneğini seçiniz. Ekrana gelen
aşağıdaki pencerede görünen Layout ayarını değiştiriniz. Layout kısmında bizim az önce
oluşturduğumuz “_myLayout.cshtml” dosyasını seçiniz ve “Add” tuşuna basınız.

Şekil 3. Home/Family View sayfası

Bu View sayası aşağıdaki kodlarla karşımıza gelecektir.

[1] @{
[2] ViewBag.Title = "Family";
[3] Layout = "~/Views/Shared/_myLayout.cshtml";
[4] }
[5]
[6] <h2>Family</h2>

Home/Family.cshtml

Bu View sayfasını “Debug > Start Without Debugging” seçeneği ile veya “Ctrl+F5” kısayolu ile
tarayıcıya gönderdiğimizde aşağıdaki ekranla karşılaşırız.

Dr. Serkan Dereli Sayfa 15

08 Ekim
ASP.NET MVC DERS NOTLARI
2020

Şekil 4. Home/Family.cshtml view sayfası

Dr. Serkan Dereli Sayfa 16