การสร้าง Cascading Dropdown ใน ASP.NET MVC

เมื่อสร้างแอปพลิเคชันเว็บ การให้ประสบการณ์ผู้ใช้ที่ราบรื่นและมีปฏิสัมพันธ์เป็นสิ่งสำคัญ รูปแบบส่วนติดต่อผู้ใช้ทั่วไปหนึ่งคือ Cascading Dropdown—เมนูดรอปดาวน์ที่ปรับปรุงตัวเลือกตามการเลือกของดรอปดาวน์อีกอัน คุณสมบัตินี้มีประโยชน์โดยเฉพาะเมื่อจัดการกับชุดข้อมูลที่เกี่ยวข้อง ในบล็อกโพสต์นี้ เราจะสำรวจวิธีการใช้งาน Cascading Dropdown โดยใช้ ASP.NET MVC และ jQuery

การเข้าใจปัญหา

คุณอาจสงสัยว่าจะสร้าง Cascading Dropdown ในแอปพลิเคชัน ASP.NET MVC ได้อย่างมีประสิทธิภาพอย่างไร คำถามมักเกิดขึ้น เช่น:

• ควรสร้างโซลูชันของคุณด้วย jQuery หรือพึ่งพา Microsoft AJAX toolkit?
• คุณควรสร้างบริการเว็บหรือเรียกการดำเนินการของคอนโทรลเลอร์เพื่อคืนค่าข้อมูลที่เกี่ยวข้องหรือไม่?

ในอดีต นักพัฒนามีวิธีการที่หลากหลายในการใช้งานฟีเจอร์นี้ อย่างไรก็ตาม การที่ jQuery ได้ถูกบูรณาการเข้ากับ ASP.NET MVC ทำให้วิธีการที่ชื่นชอบไปในทิศทางการใช้ jQuery เพื่อประสบการณ์ที่เรียบง่ายขึ้น

วิธีการที่เป็นขั้นตอน

มาลดขั้นตอนนี้ให้เป็นส่วนที่ชัดเจนและจัดการได้ง่ายเพื่อแนะนำคุณในการใช้งาน Cascading Dropdown ในแอปพลิเคชัน 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; } // Foreign key to the Country
}

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 
                }));
            });
        });
    });
});

สรุป

โดยการทำตามขั้นตอนเหล่านี้ คุณจะมี Cascading Dropdown ที่ทำงานได้อย่างสมบูรณ์ในแอป ASP.NET MVC ของคุณ วิธีการนี้ช่วยเพิ่มประสบการณ์ผู้ใช้โดยการปรับปรุงตัวเลือกดรอปดาวน์ที่เกี่ยวข้องตามการเลือกของผู้ใช้ โดยไม่ต้องโหลดหน้าใหม่

สำหรับรายละเอียดทรัพยากรที่ลึกซึ้งยิ่งขึ้น อย่าลืมตรวจสอบ บล็อกโพสต์นี้ ซึ่งนำเสนอบริบทเพิ่มเติมเกี่ยวกับค่า cascading ด้วยฟอร์มโดยใช้ jQuery

การใช้งาน Cascading Dropdown ไม่เพียงแต่ทำให้แอปพลิเคชันของคุณมีความเป็นมิตรต่อผู้ใช้มากขึ้น แต่ยังแสดงให้เห็นถึงพลังของการรวม jQuery กับ ASP.NET MVC เพื่อการทำงานร่วมกันที่สมบูรณ์แบบ