نمایش یک لیست از اطلاعات در فرم Modal در Asp.net core

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

برای نمایش لیست شهرها و بخش های یک استان خاص در یک مدال در ASP.NET Core، ابتدا باید اطمینان حاصل کنید که کد کویری شما به درستی نوشته شده است و شرط مناسب برای دریافت داده ها اعمال شده است. در زیر مثالی از نحوه پیاده سازی این مورد آورده شده است:

فرض کنید شما یک مدل برای شهرها و استان ها دارید:

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

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

و یک اکشن کنترلر که لیست شهرها را بر اساس استان انتخاب شده برمی گرداند:

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

    return PartialView("_CitiesModal", cities);
}

این اکشن باید در مورد یک درخواست AJAX فراخوانی شود تا داده ها را بدون نیاز به بارگذاری مجدد صفحه دریافت کنید. در مثال زیر از jQuery برای مدیریت کلیک بر روی استان و نمایش مدال استفاده شده است:

$(document).on('click', '.province-button', function() {
    var provinceId = $(this).data('id');
    $.ajax({
        url: '/YourController/GetCitiesByProvince',
        type: 'GET',
        data: { provinceId: provinceId },
        success: function (result) {
            $('#citiesModal .modal-body').html(result);
            $('#citiesModal').modal('show');
        }
    });
});

مدال HTML شما به شکل زیر خواهد بود:

<div class="modal fade" id="citiesModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">شهرها</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- محتوای مدال به صورت دینامیک بارگذاری می شود -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">بستن</button>
            </div>
        </div>
    </div>
</div>

شما همچنین نیاز به یک ویو پارتیا برای نمایش لیست شهرها دارید، که می تواند به شکل زیر باشد:

<table class="table">
    <thead>
        <tr>
            <th>نام شهر</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var city in Model)
        {
            <tr>
                <td>@city.Name</td>
            </tr>
        }
    </tbody>
</table>

با استفاده از این کدها، شما می توانید لیست شهرها و بخش های مربوط به هر استان را با استفاده از یک مدال به نمایش بگذارید. توجه داشته باشید که مقادیر provinceId باید به درستی از دکمه مربوط به استان دریافت شود.