MVC3 Автозаполнение jQuery не отображает результаты

Question

Следующий код автозаполнения jQuery не отображает результаты в MVC3.Когда я отлаживаю код, я вижу, что он правильно вызывает QuickSearchByLastName.Может кто-нибудь сказать мне, если мой код неверен?(Я также попытался с jquery-1.6.2.min.js без удачи) Спасибо!

Index.cshtml:

@using (Ajax.BeginForm(new AjaxOptions
{
    HttpMethod = "GET",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "results"
}
))
{               
    <input type="text" name="q" data-autocomplete="@Url.Action("QuickSearchByLastName","Search")"  />                 
}
<div id="results" >
</div>    


----------------------------------------------------------------
Search Controller:

    public ActionResult QuickSearchByLastName(string term)
            {
                using (var context = new CSCContext())
                {
                    var searchResults = context.Students
                                      .Where(s => s.LastName.Contains(term) && s.IsActive == true)
                                      .Take(10)
                                      .Select(s => new { label = s.LastName });


                    return Json(searchResults, JsonRequestBehavior.AllowGet);
                }                
            }

---

_Layout.cshtml:
    @Content.Script("jquery-1.4.4.min.js", Url)              
    @Content.Script("jquery.unobtrusive-ajax.min.js", Url)
    @Content.Script("jquery-ui.min.js", Url)     
    @Content.Script("jquery.validate.min.js", Url)    
    @Content.Script("jquery.validate.unobtrusive.min.js", Url)    
    @Content.Script("CSC.js", Url)  
    @RenderSection("scripts", false)

---

CSC.js

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

});

Следующий код исправил проблему:

public ActionResult QuickSearchByLastName(string term)
        {           
            var context = new CSCContext();
            try
            {

                var searchResults = context.Students
                                  .Where(s => s.LastName.Contains(term) && s.IsActive == true)
                                  .Take(10)
                                  .Select(s => new { label = s.LastName });


                return Json(searchResults.ToList(), JsonRequestBehavior.AllowGet);
            }
            finally
            {
                context.Dispose();
            }                       
        }

Answer 1

Я попытался воспроизвести ваш сценарий безрезультатно, так как он всегда работал для меня. Вот что я сделал.

1. Создание нового проекта ASP.NET MVC 3 с использованием Интернет-шаблона

2. HomeController:

   public class HomeController : Controller
   {
       public ActionResult Index()
       {
           return View();
       }
   
       public ActionResult QuickSearchByLastName(string term)
       {
           var results = Enumerable
               .Range(1, 5)
               .Select(x => new { 
                   id = x, 
                   label = "label " + x, 
                   value = "value " + x 
               });
           return Json(results, JsonRequestBehavior.AllowGet);
       }
   }
   

3. Index.cshtml

   <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all" /> 
   <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
   <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
   
   <script type="text/javascript">
       $(function () {
           $(':input[data-autocomplete]').each(function () {
               $(this).autocomplete({
                   source: $(this).attr('data-autocomplete')
               });
           });
       });
   </script>
   
   @using (Html.BeginForm())
   {               
       <input type="text" name="q" data-autocomplete="@Url.Action("QuickSearchByLastName", "Home")" />
   }
   

Я использовал jquery-1.5.1.min.js и jquery-ui-1.8.11.min.js, которые по умолчанию связаны с ASP.NET MVC 3 RTM. Я также попытался поместить это в Ajax.BeginForm, а также импортировать ненавязчивые сценарии по умолчанию, и он все еще работал для меня.

Answer 2

Краткий ответ: См. Этот пост jQuery UI автозаполнение с ASP.NET Web API

Длинный ответ:

Шаг 1. Подготовка к работе с веб-интерфейсом API

Давайте сначала создадим метод веб-API , который будет возвращать список элементов (исполнителей) с использованием поискового термина запрос отправлен из текстового поля автозаполнения.В этом посте я не использую базу данных, вместо этого я буду использовать List, чтобы максимально упростить этот пример.

Ниже описано, как я определил свой класс Artist

public class Artist
{
    public int Id { get; set; }
    public int Name { get; set; }
}    

ДалееЯ создал GET-метод Web Api , который будет использовать поисковый запрос, введенный в текстовое поле автозаполнения, и с небольшой помощью LINQ вернет список совпадающих результатов.

using System.Collections.Generic;
using System.Linq;
using System.Web.Http;

namespace Autocomplete.Controllers
{
    public class ArtistApiController : ApiController
    {

        public List<Artist> ArtistList = new List<Artist>
        {
            new Artist{Id = 1, Name = "Sonu Nigam"},
            new Artist{Id = 2, Name = "Sunidhi Chauhan"},
            new Artist{Id = 3, Name = "Shreya Goshal"},
            new Artist{Id = 4, Name = "Mohit Chauhan"},
            new Artist{Id = 5, Name = "Nihkil Dsouza"},
            new Artist{Id = 6, Name = "Kailash Kher"},
            new Artist{Id = 7, Name = "Atif Aslam"},
            new Artist{Id = 8, Name = "Ali Zafar"},
            new Artist{Id = 9, Name = "Shafaqat Ali"},
            new Artist{Id = 10, Name = "Shankar Madahevan"}
        }; 


        // GET api/values
        public IEnumerable<Artist> Get(string query)
        {
            return ArtistList.Where(m => m.Name.Contains(query)).ToList();
        }
    }
}   

Нашсерверный код готов!Время проверить это.

Шаг 2: Код на стороне клиента

Включите jquery-ui.js и jquery.ui.CSS в вашем html

<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.8.20.min.js" ></script>
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />

<div id="body">
    <label for="autocomplete-textbox">Search : </label>
    <input type="text" id="autocomplete-textbox" />
</div>

<script type="text/javascript">
$(document).ready(function (){
$('#autocomplete-textbox').autocomplete({
    source: function (request, response) {
        // prepare url : for example '/api/artistapi?query=sonu
        var autocompleteUrl = '/api/artistapi' + '?query=' + request.term;
        $.ajax({
            url: autocompleteUrl,
            type: 'GET',
            cache: false,
            dataType: 'json',
            success: function (json) {
                // call autocomplete callback method with results  
                response($.map(json, function (data, id) {
                    return {
                        label: data.Name,
                        value: data.Id
                    };
                }));
            },
            error: function (xmlHttpRequest, textStatus, errorThrown) {
                console.log('some error occured', textStatus, errorThrown);
            }
        });
    },
    minLength: 2,
    select: function (event, ui) {
        alert('you have selected ' + ui.item.label + ' ID: ' + ui.item.value);
        $('#autocomplete-textbox').val(ui.item.label);
        return false;
    }
});
});
</script>

Здесь следует отметить, что в методе успеха я использовал следующий код:

response($.map(json, function (data, id) {
    return {
        label: data.Name,
        value: data.Id
    };
}));

data.Id и data.Name используется, потому что в ответе ajax (как показано ниже) данные возвращаются в этом формате.

Шаг 3: Проверка& Вывод:

Взято из здесь

Answer 3

Почему-то файл скрипта

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>

должен быть включен в верхнюю часть, а НЕ как указано внизу любого файла для повышения производительности.

Если вы это сделаете, это будет работать.

Answer 4

У меня была та же проблема, что и у rk1962 (и быстрый веб-поиск показывает множество других людей, имеющих такую ​​же проблему).Я повторил код Дарина сверху, и это сработало.Когда я беру скрипт из верхней части Index.cshtml и помещаю его в отдельный файл скриптов, он перестает работать - QuickSearchByLastName не вызывается.

Andrew