ASP.NET MVC 5 Template- MODEL:

 

1)  Visual Studio açılarak Proje adına ders3 yazılarak onaylanır. Kalıp Olarak Üst kısımdan Empty alt kısımdan MVC seçilir.

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2) Boş bir proje karşımıza gelecektir.

 

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

 

 


 

 

3)  Solution içinde Entity Framework 6 ‘ NuGet Package kısmından yüklemek gerekir. Bunun için solution üzerinde sağ tuşa basılarak Manage NuGet Packages seçeneğine tıklanır.

 

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

 

 

 

 

4) Gelen ekranlar onaylanır. İşlem tamamlanınca Close ile çıkılır.

 

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

 

 

 

 

 

 

 

Eğer daha önce kurduysanız şekildeki gibi görünür.

 

 

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

 

 


 

5) Models/Add/Class seçimi yapılarak gelen ekrana User.cs yazılarak onaylanır.

 

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

 

 

 

 

 

 

Görüntü şekildeki gibi olacaktır.

 

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

 

 

 

 

 

POCO (Plain Old CLR Objects): Entity Framework, kendi sınıflarımızı yazabilmemize destek verir. Böylece projemizi otomatik olarak oluşturulan modelle birlikte gelen birçok koddan kurtarıp, daha basit bir model oluşmasını sağlayabiliriz. Bu uygulamada kendi kütüphanemi kendim oluşturuyorum.

 

6) User isimli class ile tabloma ait sütunları tanımlıyorum. Burada dikkat etmemiz gereken nokta; kendi yazdığımız User sınıfının adının ve özellik adlarının modeldeki isimlerle bire bir aynı olması gerektiğidir.

Burada veri tabanımızda oluşturmak istediğimiz tablolarımızın isimlerini ve içerisindeki alanların türlerini ve isimlerini veriyoruz. Sonuçta; Class veya Classlar birer tablo olacaktır. İçinde tanımladığımız Propertyler ise birer sütun haline dönüşmüş olacaklar . Eğer birden fazla tablo varsa ve tablolar arası ilişki kurmak istiyorsak virtual property kullanmamız gerekir. dikkatinizi çekmişlerdir. Bu propertyler sayesinde de tablolar arasındaki ilişkileri sağlamış oluyoruz.

Tablomuz için gerekli tanımlamamızı yaptığımıza göre bu veri tabanımıza bağlanmak için veya otomatik oluşturulması için  DbContext sınıfından türeyen bir Context Class oluşturmamız gerekiyor. Bu Context modelimizi ve sınıflarımızı barındıracaktır.

EF bu classı kullanarak veri tabanımızdaki tablolarla çalışabilecektir. DbSet bir ObjectSet’dir ve  Entity Class’ın bir Collection’ıdır.

En üste using System.Data.Entity; ifadesini ekleyelim.

Kodları aşağıdaki gibi değiştirelim. ID aynen kalacak bunun yerine başka bir isim kullanılamaz…

using System;

using System.Data.Entity;

 

 

namespace ders1.Models

{

    public class User

    {

        public int ID { get; set; }

        public string Ad { get; set; }

        public string sehir { get; set; }

        public string firma { get; set; }

 

    }

        public class UserDbContext : DbContext

    {

        public DbSet<User> Users { get;set; }

    }

}

 

7) Web.config dosyasını açarak aşağıdaki ifadeyi configuration kapanış tagının(yani en alta) hemen üstüne ekleyelim.

Burada dikkat etmemiz gereken kısım connectionstring name’inin Models klasörü içerisinde oluşturduğumuz datacontext ismi ile aynı olması gerektiğidir.(Bizim örneğimizde bu isim UserDbContext) Aksi taktirde EF projemiz çalıştığı anda bu connectionstring’i kullanmayacaktır ve eğer varsa varsayılan connectionstring’i kullanacaktır.

Bu veri tabanını(User.mdf) daha önce oluşturmadım ve çalışma zamanında hem veri tabanı hem de içerisindeki tablolar otomatik olarak oluşacak.

Veri tabanının oluşacağı yer App_Data klasörüdür.

<connectionStrings>

 

    <add name="UserDbContext"

connectionString="Data Source=(LocalDb)\v11.0; AttachDbFilename=|DataDirectory|\User.mdf;

Integrated Security=true"

      providerName="System.Data.SqlClient"/>

</connectionStrings>


 

8) App_Start  altındaki RouteConfig.cs  dosyasını açarak bunun içinde yazan Home ifadesini User olarak değiştirelim.

 

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

 

 

 

 

 

 

Tüm kodlar aşağıdaki gibi olacak;

namespace ders1

{

    public class RouteConfig

    {

        public static void RegisterRoutes(RouteCollection routes)

        {

            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

 

            routes.MapRoute(

                name: "Default",

                url: "{controller}/{action}/{id}",

                defaults: new { controller = "Users", action = "Index", id = UrlParameter.Optional }

            );

        }

    }

}

 

9) Controllers/Add/New Scaffolded Item seçeneğine tıklayalım.

 

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

 

 

 

 

 

10)Gelen sihirbaz ekranından sol taraftan Common  seçimini ve sağ taraftan 2.seçimi yaparak Add butonuna basalım.

 

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

 

 

 

 

11) Aşağıdaki seçimleri yaparak onaylayalım.

 

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

 

 

 

 

 

 

 

 

 

 

Buradaki Use async controller acitons seçeneğini işaretlersek bu yapı çalışırken biz başka bir iş yapabiliriz. Ancak performans düşer. Çok uzun işlemlerde bu kutucuğu doldurmak faydalı olabilir. Ancak kısa işlemlerde gerek yoktur.

 

Bu işlem sonucunda Controllers klasörü altında UserController.cs isimli bir dosya oluşması gerekir.

 

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


 

Ayrıca Views klasörü altında birden fazla sayfa oluştuğunu gözlemleyelim.

 

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

 

 

 

 

 

 

12) Artık sayfamızı çalıştırabiliriz. Empty proje olduğu için biz bir User Controller oluşturmuş olduk. Yani istediğimiz bilgileri veri tabanında tutacak özel bir yapı oluşturduk. Bu bir seçimdir bu yapıyı temel alarak veri tabanı sayfalarını çoğaltabiliriz.

 

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

 

 

 

 

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

 

 

 

 

 

 

 

 

 


 

13) Create New linkine basarak yeni kayıtlar girebiliriz.

 

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

 

 

 

 

 

 

 

 

 

 

14) İlk kayıt oluştuktan sonra sağ tarafta oluşan Edit, Details ve Delete linklerini de kullanabiliriz.

 

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

 

 

 

 

 

 

 

 


 

 

ASP.NET MVC 5 TASARIM ve VIEWS:

 

Bir önceki uygulamamızdan devam ediyoruz.

 

15) Controllers altındaki UsersControllers.cs dosyasını açarak inceleyelim. Burada otomatik kodların yazıldığı unutmayınız.

 

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

 

 

 

 

 

 

 

 

 

 

 

 

16) Şimdi sayfalarımızı Türkçeleştirelim. Bunun için Views klasörü altında otomatik olarak oluşmuş olan  User klasörü altında bulunan Index.cshtml dosyasını açalım.

 

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

 

 

 

 

 

 


 

17) Sayfanın başlangıcı şekildeki gibidir.

 

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

 

 

 

 

 

 

 

18) Koyu büyük yazılmış kısımları değiştirdik.

IEnumerable: “foreach” döngüsünü kullanmamızı sağlayan ara yüzdür. Array, List, ArrayList, Hashtable vb. birçok koleksiyon IEnumerable sınıfını baz almıştır. Bu sayede, foreach döngüsünü kullanarak bu koleksiyondaki elemanlara ulaşabilmekteyiz.

@model IEnumerable<ders3.Models.User>

 

@{

    ViewBag.Title = "YÜKSEL İNAN";

}

 

<h2>BAŞLANGIÇ</h2>

 

<p>

    @Html.ActionLink("YENİ KAYIT", "Create")

</p>

<table class="table">

    <tr>

        <th>

//Buraya İstediğiniz bir başlık yazabiliriz. Alttaki satırı iptal etmeyi unutmayın.

            @Html.DisplayNameFor(model => model.Ad)

        </th>

        <th>

            @Html.DisplayNameFor(model => model.Sehir)

        </th>

        <th>

            @Html.DisplayNameFor(model => model.Firma)

        </th>

        <th></th>

    </tr>

 

 

@foreach (var item in Model) {

    <tr>

        <td>

            @Html.DisplayFor(modelItem => m.Ad)

        </td>

        <td>

            @Html.DisplayFor(modelItem => m.Sehir)

        </td>

        <td>

            @Html.DisplayFor(modelItem => m.Firma)

        </td>

        <td>

            @Html.ActionLink("DÜZENLE", "Edit", new { id=m.ID }) |

            @Html.ActionLink("DETAYLAR", "Details", new { id=m.ID }) |

            @Html.ActionLink("SİL", "Delete", new { id=m.ID })

        </td>

    </tr>

}

 

</table>

 

19) Sayfayı yüklediğimizde görüntü şekildeki gibi olacaktır.

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

 

 

 

 

 

 

 

 

20) Edit.cshtml dosyasında aşağıdaki değişiklikleri gerçekleştiriniz.

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

 

 

 

 

 

 

 

 

 

 

Bir önceki sayfada yaşadığı şehir için aşağıdaki üç satırı deneyebilirsiniz.

             <div>Yaşadığı Şehir</div>

            <div class="control-label col-md-2">Yaşadığı Şehir</div>

            <div class="control-label col-md-2"><b>Yaşadığı Şehir</b></div>

 

Edit.cshtml dosyasını açtığınızda bir çok class ifadesi ve bunun yanında bir kontrol adı ve hareketi görmektesiniz. Bunlar hazır Bootstrap kütüphaneleridir. Bu kütüphanelerle sayfamız ilişkilendiren kodlar otomatik olarak eklenmiştir.

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script src="~/Scripts/jquery.validate.min.js"></script>

<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

 

Css ve Jquery yapıları tasarımda büyük kolaylık sağlamaktadır. Buradaki yapılar ile ilgili birçok site vardır. Örneğin http://www.w3schools.com/bootstrap/ sitesinde her yapının görünüşü size sunulmaktadır. Veya BootStrap’ın kendi sayfası olan http://getbootstrap.com/css işinize yarayacaktır.

Örneğin ben bir alert yapısını Create.cshtml dosyasının başında şekildeki gibi koydum.

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

 

 

 

 

 

Çalıştırınca görüntü şekildeki gibi olacaktır;

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

 

 


 

21) Şimdi birazda fontla oynayalım. Bunun için index.cshtml dosyasını tekrar açarak en alttaki foreach döngüsü içindeki tabloya aşağıda büyütülmüş olarak belirtilen style kodlarını ekleyelim.

İlk tr içindeki style de renk sarı ve zemin rengi mavi olacaktır. Ayrıca siz veri girişini nasıl yaparsanız yapın büyük harfe çevrilecektir.

Kayıtların yanındaki düzenle, detay ve sil linklerinin zemin rengi ise siyah olacaktır. Burada kullanım biçimi verilmiştir. Diğer özellikleri internetten bulabilirsiniz.

@foreach (var item in Model) {

    <tr style="color:yellow;background-color:blue;text-transform:uppercase">

        <td>

            @Html.DisplayFor(modelItem => item.Ad)

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.Sehir)

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.Firma)

        </td>

 

        <td style="background-color:black">

            @Html.ActionLink("DÜZENLE", "Edit", new { id=item.ID }) |

            @Html.ActionLink("DETAYLAR", "Details", new { id=item.ID }) |

            @Html.ActionLink("SİL", "Delete", new { id=item.ID })

        </td>

    </tr>

}

 

</table>

Sayfa yüklenince görüntü şekildeki gibi olacaktır.

 

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

 

 

 

 

 


 

22) Hangi sayfayı açarsak açalım en üst kısımda Application name yazan bir siyah bant vardır. Hatta bu Application name yazısına tıklayınca da sayfa bulunamadı hata mesajı verecektir. Çünkü Home isimli bir sayfamız yoktur.

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

 

 

Bu kısmı düzenlemek için Views klasörü altında bulunan Layout.cshtml dosyasını açalım.

 

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

 

 

 

23) Aşağıda büyük harfle yazılan değişiklikleri yapalım.

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>@ViewBag.Title - ANKARA 2015</title>

    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />

    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <script src="~/Scripts/modernizr-2.6.2.js"></script>

</head>

<body>

    <div class="navbar navbar-inverse navbar-fixed-top">

        <div class="container">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                @Html.ActionLink("BENİM UYGULAMAM", "Index", "Home", null, new { @class = "navbar-brand" })

            </div>

            <div class="navbar-collapse collapse">

                <ul class="nav navbar-nav">

                </ul>

            </div>

        </div>

    </div>

 

    <div class="container body-content">

        @RenderBody()

        <hr />

        <footer>

            <p>&copy; @DateTime.Now.Year - YÜKSEL TARAFINDAN YAPILDI</p>

        </footer>

    </div>

 

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>

    <script src="~/Scripts/bootstrap.min.js"></script>

</body>

</html>

 

24) Çalıştırdığımızda sayfa üst başlığı ve alt kısmı şekildeki gibi gözükecektir. Sağ taraftaki link birden fazla satır olduğunda sayfayı açmak-kapatmak için kullanılır.

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

 

 

 

 

 

 

 

 

 

 

25) Bu alt başlık (Yüksel Tarafından Yapıldı) renksiz. Bunu daha önceki sytle metodu ile değiştirebiliriz. Ancak bu sefer CSS yöntemi kullanacağız.Layout.cshtml dosyasının üst kısmında baktığımız zaman hemen title tagının altında şöyle ifadeler göreceğiz.

<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />

<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />

Bu satırların anlamı proje bulunan CSS dosyaları ile sayfayı ilişkilendiriyoruz. Bu CSS dosyalarını da Content klasörü altında görebiliriz.

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

 

 


 

26) Yeni bir CSS dosyası oluşturup yukardaki link href ile sayfamıza bağlayabiliriz. Ancak ben var olan bir CSS dosyası içinde yeni bir style tanımlaması yapacağım Bu daha pratik olacaktır. Bunun için ilk olarak Site.CSS  dosyasını açalım. Bunun içinde tanımlanmış onlarca style vardır.

En alta inerek .benimbaslik yazarak { açıp } kapattım.(NOKTA koymayı unutmayın)

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

 

 

 

 

 

 

 

27) Köşeli parantezler arasında sağ tuşa basarak Build Style seçeneğine tıklayalım. Eğer çıkmaz ise el ile yazacaksınız.

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

 

 

 

 

 

28) Gelen iletişim kutusundan zemin rengi yazı rengi font vesaire ayarlamaları yapalım.

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

 

 

 

 

 

 


 

29) Bunun sonucunda aşağıdaki ifadeler otomatik olarak yazılacaktır. Kaydedip çıkalım.

 

.benimbaslik {

    font-family: 'Arial Black';

    font-size: x-large;

    font-style: italic;

    background-color: #0000FF;

    color: #FFFF00;

}

30) _Layaout.cshtml dosyasının en altına inerek footer bölümüne aşağıdaki gibi bu class’ı ekleyelim.

 

        <footer>

            <div class="benimbaslik">

            <p>&copy; @DateTime.Now.Year - YÜKSEL TARAFINDAN YAPILDI</p>

             </div>

        </footer>

 

31) Sayfayı yüklediğimizde görüntü şekildeki gibi olacaktır.

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

 

 

 

 

 

 

 

 

 

 

 


 

32) Üst başlıkta bulunan Benim Uygulamam linkine tıkladığımız zaman sayfa yok hatası ile karşılaşıyoruz.

 

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

 

 

 

 

 

 

33) Bunun sebebi Layaout.cshtml dosyası içinde yazılı aşağıdaki satırdan kaynaklanır.

      @Html.ActionLink("BENİM UYGULAMAM", "Index", "Home", null, new { @class = "navbar-brand" })

Burada yazılı olan Home ifadesinin anlamı bir dizin adı diğeri ise sayfa adıdır. Biz şimdi rastgele oluşturduğumuz bir sayfaya yönlendireceğiz.

34) Proje adı üzerinde sağ tuşa basarak Add/New item seçeneği işe dede.aspx isimli bir web sayfası ekleyerek içinde “merhaba dede” yazalım.

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

 

 

 

 

 

 

 

35) Yukarıdaki ifadeyi aşağıdaki gibi değiştirelim. Buradaki noktanın anlamı ana dizi demektir.

@Html.ActionLink("BENİM UYGULAMAM", "dede.aspx", ".", null, new { @class = "navbar-brand" })

 


 

36) Çalıştırarak sonucu gözlemleyelim.

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

37) Projemizi bir aspx sayfası ile ilişkilendirelim. Bunun için ana dizine index.aspx isimli bir web sayfası ekleyerek üzerine “UYGULAMAMIZA HOŞ GELDİNİZ” ı yazalım. Altına koyduğumuz tablo içine bir Hyperlink kontrolü getirerek onun da Text kısmına Kullanıcı Kayıtları yazalım. Görüntü şekildeki gibi olacaktır.

 

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

 

 

 

 

 

 

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

 

 

 

 

 

 

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

 

 

 

 

 

 

38) Hyperlink özelliklerinden NavigateUrl kısmına şekildeki gibi ~/Users yazalım. Bu ifade ile direk bizim Views altındaki User klasörü içindeki Index.cshtml dosyasına yönlendirmiş oluyoruz.

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

 

 

 


 

39) Index.aspx dosyamızı yükleyerek linke tıkladığımızda Index.cshtml dosyasına gittiğimiz gözlemleyelim.

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

 

 

 

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

 

 

 

 

40) Benim Uygulamam yazısına tıkadığımızda Index.aspx dosyasına dönsün. Ve Benim Uygulamam yazısı yerine ANA SAYFA yazsın. Bu işlemleri yapınız.

Layout.cshtml içinden;

   @Html.ActionLink("ANA SAYFA", "index.aspx", ".", null, new { @class = "navbar-brand" })

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

 

 

 

 

 

 

 


 

Bu arada veri tabanı oluşmuş mu? Onu kontrol etmek için App_Data klasörü üzerinde sağ tuşa basarak Open Folder in File Explorer seçimi yapalım.

 

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

 

 

 

 

 

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

 

 

 

 

 

Projeye dâhil etmek için Show All Files  seçilir. Ardından dosya seçilerek

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

 

 

 

 

 

 

 

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

41) Şimdi sitemiz içinde ikinci bir Model ile veri tabanı yapısı oluşturalım. Bunun için ilk olarak

 Models/Add/Class seçimi yapılarak gelen ekrana adres.cs yazarak onaylayalım.

 

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

 

 

 

 

 

 

 

42) Kodları aşağıdaki gibi değiştirelim.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

 

 

using System.Data.Entity; //Eklemeyi Unutmayınız

 

namespace ders3.Models

{

    public class adres

    {

        public int ID { get; set; }

        public string Ad { get; set; }

        public string Yer { get; set; }  //Adres yazma class ismi ile çakışır..

        public string Tel { get; set; }

        public int Maas { get; set; }

    }

 

    public class AdresDbContext : DbContext

    {

        public DbSet<adres> Adresler { get; set; }

    }

}


 

43)  Controllers/Add/New Scaffolded Item seçeneğine tıklayalım.

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

 

 

 

 

 

44)Gelen sihirbaz ekranından sol taraftan Common seçimini ve sağ taraftan 2.seçimi yaparak Add butonuna basalım.

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

 

 

 

 

45) Aşağıdaki seçimleri yaparak onaylayalım. İsmini AdreslerController verdik.

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

 

 

 

 

 

 

 

 

 

 

 


 

Bu işlem sonucunda aşağıdaki hata mesajı ile karşılaşırsanız, projenizi derlemeniz gerekir.

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

 

 

 

 

 

 

 

Sonuçta Adres klasörü View altında oluşması gerekir.

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

 

 

 

 

 

 

 

 

 

 

 

46) index.aspx dosyamıza ikinci bir Hypertext koyarak “Kullanıcı Bilgileri” yazalım ve Navigate URL kısmına ~\Adresler yazalım.

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

 

 

 


 

 

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

 

 

 

 

 

 

 

47) index.aspx sayfasını yükleyerek yeni oluşturduğumuz veri tabanına bilgileri girelim.

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

 

 

 

 

 

 

 

 

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

 

EMPTY CONTROLLER:

 

İsterseniz bu kısmı yeni bir proje açarak yapabilirsiniz.

48) Kontrol yapısını daha iyi anlamak için bu sefer yeni bir boş kontrol ekleyeceğiz. Bunun için Controllers klasörü üzerinde sağ tuşa basarak Add/Controller seçimi yaptıktan sonra MVC-5 Controller-Empty kalıbını seçerek Add butonuna basıyoruz.

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

 

 

 

 

 

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

 

 

 

 

 

 

HomeController adı ile ekleyelim.

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

 

 

 


 

49) İçindeki kodları aşağıdaki gibi yapılandıralım.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

 

namespace ders0.Controllers

{

    public class HomeController : Controller

    {

        //

        // GET: /Home/

        public ActionResult Index()

        {

            return View();

        }

 

        public ActionResult Welcome()

        {

            ViewBag.Message = "Merhaba Dünyalı Hoş Geldin";

            return View();

        }

       }

}

50) View klasörü altında Home klasörü yoksa oluşturalım varsa sorun yok. Ardından Home klasörü üzerinde sağ tuşa basarak Add/View seçeneğine basarak ismine Index verelim.

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

 

 

 

 

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

 

 

 

 

 

 

 

 

 

Burada Use a layout page seçeneğini işaretlediğimiz için varsayılan olarak bir seçim yapılmasa bile üst ve alt başlığı kullanacaktır. Eğer istemiyorsak bu kutuyu boş bırakmak gerekir.

 

51) index.aspx içine yeni bir Hypertext ekleyerek bu sayfa ile ilişkilendirelim.

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

 

 

 

 

 

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

 

 

 

 

 

 

52) Index.aspx sayfasını yükleyerek seçim yapalım ve  şekildeki yapının geldiğini gözlemleyelim.

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

 

 

 

 

 

 

 

53) Artık kendi alt ve üst başlığımızı sıfırdan oluşturalım. Bunun için Shared klasörü üzerinde sağ tuşa basarak Add MVC 5 Layout Page seçimi yaparak ismine  _HomeLayout diyelim.

 

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

 

 

 

 

 

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

 

 

 

 

 

54) Kod kısmını aşağıdaki gibi yapılandıralım. Esasında bizim ana sayfamızdaki kodlar ile aynı sadece iki satır ilave ettik. Onun için Layout.cshtm içindeki kodları kopyalayın. Sadece değişiklikleri yansıtın.

 

<!DOCTYPE html>

 

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>@ViewBag.Title - Home Sayfası</title>

    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />

    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <script src="~/Scripts/modernizr-2.6.2.js"></script>

  

</head>

<body>

    <div class="navbar navbar-inverse navbar-fixed-top">

        <div class="container">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

 

                @Html.ActionLink("Yeni Başlık", "Index", "Home", null, new { @class = "navbar-brand" })

                @Html.ActionLink("Home", "Index", "Home")

                @Html.ActionLink("Welcome", "Welcome", "Home")

             

                </div>

 

            <div class="navbar-collapse collapse">

                 <ul class="nav navbar-nav">

                  

                </ul>

            </div>

        </div>

    </div>

    <div class="container body-content">

        @RenderBody()

        <hr />

 

            <footer>

               <p>&copy; @DateTime.Now.Year - YÜKSEL-KADIKÖY</p>

            </footer>

      </div>

 

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>

    <script src="~/Scripts/bootstrap.min.js"></script>

</body>

</html>

 

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

 

 

 

 

 

 

 

 

 

 

Bu iki sattırın diğer bir yazılış şekli . Hemen alttaki <ul class >  içine <li> tagları arasına yazılabilir. Hangi görüntü hoşunuza gitti ise onu kullanınız.

  <div class="navbar-collapse collapse">

                 <ul class="nav navbar-nav">

                   <li>  @Html.ActionLink("Home", "Index", "Home"</li>

                <li> @Html.ActionLink("Welcome", "Welcome", "Home") </li>

                </ul>

            </div>

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


 

55) Home klasörü içindeki Index.cshtml sayfamızı bu layout sayfası ile ilişkilendirmek için Index sayfasının kod kısmına aşağıdaki ifadeyi yazalım.

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_HomeLayout.cshtml";

}

 

<h2>Index</h2>

 

HOME içindeki Index sayfasındasınız.

56) Yeni bir sayfayı Home klasörü altına welcome adı ile ekleyelim. Bu sefer yeni layout sayfamızla direk olarak ilişkilendirdik.

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

 

 

 

 

 

 

 

 

 

57) Çalıştırabiliriz.

 

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

 

 

 

 

 


 

58) Model daha öne oluşturmuştuk. Yeni bir model oluşturalım. Ancak bunu yeni proje de yapıyorsanız ilk olarak yapmanız gerekenleri kısaca hatırlayalım.

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

 

 

 

 

 

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

 

 

 

 

 

Eğer projenize daha önce kurduysanız görüntü aşağıdaki gibi olacaktır.

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

 

 

 

59) Models klasörü üzerinde Add/Class seçeneğini kullanarak Okul.cs isimli bir class ekleyelim.

 

60) İçindeki kodları aşağıdaki gibi düzenleyelim.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

 

using System.Data.Entity; //Eklemeyi Unutmayalım

 

namespace ders3.Models

{

    public class okul

    {

        public int ID { get; set; } //Bu değişmez

        public string Ad { get; set; }

        public int Sozlu { get; set; }

        public int Yazılı { get; set; }

        public string Derece { get; set; }

    }

 

    public class okulDbContext : DbContext

    {

        public DbSet<okul> okulnot { get; set; }

    }

}

 


 

61) Veri tabanı bağlantısı için eğer bu proje yeni ise web.config içine configuration kapanış tagının hemen üstüne aşağıdaki kodları ilave ediyoruz.

<connectionStrings>

    <add name="okulDbContext"

connectionString="Data Source=(LocalDb)\v11.0;
AttachDbFilename=|DataDirectory|\okul.mdf;
Integrated Security=true
"

      providerName="System.Data.SqlClient"/>

</connectionStrings>

 

62) Projemizi derledikten sonra Controllers üzerinde sağ tuş Add ve New Scaffolded Item seçeneğine tıklayarak kalıbımızı seçelim.

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

 

 

 

 

 

 

 

63) Projemizi derleyelim. Şekildeki seçimleri yaparak onaylayalım.

 

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

 

 

 

 

 

 

 

 

 


 

64) _HomeLayout sayfasında daha önce eklediğimiz üst başlık seçeneklerinin altına aşağıda büyük yazılmış satırı ekleyelim.

@Html.ActionLink("Yeni Başlık", "Index", "Home", null, new { @class = "navbar-brand" })

@Html.ActionLink("Home", "Index", "Home")

@Html.ActionLink("Welcome", "Welcome", "Home")

@Html.ActionLink("Okulumuz", "Index", "Okullar")

65) Projemizi çalıştırarak Home seçimi yapalım ve buradan üst kısımda görünen Okulumuz linkine tıklayalım.

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

 

 

 

 

 

 

 

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

 

 

 

 

 

 

 

 

 

66) Şu ana kadar oluşturduğumuz tüm bilgiler veri tabanında tutulmaktadır. Bunu görmek için Server Explorer kısmını kullanabiliriz.

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

 

 

 

 

 

 

 

 

 67) Şu ana kadar pek çok kullandığımız razor page’ler sayesinde çok kullanışlı ve performanslı sayfa oluşturduk. Bu kısımda bir razor sayfası daha oluşturarak linkimize ilave edelim. Bunun için Home folder üzerinde sağ tuşa basarak Add/MVC 5 View Page (Razor) seçeneğine tıklayalım.

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

 

 

 

 

 

68) zaman ismi vererek oluşturalım.

 

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

 

 

 

Kod kısmına geçtiğimiz layoutu olmayan boş bir sayfa olarak oluştuğunu gözlemleyebliriz.

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

 

 

 

 

 

 

 

 

 


 

69) div taglarının arasına aşağıdaki kodları yazalım.

Merhaba <p>Saat: @System.DateTime.Now.ToLongTimeString(); </p>

        <hr />

Tarih:@System.DateTime.Now.ToLongDateString();

70) HomeLayout sayfasına aşağıdaki satırı ilave edelim.

@Html.ActionLink("ZamanveTarih", "zaman", "Home")

71) HomeController içine aşağıdaki satırı ekleyelim.

  public ActionResult zaman()

        {

            ViewBag.Message = "Zaman zaman o zaman";

            return View();

        }

 

 

71) Çalıştırarak sayfayı gözlemleyelim.

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