إنشاء قائمة منسدلة متتابعة في ASP.NET MVC

عند بناء تطبيقات الويب، من الضروري توفير تجربة مستخدم سلسة وتفاعلية. ومن الأنماط الشائعة لواجهة المستخدم هي القائمة المنسدلة المتتابعة—وهي قائمة منسدلة تقوم بتحديث خياراتها استنادًا إلى اختيار قائمة منسدلة أخرى. هذه الميزة مفيدة بشكل خاص عند التعامل مع مجموعات بيانات ذات صلة. في هذه التدوينة، سنستكشف كيفية تنفيذ قائمة منسدلة متتابعة باستخدام ASP.NET MVC و jQuery.

فهم المشكلة

قد تتساءل كيف يمكنك إنشاء قائمة منسدلة متتابعة بكفاءة في تطبيق ASP.NET MVC. غالبًا ما تطرح أسئلة مثل:

• هل يجب عليك إنشاء الحل الخاص بك باستخدام jQuery أم الاعتماد على مجموعة أدوات Microsoft AJAX؟
• هل من الأفضل لك إنشاء خدمة ويب أو استدعاء إجراء تحكم لإرجاع البيانات التابعة؟

تاريخياً، كان لدى المطورين مجموعة متنوعة من الأساليب لتنفيذ هذه الميزة. ومع ذلك، مع دمج jQuery الآن في ASP.NET MVC، فإن الطريقة المفضلة تميل نحو استخدام jQuery لتجربة أكثر سلاسة.

الحل خطوة بخطوة

لنقم بتقسيم العملية إلى أقسام واضحة وقابلة للإدارة لمساعدتك في تنفيذ قائمة منسدلة متتابعة في تطبيق ASP.NET MVC الخاص بك.

1. إعداد مشروعك

تأكد من أنك لديك مشروع ASP.NET MVC معد مع تضمين jQuery. يمكنك القيام بذلك بسهولة باستخدام قوالب Visual Studio الأحدث.

2. إنشاء النماذج الخاصة بك

سنحتاج إلى زوج من النماذج التي تمثل البيانات التي نعمل معها. على سبيل المثال، دعنا نفترض أننا نتعامل مع نماذج Country و City:

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; } // مفتاح خارجي لجدول الدول
}

3. إجراءات التحكم

بعد ذلك، تحتاج إلى إعداد وحدة التحكم الخاصة بك للتعامل مع الطلبات. قم بإنشاء إجراءات تقوم بإرجاع قائمة الدول والمدن بناءً على الدولة المحددة.

public class LocationController : Controller {
    public JsonResult GetCountries() {
        var countries = // احصل على الدول من قاعدة البيانات
        return Json(countries, JsonRequestBehavior.AllowGet);
    }
    
    public JsonResult GetCities(int countryId) {
        var cities = // احصل على المدن بناءً على countryId
        return Json(cities, JsonRequestBehavior.AllowGet);
    }
}

4. بناء العروض

في العرض الخاص بك، ستحتاج إلى إضافة قائمتين منسدلتين: واحدة للدول وأخرى للمدن. ابدأ بتحميل الدول عندما يتم عرض الصفحة:

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

5. تطبيق jQuery للسلوك الديناميكي

الآن، سنضيف كود jQuery لملء قائمة المدن بناءً على الدولة المحددة.

$(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(); // مسح الخيارات الموجودة
            $.each(data, function(index, item) {
                $('#cityDropdown').append($('<option>', { 
                    value: item.CityId,
                    text : item.CityName 
                }));
            });
        });
    });
});

الاستنتاج

باتباع هذه الخطوات، سيكون لديك قائمة منسدلة متتابعة تعمل بالكامل في تطبيق ASP.NET MVC الخاص بك. تعزز هذه الطريقة تجربة المستخدم من خلال تحديث خيارات القوائم المنسدلة التابعة ديناميكيًا استنادًا إلى اختيارات المستخدم، مما يلغي الحاجة إلى إعادة تحميل الصفحة.

للحصول على تفاصيل أكثر عمقًا، تأكد من مراجعة هذه التدوينة، التي تقدم سياقًا إضافيًا حول القيم المتتابعة مع النماذج باستخدام jQuery.

إن تنفيذ قائمة منسدلة متتابعة لا يجعل تطبيقك أكثر سهولة في الاستخدام فحسب، بل يظهر أيضًا قوة دمج jQuery مع ASP.NET MVC لتجربة تفاعلية غنية.