ASP.NET MVC’de Aşamalı Açılır Menü Oluşturma

Web uygulamaları geliştirirken, akıcı ve etkileşimli bir kullanıcı deneyimi sağlamak esastır. Yaygın bir kullanıcı arayüzü deseni, Aşamalı Açılır Menü’dür; bu menü, başka bir açılır menüdeki seçime bağlı olarak seçeneklerini günceller. Bu özellik, ilişkili veri kümeleri ile çalışırken özellikle faydalıdır. Bu blog yazısında, ASP.NET MVC ve jQuery kullanarak Aşamalı Açılır Menü’nün nasıl uygulanacağını keşfedeceğiz.

Problemi Anlamak

ASP.NET MVC uygulamanızda Aşamalı Açılır Menü’yü verimli bir şekilde nasıl oluşturacağınızı merak edebilirsiniz. Sıklıkla şu sorular gündeme gelir:

• Çözümünüzü jQuery ile mi oluşturmalısınız yoksa Microsoft AJAX araç takvimden mi yararlanmalısınız?
• Bağımlı verileri döndüren bir web servisi oluşturmak mı yoksa bir kontrolcü eylemini çağırmak mı daha iyi olacak?

Tarihsel olarak, geliştiricilerin bu özelliği uygulamak için çeşitli yaklaşımları olmuştur. Ancak, jQuery’nin artık ASP.NET MVC ile entegre olması nedeniyle, tercih edilen yöntem, daha akıcı bir deneyim için jQuery kullanmak yönündedir.

Adım Adım Çözüm

Aşamalı Açılır Menü’yü ASP.NET MVC uygulamanıza uygulamanıza rehberlik etmek için süreci net ve yönetilebilir bölümlere ayıralım.

1. Projenizi Ayarlayın

jQuery’yi dahil ederek bir ASP.NET MVC projesi oluşturduğunuzdan emin olun. Bunu en güncel Visual Studio şablonlarıyla kolayca yapabilirsiniz.

2. Modellerinizi Oluşturun

Üzerinde çalıştığımız verileri temsil edecek birkaç modele ihtiyacımız olacak. Örneğin, Ülke ve Şehir modelleri ile çalıştığımızı varsayalım:

public class Country {
    public int CountryId { get; set; }
    public string CountryName { get; set; }
}

public class City {
    public int CityId { get; set; }
    public string CityName { get; set; }
    public int CountryId { get; set; } // Ülkeye dış anahtar
}

3. Kontrolcü Eylemleri

Sonra, istekleri işlemek için kontrolcünüzü ayarlamanız gerekecek. Seçilen ülkeye göre ülkeler ve şehirler listesini döndüren eylemler oluşturun.

public class LocationController : Controller {
    public JsonResult GetCountries() {
        var countries = // Ülkelerinizi veritabanından alın
        return Json(countries, JsonRequestBehavior.AllowGet);
    }
    
    public JsonResult GetCities(int countryId) {
        var cities = // countryId'ye göre şehirlerinizi alın
        return Json(cities, JsonRequestBehavior.AllowGet);
    }
}

4. Görünümleri Oluşturma

Görünümünüze, biri ülke diğeri şehir olmak üzere iki açılır menü eklemeniz gerekecek. Görünüm işlendiğinde ülkeleri yüklemeye başlayın:

<select id="countryDropdown"></select>
<select id="cityDropdown"></select>

5. Dinamik Davranış İçin jQuery’yi Uygulama

Artık, seçilen ülkeye bağlı olarak şehir açılır menüsünü doldurmak için jQuery kodunu ekleyeceğiz.

$(document).ready(function() {
    $.getJSON('/Location/GetCountries', function(data) {
        $.each(data, function(index, item) {
            $('#countryDropdown').append($('<option>', { 
                value: item.CountryId,
                text : item.CountryName 
            }));
        });
    });

    $('#countryDropdown').change(function() {
        var countryId = $(this).val();
        $.getJSON('/Location/GetCities?countryId=' + countryId, function(data) {
            $('#cityDropdown').empty(); // Mevcut seçenekleri temizle
            $.each(data, function(index, item) {
                $('#cityDropdown').append($('<option>', { 
                    value: item.CityId,
                    text : item.CityName 
                }));
            });
        });
    });
});

Sonuç

Bu adımları takip ederek ASP.NET MVC uygulamanızda tamamen işlevsel bir Aşamalı Açılır Menü elde edeceksiniz. Bu yaklaşım, kullanıcı seçimlerine bağlı olarak bağımlı açılır menü seçeneklerini dinamik olarak güncelleyerek, sayfa yenileme ihtiyacını ortadan kaldırarak kullanıcı deneyimini artırır.

Daha derin kaynak detayları için bu blog yazısını kontrol etmeyi unutmayın; bu yazıda jQuery kullanarak formlar ile aşamalı değerler hakkında ek bağlam sunulmaktadır.

Aşamalı Açılır Menü uygulamak, yalnızca uygulamanızı daha kullanıcı dostu hale getirmekle kalmaz, aynı zamanda zengin etkileşim için jQuery ile ASP.NET MVC’yi birleştirmenin gücünü de gösterir.