Question

我在asp.net上观看了视频，而且我已经在网上看到了什么都找不到。

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

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

现在我正在使用VB的ASP.NET MVC3 w / Razors用于网站，我正试图在用户输入文本时进行一些自动完成。

当用户输入文本时，它会调用搜索控制器中的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。

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

1 个答案: