Comment afficher dynamiquement les données associées à partir de plusieurs tables dans JqGrid à l'aide d'ASP.NET MVC ?

Remplir dynamiquement JqGrid avec des données associées à partir de plusieurs tables ASP.NET MVC

Ce guide présente une méthode pour afficher les données de deux tables de base de données liées dans un JqGrid dans une application ASP.NET MVC. Les tables sont liées, mais seules les valeurs d'ID sont disponibles pour la relation.

Aperçu de la solution :

Cette approche implique de modifier le contrôleur pour renvoyer les données nécessaires au format JSON, de créer une fonction d'assistance pour formater les données de localisation pour JqGrid, de définir dynamiquement les options de colonne à l'aide de l'événement beforeProcessing de JqGrid et d'améliorer l'expérience utilisateur avec Bootstrap Select2 pour recherche et filtrage.

1. Modification du contrôleur :

L'action du contrôleur doit récupérer les données des deux tables (par exemple, Students et Locations) et inclure les données de localisation dans la réponse JSON.

2. Formatage des données côté serveur :

Une fonction d'assistance est cruciale pour transformer les données de localisation dans un format compatible avec editoptions.value et searchoptions.value de JqGrid. Cela implique généralement de classer les emplacements et de les concaténer sous la forme "ID:Value;".

3. Configuration dynamique des colonnes JqGrid :

Utilisez l'événement beforeProcessing dans votre code JavaScript côté client pour définir dynamiquement les options de colonne JqGrid en fonction de la réponse du serveur. Cela permet des ajustements d'exécution des formateurs de colonnes, des types de modification et d'autres paramètres.

4. Recherche/filtrage améliorés avec Bootstrap Select2 :

Intégrez Bootstrap Select2 pour améliorer la fonctionnalité de recherche et de filtrage dans les listes déroulantes, offrant des capacités de recherche avancées et une meilleure interface utilisateur par rapport aux éléments de sélection standard.

Exemple de code de contrôleur :

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

Cet exemple démontre une structure simplifiée. Adaptez les classes Student et City et la récupération de données pour qu'elles correspondent à votre schéma de base de données spécifique et à vos méthodes d'accès aux données. N'oubliez pas d'ajuster la configuration JqGrid côté client en conséquence pour gérer le colModelOptions fourni dynamiquement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!