用户输入文本时显示 PartialView？喜欢自动完成功能？

Question

我在 asp.net 上观看了视频，并且在网上查看过，但一无所获。

我在网站上有一个搜索框，用于搜索食谱。每个食谱都有您正在制作的图片、标题和类型（甜点、午餐、晚餐）。

所有这些项目都在一个 DataService 中，我可以对其进行查询并获取他们正在搜索的项目的列表。

现在我正在为网站使用带有 Razors 的 VB 的 ASP.NET MVC3，并且我试图在用户输入文本时获得一些自动完整性。

应该发生的是当用户输入文本时，它会在搜索控制器中调用一个 ActionResult。它查询 DataService 并将所有搜索结果放入模型中。使用该模型，我返回一个 PartialView 的结果，其中包含模型。

它应该显示部分视图，但是当用户删除所有文本时，我将删除部分视图。

这是我实现的。在布局视图中

@Code
  Using Ajax.BeginForm("FastSearchResults", "Search", "", New AjaxOptions With {.UpdateTargetId = "searchitems", .HttpMethod = "GET", .InsertionMode = InsertionMode.Replace})
      Html.BeginForm("Results", "Search", FormMethod.Get)
           @<input type="text" name="id" id="searchbox" data-autocomplete="@Url.Action("FastSearchResults", "Search")" class="recipevox" value="Search Movie Title or Actor Here" />
      Html.EndForm()
  End Using 
End Code
<span id="searchitems"></span>

FastResult 方法

    Function FastSearchResults(ByVal id As String) As ActionResult
        Dim model = search.FastSearch(id)
        Return PartialView("_FastSearchResults", model)
    End Function

Javascript 代码

$(document).ready(function () {
      $(":input[data-autocomplete]").autocomplete({ source: $(this).attr("data-autocomplete") }); });

我很好奇为什么这不起作用，我还缺少什么？

Answer 1

您的FastSearchResults 控制器操作返回可能包含HTML 的部分视图。自动完成插件不需要 HTML。它需要文本或 JSON。因此，要完成这项工作，您可以有一个专门用于自动完成的不同控制器操作：

<HttpPost()>
Function SearchResults(ByVal id As String) As ActionResult
    ' TODO: Query your service and return a list of model containing Id and Value properties
    Dim model = Enumerable.Range(1, 10).Select(Function(x) New With {.Id = x, .Value = "item" & x})
    Return Json(model)
End Function

然后设置您的自动完成功能：

<script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $(":input[data-autocomplete]").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: this.element.attr('data-autocomplete'),
                    type: 'POST',
                    data: { id: request.term },
                    success: function (result) {
                        response(
                            $.map(result, function (item) {
                                return {
                                    // Here we must map between the server side JSON
                                    // and the autocomplete expected format
                                    label: item.Value,
                                    id: item.Id
                                };
                            })
                        );
                    }
                });
            },
            minLength: 2
        });
    });
</script>

至于返回部分视图的其他控制器操作，您可以保留它，当使用 AJAX 提交表单时将执行它，并将其结果注入#searchitems div。