ASP.NET MVC Data Feedback via les contrôles utilisateur

Question

Dans notre nouveau produit, nous avons quelques champs de saisie de données qui vous obligent à rechercher la valeur correcte à placer dans ce champ. Lorsque vous entrez ce champ de saisie de données, je voudrais fournir une option de recherche via quelque chose sur la vue (peut-être une implémentation Ajax) et permettre la recherche de la base de données pour la valeur, mais quand le résultat retourne, je veux conserver les valeurs existantes en place pour les autres champs non affectés par la recherche.

Mais je n'ai aucune idée de comment faire cela avec MVC. Quelqu'un at-il des suggestions sur la façon dont cela devrait être fait?

Answer 1

Ecrivez votre page de saisie de données de la manière habituelle pour une vue ASP.NET MVC en . Le faire fonctionner sans Ajax (par exemple, soumettre fonctionne correctement lorsque vous suffit de taper dans les valeurs, sans auto complète).

Ecrivez le prototype d'une méthode JavaScript que vous appellerez lorsque l'utilisateur effectuera une certaine action (par exemple, enfonce une touche à l'intérieur d'un certain contrôle). Mais ceci à l'intérieur d'un tag de script dans votre page aspx. Malheureusement, le débordement de pile semble "assainir" les balises de script dans mon exemple, donc je ne peux pas démontrer cette partie. Mais vous êtes prototype JavaScript ressemblera à quelque chose comme ceci:

function startAutoComplete() { 
} 

Accrochez maintenant les gestionnaires d'événements sur le contrôle de l'interface utilisateur. Vous devez appeler la fonction que vous venez de prototyper un gestionnaire d'événements approprié pour votre application. D'après votre description, il semble que vous souhaitiez utiliser onkeydown, mais il y a lots of events to choose from. Vous devez probablement gérer plus d'un événement, selon votre application. Jusqu'ici, tout ce que nous avons fait était aspx standard et JavaScript. Dans cette étape, nous ferons la seule partie du processus qui est vraiment différente pour ASP.NET MVC. Vous devez ajouter une action à votre contrôleur qui sera appelée (indirectement) par le prototype JavaScript que vous venez d'écrire. L'action doit accepter une entrée appropriée (par exemple, une chaîne représentant le texte du contrôle ou quelque chose de similaire, selon le cas pour votre application) et renvoyer ses résultats au format JSON. Je vais montrer un exemple très simple ici; N'hésitez pas à remplacer le code plus complexe dans votre application réelle.

public ActionResult GetSuggestions(string searchText) 
{ 
    return Json(new {SearchText = searchText}); 
} 

Cet exemple renvoie simplement un objet JavaScript contenant une propriété, qui contient la valeur transmise à la fonction. Comme vous l'avez dit, vous pouvez écrire quelque chose de plus utile pour votre application.

Vous devez maintenant appeler cette fonction en JavaScript. L'URI ressemblera à quelque chose comme:

http://localhost/mycontroller/GetSuggestions?searchText=Foo 

Il est possible de faire des appels sans Ajax une bibliothèque JavaScript, mais beaucoup plus facile si vous utilisez jQuery ou une autre bibliothèque qui gère les problèmes de compatibilité entre les navigateurs pour vous. Comme il m'arrive d'aimer jQuery, je vais le démontrer. Actualisons la méthode startAutoComplete nous prototypé plus tôt:

function startAutoComplete() { 
    var searchText = $("#myeditorid").text(); 
    $.getJSON("/mycontroller/GetSuggestions?searchText=" + searchText, 
     null, 
     autoCompleteResponse); 
} 

La première ligne utilise jQuery pour obtenir le texte dans le contrôle avec l'ID myeditorid. Nous allons passer cela à l'action ASP.NET MVC en tant qu'argument searchText, en l'ajoutant comme paramètre de chaîne de requête.

La ligne suivante, qui commence par $ .getJSON, appelle une fonction jQuery qui effectue un appel Ajax à l'URI que vous spécifiez.Nous passons un argument, autoCompleteResponse, qui est le nom d'une méthode JavaScript à appeler si la réponse de l'appel Ajax est réussie. Maintenant, nous devons écrire autoCompleteResponse.

function autoCompleteResponse(data) { 
    if (data.SearchText) 
    { 
     $("#myeditorid").text(data.SearchText); 
    } 
} 

Cela dit: « Si les données renvoyées possède une propriété SearchText, définissez le texte du contrôle à cette valeur. » Encore une fois, faites tout ce qui est approprié pour votre application avec les données retournées.