Отображение PartialView, когда пользователь вводит текст? Как функция автозаполнения?

Question

Я смотрел видео на asp.net, посмотрел онлайн и ничего не нашел.

У меня есть окно поиска на сайте, который ищет рецепты. У каждого рецепта есть изображение, название и тип (десерт, обед, ужин).

Все эти элементы находятся в DataService, к которому я могу запросить и получить список элементов, которые они ищут.

Теперь я использую VB ASP.NET MVC3 с 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.