انتخاب دسته بندی دوم بر اساس فیلتر دسته بندی اول

پاسخ هوش مصنوعی

برای این کار شما نیاز دارید تا از Ajax استفاده کنید که بعد از انتخاب استان، اطلاعات شهرهای مربوط به آن استان را بارگذاری کنید. در اینجا مراحلی که باید انجام دهید را توضیح می دهم:

1. ابتدا جدول های استان و شهر در دیتابیس خود را طراحی کنید. برای مثال:

CREATE TABLE Provinces (
    Id INT PRIMARY KEY,
    Name NVARCHAR(100)
);

CREATE TABLE Cities (
    Id INT PRIMARY KEY,
    Name NVARCHAR(100),
    ProvinceId INT,
    FOREIGN KEY (ProvinceId) REFERENCES Provinces(Id)
);

2. سپس مدل های مناسب در پروژه ASP.NET Core خود ایجاد کنید:

public class Province
{
    public int Id { get; set; }
    public string Name { get; set; }
    public virtual ICollection<City> Cities { get; set; }
}

public class City
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int ProvinceId { get; set; }
    public virtual Province Province { get; set; }
}

3. سپس در Controller خود یک اکشن برای دریافت شهرها بر اساس استان ایجاد کنید:

public async Task<IActionResult> GetCitiesByProvince(int provinceId)
{
    var cities = await _context.Cities
        .Where(c => c.ProvinceId == provinceId)
        .ToListAsync();
    return Json(cities);
}

4. حالا نیاز دارید که در View خود یک Dropdown برای استان و Dropdown دیگری برای شهر اضافه کنید و از JavaScript یا jQuery برای بارگذاری شهرها استفاده کنید:

<select id="provinceSelect">
    <option value="1">استان 1</option>
    <option value="2">استان 2</option>
</select>

<select id="citySelect">
    <option value="0">لطفا استان را انتخاب کنید</option>
</select>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#provinceSelect').change(function() {
            var provinceId = $(this).val();
            $.ajax({
                url: '/Controller/GetCitiesByProvince',
                type: 'GET',
                data: { provinceId: provinceId },
                success: function(cities) {
                    $('#citySelect').empty();
                    $('#citySelect').append('<option value="0">لطفا شهر را انتخاب کنید</option>');
                    $.each(cities, function(i, city) {
                        $('#citySelect').append('<option value="' + city.id + '">' + city.name + '</option>');
                    });
                }
            });
        });
    });
</script>

با این مراحل، شما می توانید با انتخاب استان، شهرهای مربوط به آن استان را در Dropdown مربوط به شهر بارگذاری کنید.

برای این کار آموزش زیر رو پیشنهاد میکنم بهتون

ایجاد DropDownList های مرتبط با جی کوئری (استان – شهر)

ضمنا این کار توسط جی کوئری انجام میشه و ارتباطی با اینکه پروژه شما با Core هست یا Php یا ... نداره.

خودم تونستم راه حل این قضیه رو پیدا کنم برای اینکه شاید دوستانی باشن مثل من که با مشکل برخورد کنن راه حل رو اینجا رو میزارم 

کدهای سمت html:

                                    <div class="row">
                                        <div class="col-6">
                                            <label asp-for="provinceId">استان *</label>
                                            <select class="list-dt col-12" id="provinceId" name="provinceId">
                                                <option disabled selected>انتخاب کنید</option>
                                                @foreach (Province province in ViewBag.province)
                                                {
                                                    <option value="@province.ProvinceId">@province.Province1</option>
                                                }
                                            </select>
                                        </div>
                                        <div class="col-6">
                                            <label asp-for="cityId">شهر *</label>
                                            <select class="list-dt col-12" id="cityId" name="cityId">
                                                <option disabled selected>انتخاب کنید</option>
                                            </select>
                                        </div>
                                    </div>

کدهای js:

 $('#birthCertificateProvinceId, #provinceId').change(function (e) {
        var provinceId,
            targetId = e.target.id;
        if (targetId === 'birthCertificateProvinceId') {
            provinceId = $('#birthCertificateProvinceId').find(":selected").val();
        } else if (targetId === 'provinceId') {
            provinceId = $('#provinceId').find(":selected").val();
        }

        $.post('/People/Cities', { provinceId: provinceId },
            function (response) {
                if (response) {
                    var input;

                    if (targetId === 'birthCertificateProvinceId') {
                        input = $('#birthCertificateCityId');
                    } else if (targetId === 'provinceId') {
                        input = $('#cityId');
                    }

                    input.empty();
                    $.each(response, function (i, v) {
                        addToCity(input, v);
                    });
                }
            }
        );
    });

    function addToCity(input, item) {
        $('<option value="' + item.id + '">' + item.name + '</option>').appendTo(input)
    }