Bagaimana untuk Memaparkan Data Berkaitan Secara Dinamik daripada Pelbagai Jadual dalam JqGrid menggunakan ASP.NET MVC?

Mengisi JqGrid Secara Dinamik dengan Data Berkaitan daripada Berbilang Jadual MVC ASP.NET

Panduan ini menunjukkan kaedah untuk memaparkan data daripada dua jadual pangkalan data berkaitan dalam JqGrid dalam aplikasi ASP.NET MVC. Jadual dipautkan, tetapi hanya nilai ID yang tersedia untuk perhubungan.

Gambaran Keseluruhan Penyelesaian:

Pendekatan ini melibatkan pengubahsuaian pengawal untuk mengembalikan data yang diperlukan dalam format JSON, mencipta fungsi pembantu untuk memformat data lokasi untuk JqGrid, menetapkan pilihan lajur secara dinamik menggunakan acara beforeProcessing JqGrid dan meningkatkan pengalaman pengguna dengan Bootstrap Select2 untuk cari dan penapisan.

1. Pengubahsuaian Pengawal:

Tindakan pengawal perlu mendapatkan semula data daripada kedua-dua jadual (cth., Students dan Locations) dan memasukkan data lokasi dalam respons JSON.

2. Pemformatan Data Sebelah Pelayan:

Fungsi pembantu adalah penting untuk mengubah data lokasi menjadi format yang serasi dengan editoptions.value dan searchoptions.value JqGrid. Ini biasanya melibatkan pesanan lokasi dan menggabungkannya sebagai "ID:Nilai;".

3. Konfigurasi Lajur JqGrid Dinamik:

Gunakan acara beforeProcessing dalam kod JavaScript sisi pelanggan anda untuk menetapkan pilihan lajur JqGrid secara dinamik berdasarkan respons pelayan. Ini membenarkan pelarasan masa jalan bagi pemformat lajur, jenis edit dan tetapan lain.

4. Carian/Penapisan Dipertingkatkan dengan Bootstrap Select2:

Sepadukan Bootstrap Select2 untuk meningkatkan fungsi carian dan penapis dalam menu lungsur, menyediakan keupayaan carian lanjutan dan antara muka pengguna yang lebih baik berbanding elemen pilihan standard.

Contoh Kod Pengawal:

<code class="language-csharp">public class HomeController : Controller
{
    // ... other controller actions ...

    public JsonResult Students()
    {
        var students = new List<Student> { /* ... your student data ... */ };
        var locations = new List<City> { /* ... your city data ... */ };

        var formattedLocations = locations.OrderBy(l => l.CNAME)
                                         .Aggregate("", (current, location) => current + $"{location.CID}:{location.CNAME};");

        // Remove trailing semicolon
        if (formattedLocations.EndsWith(";"))
        {
            formattedLocations = formattedLocations.Substring(0, formattedLocations.Length - 1);
        }

        return Json(new
        {
            colModelOptions = new
            {
                CITY = new
                {
                    formatter = "select",
                    edittype = "select",
                    editoptions = new { value = formattedLocations },
                    stype = "select",
                    searchoptions = new { sopt = new[] { "eq", "ne" }, value = $":Any;{formattedLocations}" }
                }
            },
            rows = students
        }, JsonRequestBehavior.AllowGet);
    }
}</code>

Contoh ini menunjukkan struktur yang dipermudahkan. Sesuaikan kelas Student dan City serta pengambilan data agar sepadan dengan skema pangkalan data khusus anda dan kaedah akses data. Ingat untuk melaraskan konfigurasi JqGrid sisi klien dengan sewajarnya untuk mengendalikan colModelOptions yang disediakan secara dinamik.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Data Berkaitan Secara Dinamik daripada Pelbagai Jadual dalam JqGrid menggunakan ASP.NET MVC?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!