Comment remplir correctement les listes déroulantes jqGrid à l'aide de jQuery $.post et ASP.NET MVC ?

Utiliser jQuery $.post et ASP.NET MVC pour remplir correctement les listes déroulantes jqGrid

Cet article aborde un problème courant lors du remplissage dynamique des listes déroulantes jqGrid à l'aide de la méthode $.post de jQuery et d'ASP.NET MVC : recevoir une valeur « non définie » en raison d'un formatage de données incorrect.

Le problème : Un format de données incorrect est envoyé au jqGrid, ce qui entraîne des valeurs déroulantes « non définies ». Le jqGrid attend un format spécifique (par exemple, value: "FE:FedEx; IN:InTime; TN:TNT"), mais la requête peut renvoyer des données dans un format différent.

La demande et la réponse originales : L'approche originale utilisait probablement $.post pour récupérer les données JSON. Cependant, la structure JSON ne correspondait pas aux attentes de jqGrid. La solution impliquait de supprimer les guillemets supplémentaires lors de la création de valeur et de modifier la réponse du contrôleur en ContentResult(sb.ToString()). C'est une méthode moins robuste.

Une solution plus robuste : tirer parti de dataUrl et buildSelect

Une approche supérieure utilise les fonctionnalités dataUrl et buildSelect de jqGrid pour un code plus propre et plus maintenable.

dataUrl : Cette propriété spécifie une URL qui renvoie les données dans un format plus simple, adapté à l'analyse. Le format n'a pas besoin d'être pré-formaté comme une chaîne de paires clé-valeur.

buildSelect : Cette fonction de rappel traite la réponse du serveur (idéalement JSON) et construit le code HTML déroulant correct. Cela sépare la récupération des données du formatage des données, améliorant ainsi l'organisation et la lisibilité du code.

Exemple de mise en œuvre :

Contrôleur (ASP.NET MVC) :

<code class="language-csharp">public JsonResult GetDestinationList() {
    List<string> allDestinations = GetAllDestinations();
    return Json(allDestinations, JsonRequestBehavior.AllowGet);
}</code>

Configuration jqGrid (JavaScript) :

<code class="language-javascript">{
    name: 'destinations',
    editable: true,
    edittype: 'select',
    editoptions: {
        dataUrl: '/YourController/GetDestinationList', // Replace with your controller action
        buildSelect: function(data) {
            var s = '';
            if (data.length) {
                for (var i = 0; i < data.length; i++) {
                    var ri = data[i]; // Assuming data is an array of strings
                    s += '<option value="' + ri + '">' + ri + '</option>';
                }
            }
            return s;
        }
    }
}</code>

Cette approche révisée fournit une solution plus efficace et plus maintenable pour remplir les listes déroulantes jqGrid. Le serveur renvoie des données simples et la fonction côté client buildSelect gère le formatage, ce qui permet une meilleure séparation des préoccupations. N'oubliez pas de remplacer /YourController/GetDestinationList par l'URL réelle de l'action de votre contrôleur.

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!