JQuery UI Autocomplete avec .Net MVC: Comment afficher l'étiquette lorsqu'elle est sélectionnée, mais enregistrer la valeur
J'ai mis en œuvre la saisie semi-automatique et j'ai de la difficulté avec l'étiquette de la contre valeur dans la zone de texte après l'élément est sélectionné. Lorsque je tape un code postal, je vois l'étiquette dans la liste déroulante:
mais quand je sélectionne, au lieu de l'étiquette indiquant dans la zone de texte, la valeur (qui est l'ID qui doit être enregistré dans la base de données) s'affiche:
Comment dois-je quand même lui montrer l'étiquette après il est sélectionné, mais lorsque le formulaire est enregistré, il passe le ZipCodeID pour le domaine?
Voici ma méthode de Contrôleur:
public JsonResult FindZipCode(string term)
{
VetClinicDataContext db = new VetClinicDataContext();
var zipCodes = from c in db.ZipCodes
where c.ZipCodeNum.ToString().StartsWith(term)
select new { value = c.ZipCodeID, label = c.ZipCodeNum};
return this.Json(zipCodes, JsonRequestBehavior.AllowGet);
}
Et voici mon balisage:
<script type="text/javascript">
$(document).ready(function() {
$("#ZipCodeID").autocomplete({
source: '<%= Url.Action("FindZipCode", "Customers") %>',
});
});
</script>
<div class="ui-widget"><input type="text" name="ZipCodeID" id="ZipCodeID" /></div>
EDIT: Voici mon code qui fonctionne:
Contrôleur:
public JsonResult FindZipCode(string term)
{
VetClinicDataContext db = new VetClinicDataContext();
var zipCodes = from c in db.ZipCodes
where c.ZipCodeNum.ToString().StartsWith(term)
select new { value = c.ZipCodeID, label = c.ZipCodeNum};
return this.Json(zipCodes, JsonRequestBehavior.AllowGet);
}
et de balisage:
<script type="text/javascript">
$(document).ready(function() {
$("#ddZipCode").autocomplete({
source: '<%= Url.Action("FindZipCode", "Customers") %>',
select: function(event, ui) {
var zipCodeID = parseInt(ui.item.value, 1);
$("#ddZipCode").val(ui.item.label);
$("#ZipCodeID").val(ui.item.value);
return false;
}
});
});
</script>
<div class="ui-widget"><input type="text" name="ddZipCode" id="ddZipCode" /></div>
<%= Html.Hidden("ZipCodeID")%>
bon point! quand j'ai construit à l'origine la base de données, j'ai été tout à fait nouveau. J'ai mis mon zip codes pour avoir une auto incrémenté ID pas vraiment penser que les codes postaux sont uniques en eux-mêmes. Je pouvais revenir en arrière et changer maintenant, mais les effets seraient tricke dans de nombreux autres changements ailleurs. Je devrais probablement faire de toute façon... 🙂 Merci!
Pas de problèmes. C'est super ce que vous êtes en train d'apprendre des choses et de prendre une approche pragmatique.
Comment faites-vous envoyer à la recherche de "terme" dans votre méthode FindZipCode automatiquement?
OriginalL'auteur Ben | 2010-09-28
Vous devez vous connecter pour publier un commentaire.
Court de l'évolution de votre modèle à ne pas utiliser un ID différent pour les codes postaux...
Créer un champ caché pour le code postal id. Changer de sélectionner le comportement de remplir le champ caché avec l'ID et le visible avec le label.
Voir L'échantillon comment atteindre ce
Avez-vous pensé à ce qui se passe si ils tapent leur propre?
OriginalL'auteur Luke Schafer
Si vous ajoutez les lignes suivantes, il affichera l'étiquette et PAS l'id (qui j'aurais pensé que devrait être la valeur par défaut, mais bon).
Error: NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7
Aucune idée sur la façon de contourner ce problème?OriginalL'auteur sca_tone