02.03. ASP.NET Core MVC: View

Bu bölümde controller ile view bölümünü bağlamayı, view bölümde HTML yanıtları oluşturma işlemini hakkında bilgi vereceğiz. view bölümü incelemeden eğer bakmadıysanız önce ilk bölümde anlatılan Razor Pages konusuna bakmanızı öneririm.

Öncelikle controller bölümüne bakalım. Controller klasöründeki HomeController.cs dosyasını inceleyelim.

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using MVC2.Models;

namespace MVC2.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public IActionResult Privacy()
        {
            return View();
        }
    }
}

using System;

using System.Collections.Generic;

using System.Diagnostics;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNetCore.Mvc;

using MVC2.Models;

namespace MVC2.Controllers

{

public class HomeController : Controller

{

public IActionResult Index()

{

return View();

}

public IActionResult Privacy()

{

return View();

}

Index ve Privacy metodları View() metodunu IActionResult döndürüyor. Bunun anlamı Views klasöründeki .cshtml uzantılı dosyanın kullanıldığı anlamına gelir. Burada HomeController Views klasöründeki Home klasörünü gösterir. Index ve Privacy metodları ise sırayla Index.cshtml ve Privacy.cshtml view dosyalarını işaret eder. Şimdi sırayla bu dosyaları açalım.

Index.cshtml

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

ViewData["Title"] = "Home Page";

}

<h1 class="display-4">Welcome</h1>

<p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>

</div>

Privacy.cshtml

@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>

<p>Use this page to detail your site's privacy policy.</p>

ViewData["Title"] = "Privacy Policy";

}

<h1>@ViewData["Title"]</h1>

<p>Use this page to detail your site's privacy policy.</p>

Razor etiketlerinin nasıl kullanıldığını görüyoruz. Aslında controller view isteğinde bulunduğunda HTML çıktı view tarafında hazırlanır ve hazırlanan view’i controller kullanıcıya gönderir. Bu sayfaları:

https://localhost:5001/Home/Index
https://localhost:5001/Home/Privacy

şeklinde erişebilirsiniz. Tarayıcı üzerinden oluşan kaynak kodları da incelemenizi öneririm. Burada ilk göze çarpan kısım bir menünün olduğudur. Bunun nereden geldiğini Razor Pages bölümünü iyi okuyan öğrenciler tahmin etmiştir. Ayrıntılı bilgi isteyenler bu bölümü inceleyebilir. Burada kısaca bir bilgi vereceğim.

Layout olarak Shared klasöründeki _Layout.cshtml dosyası kullanıldı. Index.cshtml ve Privacy.cshtml, _Layout.cshtml içindeki @RenderBody() bölümüne gönderildi. Layout olarak _Layout.cshtml kullanılmasının sebebi _ViewStart.cshtml dosyasındaki yazan koddur.

@{
    Layout = "_Layout";
}

Layout = "_Layout";

}

Sayfaya özel bir layout’unuz var ise o sayfa içinden istediğiniz Layout’u hazırlayabilirsiniz. Bir anlamda _ViewStart.cshtml içinde geçerli Layout değeri bulunmaktadır. Şimdi, bir önceki bölümdeki gibi URL üzerinden controller’a gelen değerleri View kısmına taşıyalım. Önce controller’ı yazalım. HomeController.cs bölümüne aşağıdaki kodu ekleyelim.

…
        public IActionResult ParametreliSayfa(string par1, int kackere = 5)
        {
            ViewData["metin"] = "Merhaba " + par1;
            ViewData["kackere"] = kackere;

            return View();
        }
…

…

public IActionResult ParametreliSayfa(string par1, int kackere = 5)

{

ViewData["metin"] = "Merhaba " + par1;

ViewData["kackere"] = kackere;

return View();

}

…

Şimdi, Views klasöründe bulunan Home klasörüne ParametreliSayfa.cshtml dosyasını yaratalı ve aşağıdaki kodu ekleyelim.

@{
    Layout = "";
}

@{
    ViewData["Title"] = "Parametreli örnek"; //Bu _Layout gider, ancak bu sayfa için ben Layout boş geçtim.
}

<h2>Parametreli örnek</h2>

<ul>
    @for (int i = 0; i < (int)ViewData["kackere"]; i++)
    {
        <li>@ViewData["metin"]</li>
    }
</ul>

Layout = "";

}

ViewData["Title"] = "Parametreli örnek"; //Bu _Layout gider, ancak bu sayfa için ben Layout boş geçtim.

}

<h2>Parametreli örnek</h2>

<ul>

@for (int i = 0; i < (int)ViewData["kackere"]; i++)

{

<li>@ViewData["metin"]</li>

}

</ul>

Layout=”” satırı ile Layoutsız bir görünüm oluşturuldu. Her ne kadar ViewData[“Title”] set edilmiş olsa da daha önce Layout içinde kullandığı için gösteriliyordu, ancak bu örnekte bir anlamı yoktur. Controller içinde ViewData içinde taşınan değerler aynen kullanılmıştır. Razor’da bir döngü üretilmiş ve istenildiği kadar li etiketi oluşturulmuştur. ViewData dictionary nesnedir. Dictionary bir yapı deyince key ve value ilişkisi olduğu aklımıza gelir. ViewData[“…”] içine atanan değer key, = ile atanan değer ise value’dır. Key bölümünü benzersiz olması gerektiğini unutmayın. Controller ve View arasında veri taşımak için sıklıkla ViewData kullanılır. Ayrıca ViewBag ve TempData kullanılabilir. Bunlar hakkında daha fazla bilgi için tıklayın.