Core Mvc uygulamalarında projeleri gruplandırarak basitleştirme işlemleri için Area yapısını kullanabilirsiniz. Her bir sayfa linki için sayfaya özel Route ayarı yapabilirsiniz. Bu uygulamada girilen bir saati görüntüleyen programı Area ve Route tanımlayarak yapacağız.

1. Area Oluşturma

İlk olarak Areas/Saatler adında bir Area oluşturuyoruz. Bu Area içinde aşağıdaki klasörler bulunmalı:

Areas
├── Saatler
│   ├── Controllers
│   ├── Models
│   ├── Views

Bu dizin yapısı, MVC yapısını koruyarak projemizin modüler olmasını sağlar.

2. Area Kaydı ve Ayarları

Area’ların çalışabilmesi için Program.cs dosyasında endpoint ayarlarını yapmamız gerekiyor:

Program.cs içinde Area desteği ekleyin.

app.MapControllerRoute(
    name: "areas",
    pattern: "{area:exists}/{controller=Saat}/{action=Index}/{id?}"
    );

Bu yapı, URL'nin "area/controller/action" şeklinde çalışmasını sağlar. Örneğin:

https://localhost:5001/Saatler/Saatler/Ekle

3. Model Oluşturma

Model, kullanıcıdan gelen saat bilgisini doğrulamak için kullanılır. Saat boş geçilemez ve sadece belirtilen olmalıdır.

Areas/Saatler/Models/SaatModel.cs

using System.ComponentModel.DataAnnotations;

namespace SaatUygulamasi.Areas.Saatler.Models
{
    public class SaatModel
    {
        [Required(ErrorMessage = "Saat seçmek zorunludur.")]
        [DataType(DataType.Time)]
        public TimeSpan? Saat { get; set; }
    }
}

Açıklamalar:

[Required] → Kullanıcının boş giriş yapmasını engeller.

[DataType(DataType.Date)] → Saat formatında giriş yapılmasını zorunlu kılar.

4. Controller Tanımlama

Kullanıcıdan gelen saat bilgisini alıp listeye ekleyen ve görüntüleyen bir controller oluşturacağız.

Areas/Saatler/Controllers/SaatController.cs

using Microsoft.AspNetCore.Mvc;
using SaatUygulamasi.Areas.Saatler.Models;
using System.Collections.Generic;

namespace SaatUygulamasi.Areas.Saatler.Controllers
{
    [Area("Saatler")]
    [Route("Saatler/[controller]/[action]")]
    public class SaatController : Controller
    {
        private static List<SaatModel> SaatListesi = new List<SaatModel>();

        [HttpGet]
        public IActionResult Index()
        {
            return View(SaatListesi);
        }

        [HttpPost]
        public IActionResult Ekle(SaatModel model)
        {
            if (ModelState.IsValid)
            {
                SaatListesi.Add(model);
            }
            return RedirectToAction("Index");
        }
    }
}

[Area("Saatler")] → Controller'in Saatler alanına ait olduğunu belirtir.

[Route("Saatler/[controller]/[action]")] → Route tanımını dinamik hale getirir.

static List<SaatModel> SaatListesi → Girilen saatler saklamak için kullanılır.

Index() → Listeyi görüntüler.

Ekle(SaatModel model) → Kullanıcıdan gelen saati listeye ekler.

Kullanıcı girilen saatleri görebilecek ve yeni saat ekleyebilecek.

Areas/Saatler/Views/Saat/Index.cshtml

@model List<SaatUygulamasi.Areas.Saatler.Models.SaatModel>
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<h1>Girilen Saatler</h1>

<ul>
    @foreach (var saat in Model)
    {
        <li>@saat.Saat?.ToString(@"hh\:mm")</li>
    }
</ul>

<form method="post" action="/Tarihler/Saat/Ekle">
    <label for="saat">Saat Seç:</label>
    <input type="time" id="saat" name="Saat" required />

    <button type="submit">Ekle</button>
</form>

@if (!ViewData.ModelState.IsValid)
{
    <ul>
        @foreach (var error in ViewData.ModelState["Saat"].Errors)
        {
            <li style="color: red;">@error.ErrorMessage</li>
        }
    </ul>
}

Açıklamalar

Saat girişini type="time" ile alıyoruz.

Girilen saat bilgileri liste halinde gösteriliyor.

Hatalı giriş yapıldığında hata mesajları görüntüleniyor.

Uygulamayı başlatın ve tarayıcıda şu URL'yi ziyaret edin:

https://localhost:5001/Saatler/Saat/Index

Bir saat girin ve ekleyin. Listeye eklendiğini göreceksiniz.

Hatalı girişleri test edin:

Boş geçmeyin! "Saat zorunludur." hatası alırsınız.