Logo

Asp.Net Mvc - Controller ve View İşlemleri 1 (Asp.Net Mvc Yazı Dizisi – 13)

Önceki Yazı : Asp.Net Mvc - Code First ile Veritabanı İşlemleri 2 (Asp.Net Mvc Yazı Dizisi – 12)

Merhaba Arkadaşlar,

Önceki derslerimizden hatırlayacağınız üzere, panel yönetimli bir blog uygulaması geliştiriyorduk. Blog projemizde Veri ve Data katmanını , Entity Framework Code First yaklaşımı ile modellemiştik. Ayrıca bu katmanda doğrulama (validation) kurallarını da tanımlamıştık.

Burada şuna değinmekte fayda var. Büyük ölçekli uygulamalarda, Data (Veritabanı) katmanı ile Model katmanını ayırma imkanına sahibiz. Bu konudan, ileri seviye derslerde bahsediyor olacağız. 

Bugünkü dersimizde ise, Controller ve View katmanına doğru bir geçiş yapacağız.

Şimdi öncelikle projemizin ön kısmında (panel kısmını ayrıca işleyeceğiz) nelere gereksinim var? Bir düşünelim.

  • Üye girişi sayfası
  • Yeni üyelik sayfası
  • Kullanıcının kendi bilgilerini değiştirebileceği sayfa
  • Son 5 makalenin ana sayfada listelenmesi
  • Tüm makalelerin listelendiği sayfa
  • Son 5 yorumun ana sayfada listelenmesi
  • Tüm yorumların listelendiği sayfa
  • En çok kullanılan 10 etiketin ana sayfada listelenmesi
  • Etikete tıklandığında, o etiketi barındıran makalelerin listelenmesi
  • Makale sayfalarında, yorumların görünmesi
  • Makale sayfalarında, etiketlerin görünmesi

İsteklerimize bir göz gezdirdikten sonra, bu gereksinimleri karşılayabilecek, sırayla Controller ve View katmanlarımızı yazmaya başlayalım.

Burada dikkat edilmesini istediğim bir husus var. Normalde büyük çaplı projelerde, View ve Controller katmanları ayrı yazılır. Yani, Controller kısmı tamamen hazırlandıktan sonra, View kısmına geçilir. Ancak biz konunun daha iyi anlaşılabilmesi için Controller ve View katmanlarını paralel işleyeceğiz.

Projemize devam edelim;

  • Önceki derslerde kullandığımız, IlkMvcProjesi projemizi açalım. (Elinizde yok ise şuradan indirebilirsiniz.)
  • Controllers klasörümüze sağ tıklayarak, Add>Controller diyelim. Aşağıdaki ekranla karşılacağız.

Controller ekleme ekranı

Bu ekranda Web Api'ler zaten konumuz dışında. Diğer 3 kısmı inceleyelim.

  • MVC 5 Controller - Empty : Bunu seçersek eğer, Controllerimiz boş olarak oluşturulur. İçini bizim doldurmamız gerekir.
  • MVC 5 Controller - with read/write actions : Bunu seçtiğimizde ise, ekleme, silme, gösterme işlemleri için gereken Action (ne anlama geldiğini az sonra inceleyeceğiz) 'lar otomatik oluşturulur.
  • MVC 5 Controller - with views, using Entity Framework : Bu ise, halihazırda var olan, veri katmanımızdaki verileri kullanarak, otomatik olarak Action'ları doldurur.​​​​
  • Biz Empty olanını seçip, Add diyoruz. 
  • Controller Name kısmına ise HomeController deyip, tekrar Add tuşuna tıklıyoruz.
  • Karşımıza aşağıdaki kodlar gelmiş bulunmaktadır.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcProjesi.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        public ActionResult Index()
        {
            return View();
        }
    }
}

Yukarıdaki kodlarda, public ActionResult Index() kısmı ilginizi çekmiş olmalı.

Bu metod aslında Action metodu oluyor. Bu metod ile gereken işlemlerimizi yapıp, geriye Index() (burası View adı oluyor, kullandığımız View'lerin isimlerine göre değişecek) View'imizi döndürüyoruz. Zaten metodun son satırı return View(); şeklinde, bahsi geçen View'i geriye döndürüyor.

Bu noktada, geri dönüş türü, görüldüğü gibi ActionResult. Biz buradan, farklı ActionResult türleri gönderebilme imkanına sahibiz. Şimdi ActionResult türlerini listeleyelim.

ActionResult Türleri

  • ContentResult : Metinsel içerik döndürür.
  • EmptyResult : Herhangi bir değer döndürmez.
  • FileResult : Binary formatında dosya içeriği döndürür.
  • HttpUnauthorizedResult : Yetkisiz HTTP isteği sonucu döndürür.
  • JavaScriptResult : JavaScript içeriği döndürür.
  • JsonResult : Json olarak formatlanmış içerik döndürür.
  • RedirectResult : Farklı bir Action'a yönlendirme yapar.
  • RedirectToRouteResult : Farklı bir Action'a, belirlenen Route kurallarına göre, yönlendirme yapar.
  • ViewResultBase : View içeriği döndürür.

Mvc projelerinde, varsayılan olarak HomeController'in Index View'i çağrıldığı için (varsayılanı ilerleyen derslerimizde değiştireceğiz) bizde, açılış sayfası olarak Index sayfasını hazırlayacağız.

Derslerimizde, css ve görselleştirme konularına çok fazla değinmeyeceğiz. Css konusunda bilgi sahibi olmanız, yapılan işlemleri anlamanızı kolaylaştıracaktır. Css ile alakalı, ilerleyen zamanlar da özel dersler yapabiliriz.

Layout Sayfası

Öncelikle menu vs. yerleşimleri ayarlayacağımız, Layout sayfasını hazırlayalım.

  • Views>Shared>_Layout.cshtml dosyamızı açalım. Dosyamızın içeriği aşağıdaki gibidir.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</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("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
               
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>
  • 20.satırımızın içeriği, sol üstteki logoyu temsil etmekte, içeriğini aşağıdaki gibi değiştirelim.
@Html.ActionLink("Mvc Projesi", "Index", "Home", null, new { @class = "navbar-brand" })

Burada logomuzun, metinsel içeriğini Mvc Projesi olarak değiştirmiş olduk.

  • 23. satırda başlayan kısım, bizim menümüzü temsil etmektedir. Bu kısmı, projemize göre yeniden düzenleyelim.
<ul class="nav navbar-nav">
    <li>@Html.ActionLink("Ana Sayfa", "Index", "Home")</li>
    <li>@Html.ActionLink("Tüm Makaleler", "TumMakaleler", "Home")</li>
    <li>@Html.ActionLink("Tüm Yorumlar", "TumYorumlar", "Home")</li>
    <li>@Html.ActionLink("Üye Girişi", "UyeGiris", "Home")</li>
    <li>@Html.ActionLink("Yeni Üyelik", "YeniUyelik", "Home")</li>
</ul>
  • Son olarak da, menümüzü düzenlemeden önce ki 36.satır, düzenledikten sonra ki 38. satır, sayfaların altında çıkan haklar kısmını temsil etmektedir. Bu kısmı da, aşağıdaki gibi düzenleyelim.
<p>&copy; @DateTime.Now.Year - Bizim Mvc Projemiz</p>
  • Tüm düzenlemelerimizi, yaptıktan sonra, Layout sayfamızın içeriği, aşağıdaki gibi oldu.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</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("Mvc Projesi", "Index", "Home", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Ana Sayfa", "Index", "Home")</li>
                    <li>@Html.ActionLink("Tüm Makaleler", "TumMakaleler", "Home")</li>
                    <li>@Html.ActionLink("Tüm Yorumlar", "TumYorumlar", "Home")</li>
                    <li>@Html.ActionLink("Üye Girişi", "UyeGiris", "Home")</li>
                    <li>@Html.ActionLink("Yeni Üyelik", "YeniUyelik", "Home")</li>
                </ul>

            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Bizim Mvc Projemiz</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Ana Sayfa

  • Şimdi yaptığımız değişikleri görmek için ana sayfamızı ekleyelim.
  • Controllers>HomeController.cs dosyamızı açalım.
  • public ActionResult Index() satırındaki Index'in üzerine sağ tıklayıp, Add View diyelim.

View ekleme

  • Aşağıdaki ekran karşımıza çıkacak. Dikkat edileceği üzere, View Name kısmına, otomatik olarak Index yazıldı. Hiç bir şeyi değiştirmeden Add diyelim. 

View ekleme detayları

Yukarıdaki resimde ki ayarları inceleyelim.

  • View Name : View'imizin adı. Aynı zamanda View dosyasının da adı.
  • Template : View'imize otomatik olarak, bir modelin (veri kaynağı da diyebiliriz) bağlanmasını sağlayabildiğimiz alandır. İleride kullanacağız. Empty seçili olduğunda, herhangi bir model bağlanmaz.
  • Create as a partial view : Bilgi için bakınız.
  • Use a layout page : Eklenen sayfada, herhangi bir Layout'un, aktif edilip edilmemesini sağlar. Detaylı bilgiler, şu dersimizde verilmiştir.
  • Index sayfamız Views>Home'nin içerisine eklendi.
  • Şimdi F5 tuşuna basıp projemizi çalıştıralım.

Ana sayfaLayout sayfamızda yaptığımız değişikler, yukarıda ortaya çıkmış bulunmaktadır.

Bir yazımızın daha sonuna geldik. Sonraki dersimizde, ana sayfamızın içerisini dolduruyor olacağız.

Projeyi buradan indirebilirsiniz.

Hepinize kolaylıklar diliyorum.