MVC Bootstrap typeahead HtmlHelper

Question

Je suis assez nouveau avec MVC et de travailler sur un site MVC4 avec Twitter Bootstrap et nous avons besoin d'un HtmlHelper pour TypeAhead.

J'ai obtenu le code pour un HtmlHelper pour Bootstrap Twitter here:

public static MvcHtmlString TypeaheadFor<TModel, TValue>(
    this HtmlHelper<TModel> htmlHelper, 
    Expression<Func<TModel, TValue>> expression, 
    IEnumerable<string> source, 
    int items = 8) 
{ 
    if (expression == null) 
     throw new ArgumentNullException("expression"); 

    if (source == null) 
     throw new ArgumentNullException("source"); 

    var jsonString = new JavaScriptSerializer().Serialize(source); 

    return htmlHelper.TextBoxFor(
     expression, 
     new { 
      autocomplete = "off", 
      data_provide = "typeahead", 
      data_items = items, 
      data_source = jsonString 
     } 
    ); 
} 

j'ai écrit aussi le code suivant pour fournir le JSON pour le typeahead:

 public JsonResult Autocomplete(string input) { 
     var model = db.Users 
         .Select(g => new { 
          label = g.Name.StartsWith(input) 
         }); 
     return Json(model, JsonRequestBehavior.AllowGet); 
    } 

Comme il est maintenant, je fournis le HtmlHelper avec une chaîne IEnumerable <> pour remplir la boîte à suggestions. Je n'arrive pas à comprendre comment utiliser mon propre JsonResult pour cela. Il doit également être dynamique car nous aurons besoin de HtmlHelper sur des instances multipe sur le site Web avec plusieurs sources d'éléments différentes, toutes tirées de la base de données en utilisant EF. Ce que je n'aime pas dans cette solution, c'est que le contenu de la chaîne IEnumerable <> est affiché dans la source html, facilement lisible par le visiteur.

Existe-t-il un moyen d'avoir un HtmlHelper pour Twitters typeahead.js et d'appeler JsonResult comme source de l'élément, et de ne pas avoir le JSONResults codé dans le HTML imprimé à l'utilisateur final?

Answer 1

Je pense qu'il serait beaucoup plus facile d'utiliser directement typeahead. Vous pouvez, bien sûr, transformer cela en aide, mais je pense que c'est plus facile de cette façon. Note: Je n'ai pas testé ce code, alors s'il vous plaît pardonner tous les bugs, mais j'espère que ça vous donne l'idée. Puisque l'action est appelée en utilisant AJAX, elle ne sera pas aussi dans la source de la page brute. Vous pouvez également remplacer la source par un appel de fonction et mettre à jour périodiquement les données de votre action si nécessaire.

Answer 2

Réponse un peu tardive, mais j'ai une meilleure solution pour vous. Utilisez TwitterBootstrapMvc.

Il s'agit d'un bon exemple d'utilisation de Typehead. En outre, avec cette approche, vous n'avez pas besoin de personnaliser le javascript. Il suffit de l'inclure dans le fichier javascript latéral et de l'oublier.