Wie zeige ich verknüpfte Daten aus mehreren Tabellen in JqGrid mithilfe von ASP.NET MVC dynamisch an?

JqGrid dynamisch mit zugehörigen Daten aus mehreren ASP.NET MVC-Tabellen füllen

Diese Anleitung demonstriert eine Methode zum Anzeigen von Daten aus zwei verwandten Datenbanktabellen in einem JqGrid in einer ASP.NET MVC-Anwendung. Die Tabellen sind verknüpft, für die Beziehung sind jedoch nur ID-Werte verfügbar.

Lösungsübersicht:

Dieser Ansatz umfasst das Ändern des Controllers, um die erforderlichen Daten in einem JSON-Format zurückzugeben, das Erstellen einer Hilfsfunktion zum Formatieren von Standortdaten für JqGrid, das dynamische Festlegen von Spaltenoptionen mithilfe des beforeProcessing-Ereignisses von JqGrid und das Verbessern der Benutzererfahrung mit Bootstrap Select2 für Suchen und Filtern.

1. Controller-Modifikation:

Die Controller-Aktion muss Daten aus beiden Tabellen (z. B. Students und Locations) abrufen und die Standortdaten in die JSON-Antwort einschließen.

2. Serverseitige Datenformatierung:

Eine Hilfsfunktion ist entscheidend für die Umwandlung der Standortdaten in ein Format, das mit editoptions.value und searchoptions.value von JqGrid kompatibel ist. Dies beinhaltet normalerweise die Reihenfolge der Standorte und deren Verkettung als „ID:Wert;“.

3. Dynamische JqGrid-Spaltenkonfiguration:

Verwenden Sie das beforeProcessing-Ereignis in Ihrem clientseitigen JavaScript-Code, um JqGrid-Spaltenoptionen basierend auf der Antwort des Servers dynamisch festzulegen. Dies ermöglicht Laufzeitanpassungen von Spaltenformatierern, Bearbeitungstypen und anderen Einstellungen.

4. Verbesserte Suche/Filterung mit Bootstrap Select2:

Integrieren Sie Bootstrap Select2, um die Such- und Filterfunktionalität in Dropdowns zu verbessern und erweiterte Suchfunktionen und eine bessere Benutzeroberfläche im Vergleich zu Standard-Auswahlelementen bereitzustellen.

Beispiel-Controller-Code:

<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>

Dieses Beispiel zeigt eine vereinfachte Struktur. Passen Sie die Klassen Student und City sowie den Datenabruf an Ihr spezifisches Datenbankschema und Ihre Datenzugriffsmethoden an. Denken Sie daran, die clientseitige JqGrid-Konfiguration entsprechend anzupassen, um das dynamisch bereitgestellte colModelOptions.

zu verarbeiten

Das obige ist der detaillierte Inhalt vonWie zeige ich verknüpfte Daten aus mehreren Tabellen in JqGrid mithilfe von ASP.NET MVC dynamisch an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!