2

我对 MVC 相当陌生，并且在使用 Twitter 的 Bootstrap 的 MVC4 网站上工作，我们需要一个用于TypeAhead的 HtmlHelper 。

我在这里获得了 Twitter Bootstrap 的 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 
        }
    );
}

我还编写了以下代码来为预输入提供 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<string> 来填充建议框。我不知道如何为此使用我自己的 JsonResult。它还需要是动态的，因为我们需要在网站上具有多个不同项目源的多个实例上使用 HtmlHelper，所有这些都使用 EF 从数据库中提取。

我不喜欢这个解决方案的地方在于 IEnumerable<string> 中的内容显示在 html 源代码中，访问者易于阅读。

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

4

2 回答 2

1

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

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

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

于 2013-05-07T20:01:12.797 回答
-3

回复有点晚，但我有一个更好的解决方案给你。使用TwitterBootstrapMvc。

它有一个使用 Typehead 的好例子。此外，使用这种方法，您根本不需要自定义 javascript。只需将它包含在侧面的 javascript 文件中，然后忘记它。

于 2013-07-08T04:37:09.033 回答