PROJE1:

Şimdi buraya kadar anlattıklarımız en ergonomik şekilde nasıl yapacağımızı planlayarak uygulayalım.

1) Proje1 adıyla yeni bir boş MVC5 uygulaması oluşturalım

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

2) Server Explorer kısmını açarak Data Connections üzerinde sağ tuşa basıp Add Connection seçeneğine tıklayalım.

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

3) Microsoft SQL Server Database File seçimi yaparak onaylayalım.

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

4) proje1 yazarak gelen oluşturma iletişim kutusunu onaylayarak veri tabanını oluşturalım.

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

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

5) Add New Table seçeneği ile yeni bir tablo ekleyelim.

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

6) Tablomuzu şekildeki gibi yapılandırarak superlig adı ile kaydedelim.

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

7) Tablo adı üzerinde sağ tuşa basarak Show Table Data seçeneğine tıklayalım.

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

8) 2 tane kayıt gireceğiz. Ancak bu zorunlu değil. Boş bırakabilir ve web uygulamamızda girebiliriz.

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

9) Oluştururken direk App_Data klasörü altında oluşturabilirdik. Ancak sonradan da ekleyebiliriz. Bunun için App_Data klasörü üzerinde sağ tuşa basarak Add/Existing Item seçeneği ile veri tabanımızı bulup projemize dâhil edelim.

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

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

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

Eğer eklenmez ise Server Explorer kısmından bağlantıyı kapatınız.

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

10) Models klasörü üzerinde sağ tuşa basarak Add/New Item seçeneğine tıklayalım. Eğer varsa 11.adımı yapmanıza gerek kalmadan direk oalrak

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

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

11) Data KISMINDAN ADO.NET Entity Data Wizard seçimi yaparak ismine superligmodel yazalım.

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

12) Empty EF Designer model seçimi yapacağız.

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

13) Sağ tuşa basarak Update Model from Database seçimi yapalım.

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

14) Veri tabanını seçelim. Web.config içine yazılacak bilgiye dikkat edin.

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

15) Web.config içine veri tabanımızın yolunu belirten aşağıdaki ifade otomatik olarak yazılmıştır.

attachdbfilename=|DataDirectory|\proje1.mdf;integratedSecurity=True;MultipleActiveResultSets=True;App=EntityFramework"

Ayrıca tüm tabloyu çağırırken kullanacağımız bağlantı ifadesi superligmodelContainer oalcak şekilde Web.Config içine yazılacaktır.

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

16) Tablomuzu seçerek Finish ile sonlandıralım.

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

17) Şekildeki gibi tasarım oluşur.

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

18) Projemizi derleyelim. Ardından Controllers üzerinde sağ tuşa basarak Add/New Scaffolded Item seçimi yapalım.

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

19) Şekildeki seçimi yaparak Add butonuna basalım.

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

20) Ardından şekildeki bilgileri girerek onaylayalım.

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

21) Şekildeki View’lar otomatik olarak oluşacaktır. (Shared klasörü de oluştu)

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

22) Test etmek için RouteConfig dosyasındaki Home ifadesini superligs olarak değiştirelim.

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

23) Models klasörü altında bulunan superlig.cs dosyasını açalım.

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

24) Başlıkları değiştirmek için aşağıdaki namespace eklemesini yapalım.

using System.ComponentModel.DataAnnotations; //Başlıklar için

Ardından kodlarımızı şekildeki gibi düzenleyelim.

public partial class superlig

{

public int Id { get; set; }

[Display(Name = "Futbolcu Adı")]

public string futbolcu { get; set; }

[Display(Name = "Transfer Olduğu Takım")]

public string takım { get; set; }

[Display(Name = "Transfer Tutarı")]

public Nullable<decimal> fiyat { get; set; }

}

Test edelim. 2 yeni kayıt daha girelim.

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

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

Son görüntü şekildeki gibi olacaktır.

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

25) Index.cshtml dosyasındaki kodları aşağıdaki gibi değiştirelim.

model IEnumerable<proje1.Models.superlig>

ViewBag.Title = "Tüm Kayıtlar";

}

<h2>Index</h2>

<p>

@Html.ActionLink("Yeni Kayıt", "Create")

</p>

<tr>

<th>

Futbolcu

@*@Html.DisplayNameFor(model => model.futbolcu)*@

</th>

<th>

@Html.DisplayNameFor(model => model.takım)

</th>

<th>

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

</th>

</tr>

@foreach (var item in Model)

{

<tr>

<td>

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

</td>

@Html.DisplayFor(modelItem => item.takım)

</td>

<td>

@String.Format("{0:N0} $",item.fiyat)

@*@Html.DisplayFor(modelItem => item.fiyat)*@

</td>

<td>

@Html.ActionLink("Düzenle", "Edit", new { id=item.Id }) |

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

@Html.ActionLink("Sil", "Delete", new { id=item.Id })

</td>

</tr>

}

</table>

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

*** Para formatının her yerde geçerli olmasını istersek o zaman superlig.cs dosya içindeki fiyat bölümünü aşağıdaki gibi düzenleyelim.

[DisplayFormat(DataFormatString = "{0:N0} $")]

[Display(Name = "Transfer Tutarı")]

public Nullable<decimal> fiyat { get; set; }

Ardından Index.cshtml dosyasına bununla ilgili satırı aşağıdaki hale getirelim. Yeşiller eski halleridir.

<td>

@*@String.Format("{0:N0} $", item.fiyat)*@

@*@Html.DisplayFor(modelItem => item.fiyat)*@

<div style="text-align: right; width: 70px"> @Html.DisplayFor(modelItem => item.fiyat)</div>

</td>

$Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip266.png$ Son görüntü şekildeki gibi olacaktır.

26) create.cshtml sayfasına geçerek takım kısmına aşağıdaki ilaveyi yapalım.

@*@Html.EditorFor(model => model.takım)*@--Bu satırın yerine aşağıdaki satırları ilave ettik.

@Html.DropDownListFor(Model=>Model.takım,new SelectList(

new List<Object>{ new { value="FB",text="FB"},

new { value="GS",text="GS"},

new { value="Barcelona",text="Barcelona"},

new { value="BJK",text="BJK"},

new { value="TS",text="TS"}

},"value","text",2))

27) Çalıştırarak yeni bir kayıt girelim.

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

28) Biz yeni bir kayıt oluştururken hata oluştuğu zaman bizi uyarır. Kendisinde var olan hata mesajları yanı sıra bizde kendi hata mesajlarımızı oluşturabiliriz. Bunun birkaç yolu vardır. Bunlardan ilki direk olarak Model içinde tanımlı olan alanların bulunduğu dosyadan yapabiliriz. Bunun içim Model klasörü içinde bulunan superlig.cs dosyasını açarak aşağıdaki gibi yapılandıralım.

namespace proje1.Models

{

using System;

using System.ComponentModel.DataAnnotations; //Bunu İlave Ettik

public partial class superlig

{

public int Id { get; set; }

[Required(ErrorMessage = "Futbolcu Adı Girmek Zorunludur")] //Futbolcu Adı Girmek Zorunlu

public string futbolcu { get; set; }

public string takım { get; set; }

[Required(ErrorMessage = "Fiyat Girmek Zorunludur")] //Fiyat Girmek Zorunlu

[Range(1, 100000000, ErrorMessage = "1-100.000.000 Arası Sayısal Giriniz")]

public Nullable<decimal> fiyat { get; set; }

}

29) Çalıştırarak test edelim.

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

30) Details kısmına geçtiğimizde yapmış olduğumuz biçimlerin burada da geçerli olduğunu görebilirsiniz.

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

31) Yeni bir 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 _esas diyelim.

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

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

32) Kod kısmını aşağıdaki gibi yapılandıralım. Esasında _LayoutPage içindekileri kopyalayabiliriz. Ancak sıfırdan yapmaya çalışalım.

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title</title>

</head>

<body>

<div>

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

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

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

</div>

<div>

@RenderBody()

</div>

<p>© @DateTime.Now.Year -Proje1 by Yüksel İnan</p>

</footer>

</body>

</html>

33) 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. HomeController ismi ile ekleyelim.

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

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

namespace proje1.Controllers

{

public class HomeController : Controller

{

// GET: /Home/

public ActionResult Index()

{

return View();

}

public ActionResult Sayfa1()

{

return View();

}

public ActionResult Adres()

{

return View();

}

35) Home klasörü içinde Index, Sayfa1 ve Adres dosyalarını şekildekine benzer şekilde oluşturalım. Dikkat Layout kısmından _esas sayfasını seçiyoruz.

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

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

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

36) Aşağıdaki gibi View dosyalarının oluşması gerekir.

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

37) App_Start içindeki RouteConfig sayfasını açarak buradaki controller bilgisini Home olarak değiştirelim.

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

38) adres.cshtml dosyasını aşağıdaki gibi yapılandıralım.

ViewBag.Title = "Adres";

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

}

<h2>Adres</h2>

Kadıköy-İstanbul

39) Projemizi derleyerek yükleyelim.

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

40) esas.cshtml dosyasındaki Sayfa1 ifadesinin bulunduğu satırı aşağıdaki gibi değiştirerek tekrar sayfamızı yükleyelim.

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

@Html.ActionLink("Superlig","Index","superligs")

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

41) Superlig seçimi yapınca;

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

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

42) Şimdi bu son ekranda Application Name ifadesi Ana Sayfa olarak değiştirelim ve tıklayınca bizim en son oluşturduğumuz Home içindeki Index sayfasına gitsin. Bunun için _Layout.cshtml dosyasındaki ifade aşağıdaki gibi olmalıdır.

@Html.ActionLink("Ana Sayfa", "Index", "Home", null, new { @class = "navbar-brand" })

43) Projemizi yükleyerek test edelim.

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

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

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

44) _esas.cshtml dosyasını biçimlendirmek için kendi stil dosyamızı oluşturalım. Bunun için

Content klasörü üzerinde sağ tuşa basarak Add/StyleSheet seçeneğine tıklayarak ismine ana.css yapalım.

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

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

45) ana.css içindeki kodları ben aşağıdaki gibi yaptım. Siz de sağ tuşa basarak BuildStyle seçeneği ile istediğiniz gibi düzenleyebilirsiniz.

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

body {

margin: 0;

font-family: 'Wide Latin';

font-size: 12px;

font-weight: bold;

color: #FFFF00;

background-color: #0000FF;

}

46) ana.css dosyamızı esas.cshtml dosyamızla ilişkilendirmek için esas.cshtml dosyamızı açarak , ana.css dosyamızı <title> tagının altına sürükleyelim. Görüntü şekildeki gibi olacaktır.

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

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

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

48) ana.css dosyamıza aşağıdaki ifadeleri de ilave edelim.

body {

margin: 0;

font-family: 'Wide Latin';

font-size: 12px;

font-weight: bold;

color: #FFFF00;

background-color: #0000FF;

}

.distaraf

{

width: 100%;

height: 5%;

min-height:400px;

}

.ictaraf {

width: 80%;

margin: 0 auto;

height: 75%;

background-color: #000080;

}

.baslikust {

width: 100%;

height: 50px;

background-color: #008000;

font-family: Algerian;

font-size: 20px;

}

.tumrenderbody

{

width: 100%;

min-height: 350px;

}

.baslikalt {

width: 80%;

height: 5%;

margin: 0 auto;

background-color: #FFFF00;

font-family: Arial;

font-size: 30px;

color: #0000FF;

}

.default

{

background-color: #C0C0C0;

min-height: 350px;

}

49) esas.cshtml dosyamızı da aşağıdaki gibi değiştirelim.

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title</title>

</head>

<body>

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

@Html.ActionLink("Superlig","Index","superligs")

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

</div>

@RenderBody()

</div>

<p>© @DateTime.Now.Year -Proje1 by Yüksel İnan</p>

</div>

</footer>

</body>

</html>

$Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip204.jpg$ 50) Projemizi yükleyerek son halini görelim.

51) Şimdi üst başlık üzerine fare ile gelince renginin değişmesini ve ayrılınca tekrar başka bir renk almasını sağlayacağız. esas.cshtml dosyasını açarak html kapanış tagından sonra aşağıdaki script tanımlamalarını yapabiliriz.

function gel(kontrol,yazi,zemin)

{

kontrol.style.backgroundColor = zemin;

kontrol.style.color = yazi;

}

function git(kontrol, zemin2, yazi2) {

kontrol.style.backgroundColor = yazi2;

kontrol.style.color = zemin2;

}</script>

52) Yine aynı sayfada action linkleri aşağıdaki gibi düzenleyebiliriz. İkincisi zemin rengidir.

<table>

<tr >

<td onmouseover="gel(this,'white','blue')" onmouseout="git(this,'red','white')"> @Html.ActionLink("Anasayfa","Index","Home")</td>

<td onmouseover="gel(this,'white','blue')" onmouseout="git(this,'red','white')"> @Html.ActionLink("Superlig","Index","superligs")</td>

<td onmouseover="gel(this,'white','blue')" onmouseout="git(this,'red','white')"> @Html.ActionLink("Adres","Adres","Home")</td>

</tr>

</table>

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

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

54) Ancak ben bunu çok kullanışlı bulmuyorum. Bunun için 51. Ve 52. Adımda yaptıklarımız iptal edelim. Diğer bir seçenek baslikust için aşağıdaki gibi tanımlama yapılır. Ancak sadece burada geçerli olacağı çok kullanışlı olmaz. ONUN İÇİN BUNU UYGULAMAYINIZ….

<style>

A:link {background:red; color: yellow;}

A:visited {background:red; color: blue;}

A:active {background:red; color: black;}

A:hover {background:red; color: grey;}

</style>

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

@Html.ActionLink("Superlig","Index","superlik")

$Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip207.jpg$ @Html.ActionLink("Adres","Adres","Home")

55) Şimdi en kullanışlısını yapacağız. ana.css dosyasının en altına boşluk kısmına aşağıdaki kodları yazarsak. Başka hiçbir şey yapmadan direk çalıştırarak linkleri görebiliriz. Bu css ile ilişkili tüm sayfalarda geçerli olur.

a:link{color: black; }

a:visited { color: blue;} /*"tıklanmış linkimiz mavi olsun"*/

a:hover { color: red} /*"üzerine gelince kırmızı renk olsun"*/

a:active { color: aqua;} /*"aktif - linke tıklayınca turkuaz renk olsun"*/

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

56) Ancak ben bu css ilişki sayfalarda sadece belli kısımlar için geçerli olmasını istersem o zaman aşağıdaki gibi CSS içinde class yapısını kullanırım. Burda zz benim verdiğim class ismidir.

a.zz:link{color: black; }

a.zz:visited { color: whitesmoke;} /*"tıklanmış linkimiz mavi olsun"*/

a.zz:hover { color: red} /*"üzerine gelince kırmızı renk olsun"*/

a.zz:active { color: aqua;} /*"aktif - linke tıklayınca turkuaz renk olsun"*/

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

57) esas.chtml içinde Html.Actionlink kısmını aşağıdaki gibi düzenliyoruz.

@Html.ActionLink("Ana Sayfa", "Index", "Home",null, new { @class = "zz" })

@Html.ActionLink("Superlig","Index","superligs",null, new { @class = "zz" })

@Html.ActionLink("Adres","Adres","Home", null, new { @class = "zz" })

58) Sayfayı yükleyerek test edebiliriz.

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

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

59) Şimdi içi içe Layout oluşturalım. Yani ekranın sol kısmında da bir menü oluşturalım. Bunun için yeni bir Layout’u _yan.cshtml adı ile Shared klasörü altında oluşturalım.(COPY-Paste ile _Layout dosyasını kopyalayarak düzenleyebilirsiniz)

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

60) ana.css dosyamın en altın aşağıdaki kodları ekleyelim.

.sol {

width: 15%;

height: 100%;

min-height: 350px;

float: left;

background-color: #008080;

}

.sag {

width: 85%;

height: 100%;

min-height: 350px;

float: left;

background-color: #35D59D;

}

61) _yan.cshtml sayfasının en üstüne aşağıdaki ifadeyi ekleyelim.

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

}

62) Altına aşağıdaki kodları ilave edelim

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

}

<!DOCTYPE html>

<html>

<head>

<title>@Page.Title</title>

@RenderSection("head", required: false)

</head>

<body>

@Html.ActionLink("Ders1", "ders1", "Home",null, new { @class = "zz" })

<br />

@Html.ActionLink("Ders2", "ders2", "Home",null, new { @class = "zz" })

<br />

@Html.ActionLink("Ders3", "ders3", "Home",null, new { @class = "zz" })

</div>

@RenderBody()

</div>

</body>

</html>

63) Home klasörü altında bulunan Index.cshtml dosyasını açarak bağlandığı Layout sayfasını _yan.cshtml olarak değiştirelim.

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

64) Aynı işlemi Adres.cshtml dosyası içinde yapalım.

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

65) Home klasörü altına Layout sayfası olarak _yan.cshtml dosyasını kullanarak ders1,ders2 ve ders3 isimli üç adet View ekleyelim.

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

66) View altındaki görüntü şekildeki gibi olacaktır.

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

67) Şimdi bu yeni eklediğimiz sayfaları tanımlamak için Controllers içinde bulunan HomeControllers.cs dosyasını açarak aşağıdaki satırları ilave edelim.

public ActionResult ders1()

{

return View();

}

public ActionResult ders2()

{

return View();

}

public ActionResult ders3()

{

return View();

}

68) Sayfamızı yükleyerek test edelim.

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

69) Web Grid ile ilgili bir uygulama yapalım.

Models üzerinde sağ tuşa basarak Add/Class seçeneğine tıklayalım.

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

70) İsmine Fish verelim.

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

71) İçinde aşağıdaki veri tabanı tanımlamasını yapalım.

namespace proje1.Controllers

{

public class fish

{

public string Id { get; set; }

public string Ad { get; set; }

public string Açıklama { get; set; }

public long Adet { get; set; }

}

72) Controllers klasörü altında MVC 5 Controller-Empty kalıbını seçerek fishController isimli bir kontrol oluşturalım.

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

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

73) FishController.cs içindeki kodlar aşağıdaki gibidir.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Collections.ObjectModel; //bunu ekledik

using proje1.Models; //Bunu ekleyin bu Models'deki namespace aynı ise gerek yok.

namespace proje1.Controllers

{

public class FishController : Controller

{

// GET: /Fish/

public ActionResult Index()

{

return View();

}

public ActionResult WebgridFish()

{

ObservableCollection<fish> fishlist = new ObservableCollection<fish>();

fishlist.Add(new fish

{

Id = "B101",

Ad = "Japon",

Açıklama = "Gereksiz Balık",

Adet = 1

});

fishlist.Add(new fish

{

Id = "B102",

Ad = "Koi",

Açıklama = "Çok Büyür",

Adet = 6

});

fishlist.Add(new fish

{

Id = "B103",

Ad = "Melek",

Açıklama = "Sakin Balık",

Adet = 9

});

fishlist.Add(new fish

{

Id = "B104",

Ad = "Tetra",

Açıklama = "Dayanıksız Balık",

Adet = 10

});

return View(fishlist);

}

74) View kısmında Fish klasörü üzerinde sağ tuşa basarak Add/View seçimi yapalım. Şekildeki gibi WebGridFish adı ile ekleyelim. Layout olarak _yan.cshtml dosyasını kullandık.

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

75) WebGridFish.cshtml dosyasını aşağıdaki gibi yapılandıralım.

DİKKAT :Bu uygulamada Internet Explorer sürümünüz eski ise Jquery hatası verebilir. Ya Continue ile devam edin.Ya da Yandex Browser’ı yükleyiniz.

ViewBag.Title = "WebGridFish";

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

}

<h2>WebGridFish</h2>

<html>

<head>

<title>WebgridSample</title>

.webGrid { margin: 4px; border-collapse: collapse; width: 500px; background-color:#FCFCFC;}

.header { background-color: #C1D4E6; font-weight: bold; color: #A0C544; }

.webGrid th, .webGrid td { border: 1px solid #808080; padding: 5px; }

.alt { background-color: #E4E9F5; color: #000; }

.gridHead a:hover {text-decoration:underline;}

.description { width:auto}

.select{background-color: #389DF5}

</style>

</head>

<body>

proje1.Models.fish fish = new proje1.Models.fish();

}

var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5, selectionFieldName: "selectedRow",ajaxUpdateContainerId: "gridContent");

grid.Pager(WebGridPagerModes.NextPrevious);}

@grid.GetHtml(tableStyle: "webGrid",

headerStyle: "header",

alternatingRowStyle: "alt",

selectedRowStyle: "select",

columns: grid.Columns(

grid.Column("Id", format: (item) => item.GetSelectLink(item.Id)),

grid.Column("Ad", " Name"),

grid.Column("Açıklama", "Description", style: "description"),

grid.Column("Adet", "Quantity")

))

@if (grid.HasSelection)

{

fish = (proje1.Models.fish)grid.Rows[grid.SelectedIndex].Value;

<b>Açıklama</b> @fish.Açıklama<br />

}

</div>

</body>

</html>

76) _yan.cshtml dosyasında ders1 linkini aşağıdaki gibi değiştirelim.

@Html.ActionLink("WebGrid", "WebGridFish", "Fish",null, new { @class = "zz" })

77) Projemizi çalıştıralım.

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

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

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

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

79) Şimdi ilk dersimizde bahsettiğimiz PartialView kullanacağız. Yani bir sayfayı post bacak etmeden başka bir sayfayı çağıracağız. Bu şekilde istediğimiz Viev içine başka bir Partial sayfayı koyabiliriz.

İlk olarak Fish klasörü içinde _FishPartial isimli bir PartialView’ı aşağıdaki gibi oluşturalım

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

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

80) _FishPartial.cshtml dosyasının içine aşağıdaki kodları yazalım.

@model proje1.Models.fish

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>AddProduct</title>

</head>

<body>

<div>

<table>

<tr>

<td>@Html.TextBox("Id",Model.Id)</td>

</tr>

<tr>

<td> @Html.TextBox("Ad", Model.Ad)<br /></td>

</tr>

<tr>

<td><label>Açıklama:</label></td>

<td> @Html.TextBox("Açıklama", Model.Açıklama)<br /></td>

</tr>

<tr>

<td><label>Miktar:</label></td>

<td> @Html.TextBox("Quantity", Model.Adet)<br /></td>

</tr>

</table>

</div>

</body>

</html>

81) Aşağıdaki ifadelerden birini WebGridFish.cshtml dosyasındaki @if (grid.HasSelection)

Bloğunun en altına ekleyelim.

Html.RenderPartial("~/Views/Fish/_FishPartial.cshtml", fish);

veya

Html Partial("~/Views/Fish/_FishPartial.cshtml", fish);

Birincisi daha hızlıdır. Direk bir Void döndürdüğü için bilgileri ayrı ayrı kullanabiliriz. İkincisi ise string değer döndürür.

82) Büyük Harfle yazılanı ilave ettik.

@if (grid.HasSelection)

{

fish = (proje1.Controllers.fish)grid.Rows[grid.SelectedIndex].Value;

<b>Açıklama</b> @fish.Açıklama<br />

Html.RenderPartial("~/Views/Fish/_FishPartial.cshtml", fish);

}

83) Çalıştırarak sonucu gözlemleyim.

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

84) Seçilen kayda ait bilgiler text kutularına gelir.

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

PUBLISH:

Bir projeyi çeşitli ortamlara aktararak çalıştırabilirsiniz. Bu ortamlardan biri Windows Azure olabilir veya IIS olabilir.

Windows 8.1 üzerine IIS kurulması;

1) Control Panel içinden Programs linkine tıklanır.

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

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

2) Turn Windows features on or off seçeneğine tıklarız. Internet Information Services seçeneğinin başındaki kutucuk işaretlenerek varsayılan ayarlar seçilir.

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

3) Başındaki artıyı açarak altında bulunan Application Development Features seçeneğinin altında şekildeki kutucukları dolduralım.

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

4) IIS kurulumu tamamlandıktan sonra eğer yoksa SQL Express kurmanız veri tabanları için gereklidir. Bunun için bizi aşağıdaki kutucukla Web Platform Installer sayfasına yönlendirir. Bunun için Yes butonuna basmamız yeterlidir.

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

5) Download ederek kuruluma başlayabiliriz.

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

6) Şimdi projemizi açarak (Run as Administrator) Publish olayına başlayabiliriz.

Bir projeyi tamamladıktan sonra onu web ortamına veya intranet ortamına atarak herkesin kullanımına açarız. Bu işleme PUBLISH adı veriyoruz. Projemizi derledikten sonra proje adı üzerinde sağ tuşa basarak Publish seçeneğine tıklıyoruz.

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

$Açıklama: C:\Users\yukse_000\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip281.png$ 7) Açılır listeden Custom seçimi yaparak yeni bir profil için isim verip onaylıyoruz.

8) Çeşitli deploy yöntemleri var. Bu hangi ortama yollayacağınızla alakalıdır. Ancak en yaygın olan WebDeploy seçimi yapıyoruz. IIS yoksa File System seçimi yapınız.

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

9) Ancak büyük ihtimalle sorunla karşılaşacaksınız bunlardan ilki Visual Studio programı için yetkiniz olmadığı ve yönetici olarak açmanız gerektiği olabilir. Eğer böyle bir sorun ile karşılaşırsanız programı kapatıp yönetici olarak açarak tekrar projenizi çağırın.

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

$Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip254.jpg$ 10) Diğer bir sorun IIS ile ilgili olabilir. Bunun için ise IIS yöneticini açarak Uygulama Havuzları sürümünü değiştiriyoruz.

$Açıklama: C:\Users\sanane\AppData\Local\Temp\SolidDocuments\SolidCapture\captureclip256.jpg$ 11 )Ardından devam ediyoruz.

Veya

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

12) Next ve içeriği gördükten sonra Publish butonuna basıyoruz. Buradaki bilgiler c sürücüsünde inetpub wwwroot klasörüne gitmiş durumdadır.

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

13 ) Klasörü kontrol ediniz.

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

14) Eğer IIS ortamına yolladıysanız Virtual Directory direk olarak oluşur. Aksi durumda Default Web Site altına bir Virtual directory oluşturarak klasörle ilişkilendiririz.

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

15) Artık buradan alıp Web ortamına atabilirsiniz. Veya http://localhost/huhu yazarak lokal ortamda çalıştırabilirsiniz.