ASP.NET Core Checkbox ve RadioButton Kullanımı Örnekleri

Silverhand · 12 Tem 2026

ASP.NET Core Checkbox ve RadioButton Kullanımı Örnekleri

Checkbox ve RadioButton web formlarında sürekli kullandığımız elemanlar. Checkbox tekli veya çoklu seçim için, RadioButton ise bir grup içinden sadece bir seçenek belirlemek için kullanılır. Basit gibi görünür ama ASP.NET Core'da bunları doğru kullanmak sanıldığı kadar straightforward değil. Özellikle checkbox'larda model binding konusu insanları çok şaşırtıyor. Ben ilk başladığımda checkbox'un false değer göndermemesi sorunu ile bayağı uğraşmıştım. Neyse ki ASP.NET Core'un Tag Helper'ları bu sorunu çözüyor ama arkasındaki mekanizmayı bilmenizde fayda var. Gelin detaylıca bakalım.

Checkbox'un Arka Plan Mekanizması

HTML'de checkbox'ların ilginç bir davranışı vardır. Checkbox işaretliyse form submit edildiğinde değeri gönderilir. Ama işaretli değilse hiçbir şey gönderilmez, yani sunucu tarafında o alanın değeri null gelir, false değil. Bu web'in başından beri olan bir durum. ASP.NET Core bu sorunu şöyle çözer: asp-for Tag Helper'ı kullandığınızda checkbox input'unun yanına gizli bir input daha ekler. Bu gizli input'un değeri false'tur. Böylece checkbox işaretli değilse bile false değeri sunucuya ulaşır.

Bunu neden anlatıyorum? Çünkü bu mekanizmayı bilmezseniz debugging yaparken çok şaşırırsınız. Form'un HTML çıktısına bakarsınız, bir checkbox için iki input görürsünüz ve "bu nedir?" dersiniz. Normal, framework'ün yaptığı standart bir şey.

RadioButton'lar için böyle bir sorun yok çünkü bir radio group'ta her zaman bir değer seçilidir (eğer başlangıçta bir değer seçtiyseniz). Ama hiçbir RadioButton seçilmezse yine null gelir. Bu yüzden required validation önemli.

Boolean property'ler için checkbox kullanımı basit. Ama ya bir listeden çoklu seçim yapılacaksa? Mesela "Hangi teknolojileri biliyorsunuz?" sorusu için bir checkbox listesi göstermek istiyorsanız, işler biraz daha karmaşıklaşıyor. Bunun için genelde bir ViewModel hazırlamak en temiz çözüm.

Basit Checkbox Kullanımı (Boolean)

C#:

public class AyarlarModel
{
    [Display(Name = "Email bildirimleri almak istiyorum")]
    public bool EmailBildirim { get; set; }

    [Display(Name = "SMS bildirimleri almak istiyorum")]
    public bool SmsBildirim { get; set; }

    [Display(Name = "Kullanım koşullarını kabul ediyorum")]
    [Range(typeof(bool), "true", "true", ErrorMessage = "Kullanım koşullarını kabul etmelisiniz.")]
    public bool KullanimKosullari { get; set; }

    [Display(Name = "Beni hatırla")]
    public bool BeniHatirla { get; set; }
}

Burada KullanimKosullari property'sine dikkat edin. Boolean bir alanı "zorunlu işaretli olması gereken" bir checkbox yapmak için Range attribute'unu bu şekilde kullanıyoruz. Required attribute boolean için çalışmaz çünkü false da bir değerdir ve Required sadece null'u reddeder. Bu çok yaygın bir soru ve yanıtı budur.

Çoklu Seçim için Checkbox Listesi

C#:

public class CheckboxItemModel
{
    public int Id { get; set; }
    public string Text { get; set; }
    public bool IsSelected { get; set; }
}

public class AnketFormModel
{
    [Display(Name = "Adınız")]
    [Required(ErrorMessage = "Ad zorunludur.")]
    public string Ad { get; set; }

    [Display(Name = "Bildiğiniz Programlama Dilleri")]
    public List<CheckboxItemModel> ProgramlamaDilleri { get; set; } = new();

    [Display(Name = "Deneyim Seviyeniz")]
    [Required(ErrorMessage = "Deneyim seviyesi seçmelisiniz.")]
    public string DeneyimSeviyesi { get; set; }
}

C#:

public class AnketController : Controller
{
    [HttpGet]
    public IActionResult Index()
    {
        var model = new AnketFormModel
        {
            ProgramlamaDilleri = new List<CheckboxItemModel>
            {
                new() { Id = 1, Text = "C#", IsSelected = false },
                new() { Id = 2, Text = "JavaScript", IsSelected = false },
                new() { Id = 3, Text = "Python", IsSelected = false },
                new() { Id = 4, Text = "Java", IsSelected = false },
                new() { Id = 5, Text = "Go", IsSelected = false },
                new() { Id = 6, Text = "TypeScript", IsSelected = false },
                new() { Id = 7, Text = "Rust", IsSelected = false },
                new() { Id = 8, Text = "PHP", IsSelected = false }
            }
        };

        return View(model);
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public IActionResult Index(AnketFormModel model)
    {
        var seciliDiller = model.ProgramlamaDilleri
            .Where(d => d.IsSelected)
            .Select(d => d.Text)
            .ToList();

        if (!seciliDiller.Any())
        {
            ModelState.AddModelError("", "En az bir programlama dili seçmelisiniz.");
        }

        if (!ModelState.IsValid)
            return View(model);

        // Seçimleri kaydet
        TempData["Sonuc"] = $"Seçtiğiniz diller: {string.Join(", ", seciliDiller)}";
        return RedirectToAction("Sonuc");
    }
}

Controller'da çoklu checkbox'lar için nasıl model oluşturduğumuza dikkat edin. Her checkbox item'ın Id, Text ve IsSelected property'si var. POST'ta IsSelected true olanlar seçilmiş demektir. Manual ModelState hatası ekleyerek minimum seçim zorunluluğu da koyabildik.

View Tarafı - Checkbox ve RadioButton

HTML:

@model AnketFormModel

<form asp-action="Index" method="post">
    <div asp-validation-summary="All" class="text-danger mb-3"></div>

    <div class="mb-3">
        <label asp-for="Ad" class="form-label"></label>
        <input asp-for="Ad" class="form-control" />
        <span asp-validation-for="Ad" class="text-danger"></span>
    </div>

    <!-- Checkbox Listesi -->
    <div class="mb-3">
        <label class="form-label fw-bold">Bildiğiniz Programlama Dilleri</label>
        @for (int i = 0; i < Model.ProgramlamaDilleri.Count; i++)
        {
            <div class="form-check">
                <input type="hidden" asp-for="ProgramlamaDilleri[i].Id" />
                <input type="hidden" asp-for="ProgramlamaDilleri[i].Text" />
                <input asp-for="ProgramlamaDilleri[i].IsSelected" class="form-check-input" type="checkbox" />
                <label class="form-check-label">@Model.ProgramlamaDilleri[i].Text</label>
            </div>
        }
    </div>

    <!-- RadioButton Grubu -->
    <div class="mb-3">
        <label class="form-label fw-bold">Deneyim Seviyeniz</label>
        <div class="form-check">
            <input asp-for="DeneyimSeviyesi" class="form-check-input" type="radio" value="Junior" id="seviyeJunior" />
            <label class="form-check-label" for="seviyeJunior">Junior (0-2 yıl)</label>
        </div>
        <div class="form-check">
            <input asp-for="DeneyimSeviyesi" class="form-check-input" type="radio" value="Mid" id="seviyeMid" />
            <label class="form-check-label" for="seviyeMid">Mid-Level (2-5 yıl)</label>
        </div>
        <div class="form-check">
            <input asp-for="DeneyimSeviyesi" class="form-check-input" type="radio" value="Senior" id="seviyeSenior" />
            <label class="form-check-label" for="seviyeSenior">Senior (5+ yıl)</label>
        </div>
        <span asp-validation-for="DeneyimSeviyesi" class="text-danger"></span>
    </div>

    <button type="submit" class="btn btn-primary">Gönder</button>
</form>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}

Checkbox listesinde for döngüsü ile index bazlı binding yapıyoruz. Bu çok önemli, foreach kullanamazsınız çünkü model binding index'lere ihtiyaç duyar. Hidden input'larla Id ve Text değerlerini de gönderiyoruz ki POST'ta bu bilgiler kaybolmasın. RadioButton'larda ise aynı asp-for ile farklı value'lar veriyoruz, bu sayede hepsi aynı gruba ait oluyor.

Pratik İpuçları

Checkbox listelerinde "Tümünü Seç / Kaldır" butonu eklemek iyi bir UX pratiği. JavaScript ile tüm checkbox'ların checked property'sini toggle edebilirsiniz. RadioButton'larda seçimi temizlemek istiyorsanız bir "Seçim yok" opsiyonu eklemek en temiz yol.

Çoğu kişinin yaptığı hata, checkbox listesinde foreach kullanmak. Bu çalışmaz çünkü model binding index bazlıdır. for döngüsü kullanmalısınız ve input name'lerin sonu [0], [1], [2] şeklinde olmalı. Bu kural ASP.NET Core'a özgü değil, genel bir model binding kuralıdır.

Bir de style konusunda, Bootstrap'ın form-check class'ını kullanmanızı öneririm. Hem checkbox hem RadioButton için düzgün bir görünüm sağlar. Custom checkbox/switch istiyorsanız Bootstrap'ın form-switch class'ı var, modern ve şık görünüyor. Production'da ben genelde switch kullanıyorum çünkü mobilde kullanıcılar daha kolay tıklayabiliyor.

Best Studio · 12 Tem 2026

Emeğiniz ve katkınız için teşekkür ederiz!
Konunuz gerekli incelemelerden geçerek onaylandı. Topluluğumuza katkılarınızın devamını bekliyoruz.
İyi forumlar!

ASP.NET Core Checkbox ve RadioButton Kullanımı Örnekleri

Silverhand