bilgiz.org

Mvc mvc ile oluşturulan bir projede Model, View, Controller olmak üzere 3 farklı katman vardır. Model

  • MVC versiyonları ve uyumlu Visual Studio versiyonları
  • MVC ile Proje Oluşturma ve Çalıştırma
  • Projeye yeni Controller, Model, View ekleme
  • Razor View Engine ile inline kodlama örneği
  • MVC ile Köprü (link) Oluşturma
  • Post ve IsPost Kullanımı
  • HtmlEncode, HtmlDecode ve HttplUtility
  • JavaScript Uyarı Kutusu / Yönlendirme
  • LAYOUT (Sayfa ŞAblonu) Kullanımı
  • Anasayfa RenderSection Kullanımı
  • Controllerden View’e veri aktarma



  • Tarih28.12.2017
    Büyüklüğü170.5 Kb.

    Indir 170.5 Kb.

    MVC


    MVC ile oluşturulan bir projede Model, View, Controller olmak üzere 3 farklı katman vardır.

    Model


    Projenin, nesnelerinin bulunduğu katmandır. Örneğin bir veri tabanındaki tabloları nesnelere aktardığımızda (Ogrenci, Ogretmen, Ders, DerseKayit, Sinav) bu nesneler için doğruluk, zorunluluk kontrolleri yapılıp, nesneler arasında bağlantılar kurulabilmektedir. Aynı zamanda Ogrenci nesnesi için OgrenciNo girilmesi zorunlu tutulabilir, Sinav nesnesindeki SinavNot alanının veri tipinin sayı olması zorunlu tutulabilir, DerseKayit nesnesindeki OgrenciID bilgisinden Ogrenci nesnesindeki OgrenciAd bilgisine ulaşılabilir.

    View


    Projenin, son kullanıcın (ziyaretçilerin) gördüğü ve kullandığı ara yüz katmanıdır. View içinde kodlama yapabilmek için Tarayıcı tarafında Html, Javascript, Css gibi teknolojiler, Sunucu tarafında ise Asp.Net gibi teknolojiler kullanılır.

    Controller


    Model ve View arasındaki iletişimi sağlayan katmandır. Örneğin projesini hazırlayıp yayınladığınız sayfanın adresi bir ziyaretçi tarafından tarayıcısına yazılıp çağrıldığında, sayfayı gösterme isteği ilk önce sunucudaki Controllere gider, controller gerekli method ve view leri çalıştırarak sayfayı gösterir. Controller sunucu tarafında asp.Net ile yazılabilir.

    WEB FORMS vs MVC


    • Viewstate kullanımı sayesinde Web Forms sayfada girilmiş değerleri kaybetmez ama bunun karşılığında performans kaybı olur.

    • TextBox, GridView, Button, ScriptManager gibi çok çeşitli sunucu taraflı kontroller sayesinde bir çok işlem, web formslar tarafından kolayca (daha az HTML kodu yazılır) gerçekleştirilebilir.

    • Web Formsdaki event (örneğin bir butona tıklama) tabanlı programlama ile programın ilerleyişi çok kolay sağlanmaktadır.

    • MVC de Viewstate kullanılmadığından performans daha iyidir. Ancak bunun karşılığında durum kontrol işlemleri, yazılımcı tarafından yapılmalıdır.

    • MVC de yazılan kodlar, kontrollerden bağımsız oldukları için tekrar tekrar kullanılabilirler. Web formslarda ise yazılan kodlar ilgili sayfaya ya da kontrole bağlı olmak zorundadır.

    • MVC de yazılan kodlar kolayca test edilebilirler dolayısı ile “Test Driven Development” a uygundurlar.

    • Proje üzerindeki 3 katman (Model, View, Controller) için aynı anda farklı 3 kişi çalışabileceği için projenin tamamlanma süresi daha kısa olabilir.

    • MVC de Tarayıcıdan sunucuya istek gönderilirken Javascript tabanlı teknolojiler kullanılabilmektedir.

    MVC versiyonları ve uyumlu Visual Studio versiyonları


    MVC 1.0 VS 2008

    MVC 2.0, MVC 3.0 VS 2010

    MVC 4.0 VS 2012

    MVC 5.0 VS 2013

    VS 2012 üzerinde MVC 5.0 kullanabilmek için, Asp.Net and Web Tools 2013.1 for Visual Studio 2013 eklentisi kurulmalıdır.

    MVC ile Proje Oluşturma ve Çalıştırma


    File  New  Project  Installed  Templates  Visual C#  Windows  Web

    sekmeleri seçilince sağ üst tarafta “ASP.NET Web Application” seçilir 

    Alt tarafta OK butonuna basılır. Yeni gelen pencerede “MVC” seçilir ve OK butonuna basılır.

    Proje dosyaları .NET tarafından yüklendikten sonra Solution Explorer da Views  Home  Index.cshtml ye çift tıklanır.

    Çalıştırılmak istenen dosyanın tab’ı seçili iken, Run (seçili tarayıcıda gösterir) edilir veya F5 tuşuna basılır.

    Projeye yeni Controller, Model, View ekleme


    Projeye yeni controller eklemek için, Solution Explorer içindeki  Controllers klasörüne sağ tıklanır  Add Controller… seçilir. Örneğimizde ilkController isimli bir controller ekledik.

    Projeye yeni model eklemek için, Solution Explorer içindeki  Models klasörüne sağ tıklanır  Add Class… seçilir. Örneğimizde ilkClass isimli bir model ekledik. Bu modelin içerisine aşağıdaki kod satırlarını ekledik.



    public class Ogrenci

    {

    public string OgrNo { get; set; }

    public string OgrAd { get; set; }

    public string OgrSoyad { get; set; }

    public string OgrDers { get; set; }

    public string Sinav { get; set; }

    public int Notu { get; set; }

    }

    Projeye yeni bir view eklemek için öncelikle, Action veya ViewResult türünden bir controller metodu eklenmiş olmalıdır. Bir metodun Action metodu olması için geri döndürdüğü veri tipinin ActionResult olarak belirtilmiş olması gereklidir.

    Örneğimizde ilkController’ e çift tıklıyoruz. Gelen kodlarda

    public class ilkController : Controller

    {

    // GET: ilk

    public ActionResult Index()

    {

    return View();

    }

    }

    public ActionResult Index() satırındaki ActionResult a sağ tıklayıp Add View… e tıklıyoruz. Hiçbir değişiklik yapmadan Add butonuna tıkladığımızda, Solution Explorer da, Views klasörünün altında, ilk klasörünün içinde, index.cshtml oluşacaktır.

    @{

    ViewBag.Title = "Index";

    }

    Index



    Bu index çalıştırıldığında http://localhost:18193/ilk/Index gibi bir adreste içerik gösterilecektir.

    Burada ilk, view in yer aldığı klasörün ismi, Index ise view in ismidir.



    Web Forms View Engine: <% … %>, /* … */

    Razor View Engine:@ … @, @* … *@, @{ … }

    Razor View Engine ile inline kodlama örneği


    Solution Explorer içindeki HomeControllers.cs isimli dosyaya çift tıklanır.

    Gelen kaynak kodlara yaz isimli aşağıdaki metodun kodları eklenir.



    public ActionResult Yaz()

    {

    ViewBag.Message = "Dizi elemanları yazılıyor";
    return View();

    }

    Yaz isimli metodun ActionResult veritipi üzerine sağ tıklanır  Add View  Add tıklanır ve Home klasörünün altında yaz.cshtml isimli dosya oluşturulmuş olur.

    Bu dosyada aşağıdaki kodlar yazılır;

    İsimler Yan Yana



    @{

    Layout = null;

    string[] adlar = new string[] { "Ali", "Veli", "Can", "Naz", "Kaya" };

    string bosluk = " ";

    foreach (string isim in adlar)

    {

    @isim@bosluk

    }




    foreach (string isim in adlar)

    {

    @isim@: @* @: de boşluk yazdırır *@

    }




    foreach (string isim in adlar)

    {

    @(isim+" ")

    }

    }




    İsimler Alt Alta



    @{

    foreach (string isim in adlar)

    {

    @isim<br />

    }
    }


    MVC ile Köprü (link) Oluşturma


    Bunun için Html.ActionLink metodu ve Url.Action metodu olmak üzere 2 yöntem vardır.

    Home klasörü içerisindeki index.cshtml dosyasına çift tıklanır. Görüne kaynak kodların tamamı silinip yerine aşağıdaki kodlar yapıştırılır.



    @{Layout=null;}

    Merhaba, ilk sayfaya gitmek için @Html.ActionLink("tıklayınız", "Yaz", "Home")...



    Html.ActionLink metodu 3 parametre alır. Bunlardan ilki üzerine tıklanacak yazı (örnekte “tıklayınız”), ikinci parametre linke tıklandığında hangi action metodunun (örnekte “Yaz”) çalıştırılacağı, üçüncü parametre ise ikinci parametredeki çalışacak aktionun tanımlandığı controllerin (örnekte “Home”) adıdır.

    Diğer bir yöntem olan Url.Action metodu ile aynı yönlendirme aşağıdaki kodlarla yapılabilir.



    @{Layout = null;}

    Merhaba, ilk sayfaya gitmek için <a href="@Url.Action("Yaz", "Home")">tıklayınıza>...

    @{Layout = null;}

    Merhaba, ilk sayfaya gitmek için <a href="@Url.Action("Yaz", "Home")"><img src="~/buton.jpg"/>a>...

    Post ve IsPost Kullanımı


    Bir butona tıklandığında sayfanın sunucu tarafından işlenip (örneğin veritabanından veriler çekilip view e aktarılır) aynı sayfanın tekrar yeni haliyle gösterilmesi işlemi Post işlemidir. IsPost ise sayfanın Post edilip edilmediği bilgisinin kontrol edilmesi için kullanılabilir.

    Views/Home/index.cshtml dosyasının içeriği aşağıdaki gibi yazılır ve çalıştırılırsa;



    @{Layout=null;

    string bilgilendir = "";

    if (IsPost)

    {

    bilgilendir = "Post işlemini yapıldı";

    }

    }





    @bilgilendir





    Yukarıdaki görüntüler elde edilir. Syafanın ilk görüntüsünde “Gönder” butonuna basılırsa,



    if (IsPost)

    {

    bilgilendir = "Post işlemini yapıldı";

    }
    Kod satırları sonucu “bilgilendir” isimli değişkenin değeri değişir. Sayfa tekrar yüklendiği için
    <input type="submit" value="Gönder" />

    @bilgilendir

    bu bloktan sonra “bilgilendir” isimli değişkenin yeni değeri olan “Post işlemini yapıldı” sayfaya aynen yazılır.


    HtmlEncode, HtmlDecode ve HttplUtility


    HtmlEncode ve HtmlDecode metodları, HttpUtility sınıfının üyeleridirler. HtmlEncode, parametresinde bulunan /, >, “, * gibi özel karakterleri (simgeler), HTML kodlarına dönüştürür. HtmlDecode, HtmlEncode ile şifrelenen metnin özel karakterlerini HTML simgelerine dönüştürür.

    Views/Home/index.cshtml dosyasının içeriği aşağıdaki gibi yazılır ve çalıştırılırsa;



    @{Layout=null;

    string metin = "BSM 3. Sınıf";

    string sifreli = HttpUtility.HtmlEncode(metin);

    string cozulu = HttpUtility.HtmlDecode(sifreli);

    @metin<br />

    @sifreli<br />

    @cozulu<br />

    }

    yukarıdaki görüntü elde edilir.


    String.Format kullanımı


    Tarih ve sayıların görünümlerinin düzenlenmesi için kullanılan bir metoddur.

    @{

    Layout = null;

    }

    Tarih Formatları



    @{

    DateTime tarih = new DateTime(2014, 01, 01, 10, 30, 45);

    @("dd : " + String.Format("{0:dd}", tarih))<br />

    @("ddd : " + String.Format("{0:ddd}", tarih))<br />

    @("dddd : " + String.Format("{0:dddd}", tarih))<br />

    @("MM : " + String.Format("{0:MM}", tarih))<br />

    @("MMM : " + String.Format("{0:MMM}", tarih))<br />

    @("MMMM : " + String.Format("{0:MMMM}", tarih))<br />

    @("yy : " + String.Format("{0:yy}", tarih))<br />

    @("yyyy : " + String.Format("{0:yyyy}", tarih))<br />

    @("hh : " + String.Format("{0:hh}", tarih))<br />

    @("HH : " + String.Format("{0:HH}", tarih))<br />

    @("mm : " + String.Format("{0:mm}", tarih))<br />

    @("ss : " + String.Format("{0:ss}", tarih))<br />

    @("t : " + String.Format("{0:t}", tarih))<br />

    @("d : " + String.Format("{0:d}", tarih))<br />

    @("T : " + String.Format("{0:T}", tarih))<br />

    @("D : " + String.Format("{0:D}", tarih))<br />

    @("f : " + String.Format("{0:f}", tarih))<br />

    @("F : " + String.Format("{0:F}", tarih))<br />

    @("g : " + String.Format("{0:g}", tarih))<br />

    @("G : " + String.Format("{0:G}", tarih))<br />

    @("m : " + String.Format("{0:m}", tarih))<br />

    @("y : " + String.Format("{0:y}", tarih))<br />

    @("r : " + String.Format("{0:r}", tarih))<br />

    @("s : " + String.Format("{0:s}", tarih))<br />

    @("u : " + String.Format("{0:u}", tarih))<br />

    }

    Sayı Formatları



    @("C : " + String.Format("{0:C}", 10.50))<br />

    @("D : " + String.Format("{0:D3}", 15))<br />

    @("D : " + String.Format("{0:D5}", 15))<br />

    @("E : " + String.Format("{0:E}", 15000))<br />

    @("F : " + String.Format("{0:F1}", 15.5))<br />

    @("F : " + String.Format("{0:F2}", 15.5))<br />

    @("F : " + String.Format("{0:F3}", 15.5))<br />

    @("N : " + String.Format("{0:N}", 1500000))<br />

    @("X : " + String.Format("{0:X}", 450))<br />

    @("0 : " + String.Format("{0:000000.00}", 15.5))<br />

    @("# : " + String.Format("{0:###.##}", 15.551))<br />

    }


    Html.Raw Kullanımı


    Değişkenlerin değerlerinde bulunan html kodlarının da yorumlanmasını sağlar.

    @{Layout = null;}

    @{

    string ad = "Alp Naz";

    Alp Naz


    @ad

    }



    @{Layout = null;}

    @{

    string ad = "Alp Naz";

    Alp Naz


    @Html.Raw(ad)

    }


    JavaScript Uyarı Kutusu / Yönlendirme


    @{Layout = null;}

    @{

    string bilgi = "";

    if (IsPost)

    {

    bilgi = "";

    }

    }





    @Html.Raw(bilgi)

    form>





    Herhangi bir controller dan view a geçmek için, controller içindeki metodun isminin üzerinde sağ tıklayıp (örneğin Yaz metodu) Go To View… seçilir. Eğer o metodun view ı yok ise Add View… seçilerek o metoda bir view oluşturulabilir.

    Herhangi bir view den, o view ın controller ına ulaşmak için, o view üzerinde herhangi bir yerde sağ tıklanır Go To Controller… seçilir.

    LAYOUT (Sayfa ŞAblonu) Kullanımı


    Kapsamlı bir site doğal olarak çok fazla sayfadan oluşacaktır. Ancak bazı durumlarda sayfaların bazı kısımları (örneğin menüler, reklamlar vb.) aynı olabilir. Böyle durumlarda aynı kodların farklı farklı sayfalarda tekrar tekrar yazılması, bu ortak özelliklerin değiştirilmesi sırasında aynı işlemlerin defalarca yapılması vb. gereksiz işlemlerden sakınmak için, klasik html’deki framset, web formslardaki master pageler benzeri bir yapı MVC’ de Layout olarak karşımıza çıkmaktadır.

    Layout oluşturmak için şu adımları izleyiniz;

    Solution Explorer içerisindeki, Views/Shared klasörü üzerinde sağ tıklayınız, Add View… seçiniz, son olarak Add butonuna tıklayınız.

    Aşağıdaki gibi kod satırları oluşacaktır.


    @{

    ViewBag.Title = "_sablon";

    }

    _sablon

    Bu kodlara her sayfamızda görünmesini istediğimiz menüler eklenebilir. Örneğin bu menü Anasayfa, Sınavlar, İletişim olmak üzere 3 farklı sayfadan oluşsun. Bu şablon sayfayı referans alan tüm sayfalarda görünecek olan bu linkleri layouta ekleyelim ve şablonu _sablon.cshtml ismiyle kayıt edilebilir.





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

    @Html.ActionLink("Sınavlar", "Sinavlar", "Home") |

    @Html.ActionLink("İletişim", "Iletisim", "Home")



    <div>@RenderBody()div>

    HomeController’de Anasayfa isimli bir metod oluşturup, bu metod ile çağrılacak Anasayfa isimli view’ i, Use a layout page bölümünde ~/Views/Shared/_sablon.cshtml adresini yazarak oluşturalım. Oluşturulan bu sablondeneme.cshtml isimli view’ in kodu ve çalıştırıldığında oluşan sayfa görüntüsü aşağıdaki gibi olacaktır.


    @{

    ViewBag.Title = "Anasayfa";

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

    }

    Anasayfa



    Benzer şekilde _sablon.cshtml layoutunu kullanarak, Sinavlar ve Iletisim isimli viewler de oluşturulabilir.



    @{

    ViewBag.Title = "Sinavlar";

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

    }

    Sinavlar





    @{

    ViewBag.Title = "Iletisim";

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

    }

    Iletisim





    using System;

    using System.Collections.Generic;

    using System.Linq;

    using System.Web;

    using System.Web.Mvc;

    namespace WebApplication4.Controllers

    {

    public class HomeController : Controller

    {

    public ActionResult Anasayfa()

    {

    ViewBag.Message = "Veri İşlemleri";
    return View();

    }

    public ActionResult Sinavlar()

    {

    ViewBag.Message = "Veri İşlemleri";
    return View();

    }

    public ActionResult Iletisim()

    {

    ViewBag.Message = "Veri İşlemleri";
    return View();

    }

    }

    }

    İç içe Layout Kullanımı


    Bazen kedisi de bir layoutu referans alan başka bir layouta ihtiyaç duyulabilir. Örneğin bir sayfanın üst tarafındaki linkler sabit, ortasında değişen içerik, alt tarafta yine sabit olan bilgiler olabilir. Böyle bir durumda öncelikle, sayfaların ortak olan üst tarafı bir layout olarak bir yukarıdaki örnekteki gibi oluşturulur. Daha sonra bu layotu referans alan ikinci bir layout oluşturulur ki bu layout da kendisini referans alacak, içeriği sayfaya göre değiştirilebilecek başka bir @RenderBody() içerir. Bu @RenderBody() den sonra ise sabit olan alt bölümün kodları yazlılır.



    @{

    ViewBag.Title = "_altsablon";

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

    }

    _altsablon

    Bu _altsablon.cshtml layoutunun içeriği aşağıdaki kodlar ile değiştirilebilir.



    @{

    ViewBag.Title = "_altsablon";

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

    }




    @RenderBody()




    Daha önce oluşturulmuş olan Anasayfa, Sinavlar ve Iletisim viewleri HomeControllerdeki ilgili Actionlarından  Add View… seçeneği ile _altsablon.cshtml layoutundan tekrar oluşturulurlar (eski hallerinin üzerine yazılırlar – replace) ise sayfalar yeni görünümlerine dönüştürülmüş olurlar.



    @{

    ViewBag.Title = "Anasayfa";

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

    }

    Anasayfa




    RenderSection Kullanımı


    Layoutlar da birden fazla alanın değiştirilebilmesi için kullanılabilirler. Views/Shared klasörü üzerinde sağ tıklanır  Add  View ekranında view ismi olarak _cokluSablon girilip Add butonuna basılırsa _cokluSablon isinli layout oluşturulabilir.



    @{

    ViewBag.Title = "_cokluSablon";

    }

    _cokluSablon

    Kodları yukarıdaki gibi oluşan _cokluSablon isimli layoutun kodları aşağıdaki gibi değiştirilip kayıt edilir ise RenderSection türünden bir layout oluşturulmuş olur.



    <div>

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

    @Html.ActionLink("Sınavlar", "Sinavlar", "Home") |

    @Html.ActionLink("İletişim", "Iletisim", "Home")



    <div style="width:400px;height:100px;background-color:yellow;color:navy;">@RenderSection("DegiskenBolum01")div>

    Sabit Bölüm...


    <div style="width:600px;height:100px;background-color:navy;color:yellow;">@RenderSection("DegiskenBolum02")div>

    Sabit Bölüm...


    SAÜ BSM Proje

    HomeControllerde oluşturulan BirGun isimli action ile oluşturulan Birgun isimli viewin kodları aşağıdaki şekilde değiştirilir ve çalıştırılır ise kodlardan sonra sayfa görüntüsü elde edilmiş olur.



    @{

    ViewBag.Title = "BirGun";

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

    }

    @section DegiskenBolum01{

    Bir Gün Herkes...

    }

    @section DegiskenBolum02{

    Bir Gün Herkes...

    }


    Partial View Kullanımı


    Parçalı view’ler, bir defa tanımlandıktan sonra projenin her yerinden çağrılabilen yapılardır.

    View/Shared klasörü üzerinde sağ tıklanır  Add  View… e tıklanır, bu ekranda view ismi olarak _parcali yazılır ve en lat tarafta View Options bölümündeki Create as a partial view in solundaki checkbox seçilir  Add e tıklanırsa _parcali isimli Partial View oluşturulmuş olur.



    Merhaba!...

    Kodları yukarıdaki şekilde yazılmış _parcali isimli Partial view, herhangi bir view’den aşağıdaki gibi çağrılabilir. Örneğimizde Birgun isimli view’ımıza eklendi;



    @{

    ViewBag.Title = "BirGun";

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

    }

    @section DegiskenBolum01{

    @Html.Partial("_parcali")

    Bir Gün Herkes...

    }

    @section DegiskenBolum02{

    @Html.Partial("_parcali")

    Bir Gün Herkes...

    }


    ViewStart Kullanımı


    Tüm view’lerin kullanacağı ortak bir layout var ise, bu layout Views klasörü altındaki ViewStart.cshtml içerisinde tanımlanabilir. Bunun için yapılması gereken bu dosyadaki aşağıdaki kodlardan
    @{

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

    }

    Layout = "~/Views/Shared/_Layout.cshtml"; kod satırındaki _Layout.cshtml yerine kendi oluşturduğumuz layout dosyasının tam adını (yolu değişik ise dosya yolu da yazılmalıdır) yazmaktır.

    Controllerden View’e veri aktarma


    public ActionResult AdGonder()

    {

    ViewBag.Message = "Ad Gönder";

    ViewData["ad"] = "Kaan";

    return View();

    }

    ViewData ile Controllerden View’ e veri gönderilebilir. Bunun için controller’de view’e gidecek olan metodun return View(); satırının hemen üstünde ViewData kullanılabilir. ViewData ile gönderilen veri View’de aşağıdaki kodda görüldüğü gibi @ViewData ile görüntülenebilir.



    @{Layout=null;}

    @Html.Partial("_parcali")

    @ViewData["ad"]

    Benzer şekilde ViewBag ile de controllerden view’e veri gönderilebilir.



    public ActionResult AdGonder()

    {

    ViewBag.Message = "Ad Gönder";

    ViewBag.ad = "Kaan";

    return View();

    }

    @{Layout=null;}

    @Html.Partial("_parcali")

    @ViewBag.ad







        Ana sayfa


    Mvc mvc ile oluşturulan bir projede Model, View, Controller olmak üzere 3 farklı katman vardır. Model

    Indir 170.5 Kb.