Temel Özellikler

MVC Nedir?

MVC, Mpdel - View - Controller olarak neredeyse tüm web tabanlı projelerde karşımıza çıkmaktadır. En basit hali ile MVC'yi tanımlamak gerekirse; Model veri tabanımız ile bağlantı kurduğumuz yapı, View, sitemizi ziyaret eden kullanıcıların gördüğü ekran, Controller ise Model ile View arasında bağlantı kuran, web sayfalarımıza veri tabanımızdan içerik çekmemizi sağlayan bir yapılardır.

MVC web projelerinde Model, View ve Controller olarak 3 adet klasör oluşturulur. Model klasöründe veri tabanı ile ilgili işlemler tutulur. Database First yada Code First farketmeksizin yapılar burada tutulup çağırılabilir. Dosyalar class (.cs) yapısında oluşturulur. Controller klasöründe View sayfalarında görünecek verilerin gönderilmesi işlemi yapılır. Genellikle her ana View sayfasına bir Controller sayfası bulundurulur. Örneğin Home sayfası için HomeController adında bir Controller class ı oluşturulur. Burada Home sayfasında görünecek sayfaların methodları tutulur. Örneğin Index, Contact, About ... gibi. Bu methodlar bir View sayfası çağıracağı için IActionResult tipinde olamalıdır. View klasöründe ise sayfalarımız tutulur ve bunlar html yapısındadır (.cshtml). Ekranda görünmesini istediğimiz verileri burada çağırır ve web arayüzümüzü burada oluştururuz.

Bir Controller sayfasından gelen isteğe göre View sayfalarına yönlendirme 2 şekilde yapılabilir.

    public IActionResult About()
    {
        return View();
    }
    
    // Burada About.cshtml sayfasını arar ve getirir.

    public IActionResult Contact()
    {
        return View("Iletisim");
    }
    
    // Burada Iletisim.cshtml sayfasını arar ve getirir.

View Sayfalarına Veri Aktarım Çeşitleri

1. ViewBag

// HomeController.cs (Contoller Sayfası)

        public IActionResult Index()
        {
            int saat = DateTime.Now.Hour;
            string mesaj = "Merhaba";
            ViewBag.Selam = mesaj;
            ViewBag.Ad = "Ahmet";
            return View();
        }
        
// Index.cshtml (Home / Index Sayfası)

        @ViewBag.Selam @ViewBag.Ad
        
        // Çıktısı -> Merhaba Ahmet

2. Model

 // Product.cs (Product Model Sayfası)
   
    public class Product
    {
        public string Name { get; set; }
        public double Price { get; set; }
        public string Description { get; set; }
        public bool IsApproved { get; set; }
    }
/*
Burada bir ürüne ait olacak şekilde basit bir alan tanımladık ve
bu alanlar ürün adı, fiyatı ve açıklaması olarak propertylerini 
tanımladık
*/

 
    
// ProductController.cs (Product Controller Sayfası)
 
     public IActionResult Details(int id)
     {
        var p = new Product();
        p.Name="Nokia 3310";
        p.Price=500;
        p.Description="Telefonların Babası";
        return View(p);
    }
    
/*
Burada Product modelinden gelen alanları kullanarak bir değer tanımladık
ve 1 adet ürünümüz oldu. 
*/


// Details.cshtml (Product / Details Sayfası)

    <h1>Ürün Özellikleri</h1> <br>
    <p>Ürün Adı: @Model.Name</p>
    <p>Ürün Fiyatı: @Model.Price</p>
    <p>Ürün Açıklaması: @Model.Description</p>
    
/*
Burada Model tag ını kullanarak Controllerdan gelen değerleri View de
gösterdik.
*/

3. ViewData

// Product.cs (Controller) 
        
        public IActionResult Index()
        {
           var s = new Product{Name="Samsung",Price=10000,Description="Galaxy A10"};
           ViewData["Category"] = "Telefonlar";
           ViewData["Product"] = s;
         return View();
        }
        
// Index.cshtml (Product / Index Sayfası)
        
        <h1>@ViewData["Category"]</h1>
        
        <h4>@(((Product)ViewData["Product"]).Name)</h4>
        <h4>@(((Product)ViewData["Product"]).Description)</h4>
        <h4>@(((Product)ViewData["Product"]).Price)</h4>
        
        /*
        Çıktısı
                Telefonlar
                Samsung
                Galaxy A10
                10000
        */

Model yollarını her sayfaya yazıp tanıtmaktansa modellerin bulunduğu Models klasörünü _ViewImports.cshtml de tanımlayıp tüm sayfalarda kolaylıkla çağırabiliriz.

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using shopapp.webui.Models

Bir sayfayı tamamen parçalayabiliriz. Örneğin header, footer, navbar, sidebar gibi parçalayabiliriz. Bu sayfaları Shared klasöründe başında "_" işareti olacak şekilde bir sayfa oluştururuz. Örneğin _navbar.cshtml gibi. Daha sonra bu parçaladığımız yapıları ana layout ta birleştirmek için iki farklı yol kullanabiliriz.

    @await Html.PartialAsync("_navbar")
    <partial name="_header">

Layout Sayfası İçin Section ve Render Kullanımı

Her sayfada görünecek olan tasarımlar Shared klasöründeki _Layout.cshtml sayfasına yazılır. Örneğin üst menü, sol menü, footer gibi. _ViewStart.cshtml sayfasında ise bu Layout u tüm sayfaların kullanacağını belirtmemiz gerekir.

@{
    Layout="_Layout";
}

1. Render (RenderBody)

_Layout.cshtml sayfasına yazılan @RenderBody() kodu ile bu sayfayı kullanan tüm View sayfalarının içeriklerinin buraya gelmesini sağlarız. Bu sayede tek bir sayfa yapısı oluşturup, View sayfalarında sadece o sayfa ile ilgili içerikleri oluşturabiliriz.

2. Section

Bazı sayfalarda görünecek ancak bazı sayfalarda görünmeyecek bir yapımız olduğunda section lar kullanılır. Section kullanımı için _Layout.cshtml sayfasında bir @RenderSection() oluşturmalıyız. Bu section a bir isim vererek @RenderSection("Sectionadi") gibi istenilen sayfanın bu section u kullanmasını sağlayabiliriz. Bir sayfada bu section u kullanmak için ise ilgili sayfaya

@section Sectionadi{
        Görünecek section içeriği 
}

yazılmalıdır.

2MB

temelozellikler.zip

archive

Open