Remplir les options de boîte de sélection sur un clic avec Javascript / Jquery avec des données Json

Voici le code javascript, je voudrais l'utiliser pour remplir la boîte de sélection.

$.getJSON("/Users/GetUsers", null, function(data) {
    $("#UsersList option").remove(); //Remove all <option> child tags.
    $.each(data.Users, function(index, item) { //Iterates through a collection
        $("#UsersList").append( //Append an object to the inside of the select box
            $("<option></option>") //Yes you can do this.
                .text(item.Description)
                .val(item.Id)
        );
    });
});

Je vous recommande de déclencher cette sur le chargement de la page et non pas lorsque l'utilisateur clique sur la zone de sélection. jQuery AJAX est asynchrone par défaut (comme il faut) donc il y aura un moment ou deux, où la zone de sélection est vide et cela peut considérablement perturber l'utilisateur.

Était-ce la mesure de votre question ou avez-vous besoin d'aide avec le MVC côté? Si vous êtes en utilisant ASP.Net MVC, il est en fait un résultat spécifique type de JsonResult qui rend la création de JSON contrôleur des méthodes un peu plus simple, car ils ne nécessitent pas de correspondant vues. Il vous permet également d'utiliser des données anonymes structures qui rend la méthode spécifique de projections un peu plus simple.

MODIFIER Ici est la méthode de base pour retourner une structure JSON jQuery code ci-dessus va comprendre. Notez que les propriétés u.Username et u.ID dépendent de vos Utilisateurs objet.

[HttpPost] 
public JsonResult GetUsers() { 
    return Json(new {
        Users = from u in _usersRepository.Get()
                select new { Description = u.Username, ID = u.ID }
    }); 
}

Je voudrais vous conseillons cependant de renoncer à cette approche, dès que possible, et aller avec une norme JSON structure du message. Celui que j'utilise est quelque chose comme ceci:

{
    Success: bool,
    LoggedIn: bool,
    ClientErrors: [
        { Number: int, Description: string, Parameter: string },
        { Number: int, Description: string, Parameter: string }...
    ],
    ServerErrors: [
        { Id: int, Message: string },
        { Id: int, Message: string }...
    ],
    Data: {}
}

Voici quelques raisons pour cela:

1. Ne vous méprenez pas, votre JSON méthode de la bibliothèque est un protocole de toutes sortes et en tant que tel, il bénéficie d'un en-tête standard.
2. Erreur de manipulation des avantages les plus de cette. Avoir une méthode cohérente pour permettre à l'utilisateur de savoir quelque chose s'est mal passé est d'une valeur inestimable en bas de la route.
3. La différenciation entre le client des erreurs (mauvais nom d'utilisateur, mot de passe incorrect, etc) et les erreurs de serveur (base de données hors ligne) est très important. L'un l'utilisateur peut la corriger, l'autre qu'ils ne le peuvent pas.
4. Erreurs Client doit retourner non seulement un message, mais le paramètre de la méthode qui en sont la cause (si elle s'applique), de sorte que vous pouvez facilement afficher ces messages d'erreur à côté des champs de saisie.
5. Erreurs Client doit également fournir un numéro unique (par méthode) qui identifie l'erreur. Cela permet la prise en charge multilingue.
6. Erreurs de serveur doit fournir l'Id de l'erreur qui a été enregistré. De cette façon, vous pouvez permettre à l'utilisateur de contacter le support et référence de l'erreur qu'ils sont en train de faire.
7. La loggedin booléen permet à n'importe quelle page qui utilise des méthodes qui nécessitent une authentification facilement rediriger l'utilisateur vers l'écran de connexion, si nécessaire, puisqu'une action de redirection résultat d'une méthode JSON n'aura aucun effet.
8. Enfin, le champ de Données est l'endroit où la méthode spécifique de données devraient être fournies.

En aucun cas devriez-vous envisager de ma structure comme la façon de le faire. Clairement les besoins de votre application peut être très différente de la mienne. De cohérence, plus que n'importe quel particulier de la structure est la leçon à tirer ici.

EDIT: 06/01/2016 - de Voir que les gens sont toujours à la recherche de cette réponse. Concernant le remplissage de la liste déroulante, je recommande d'utiliser un cadre contraignant. Personnellement, je préfère Knockout.JS pour savoir comment facile et léger, il est bien Angular.JS pour faire le travail aussi bien. Mis à part cela le reste de cette réponse est encore assez à jour.

EDIT: 8/10/2016 - Code manquait une virgule.