Question

我对MVC很新，并且使用Twitter的Bootstrap在MVC4网站上工作，我们需要TypeAhead的HtmlHelper。

我获得了Twitter的Bootstrap here的HtmlHelper代码：

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 
        }
    );
}

我还编写了以下代码来为typeahead提供JSON：

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

就像现在一样，我为HtmlHelper提供了IEnumerable＆lt;串GT;填充意见箱。我无法弄清楚如何使用我自己的JsonResult。它还需要是动态的，因为我们需要在网站上的多重实例上使用HtmlHelper，其中有几个不同的项目源，所有这些都是使用EF从数据库中提取的。

我不喜欢这个解决方案是来自IEnumerable＆lt;串GT;显示在html源代码中，方便访问者阅读。

有没有办法为Twitters提供一个HtmlHelper的typeahead.js并调用JsonResult作为项目源，而不是将htmlResults编码在打印给最终用户的html中？

Answer 1

我认为直接使用typeahead要容易得多。

$(function() {
    // get your list
    $.getJSON('/Controller/Autocomplete', function (allData) {
         $('#your-element').typeahead({source: allData});
    };
});

当然，你可以把它变成一个帮手，但我觉得这样比较容易。注意：我没有测试这个代码，所以请原谅任何错误，但希望它能给你提供这个想法。由于使用AJAX调用操作，因此它也不会在原始页面源中。您还可以将源更改为函数调用，并根据需要定期更新操作中的数据。

Answer 2

有点迟到的反应，但我已经为您找到了更好的解决方案。使用TwitterBootstrapMvc。

它有一个使用Typehead的好例子。此外，使用这种方法，您根本不需要自定义JavaScript。只需将其包含在side-wide javascript文件中就可以忘记了。

MVC Bootstrap预先输入HtmlHelper

2 个答案: