Muhammd Aamir Ответов: 2

Автозаполнение текстового поля в ASP.NET MVC


Привет всем, надеюсь, что все Вы хороши...
я новичок в MVC, и я столкнулся с проблемой, я хочу, чтобы автозаполнить текстовое поле с моими жестко закодированными данными с помощью jquery, но не получить никакого успеха в этом вопросе, я добавил ссылку jQuery autocomplete API, но ничего не произошло любезно помогите мне преодолеть эту проблему .. заранее спасибо

Что я уже пробовал:

Модель:
public class Locations
    {

        public int Id { get; set; }
        public string Name { get; set; }

        public List<Locations> locations = new List<Locations>()
        {
            new Locations() {Id = 1, Name = "London"},
            new Locations() {Id = 2, Name = "Walles"},
            new Locations() {Id = 3, Name = "Birmingham"},
            new Locations() {Id = 4, Name = "Edinburgh"},
            new Locations() {Id = 5, Name = "Glasgow"},
            new Locations() {Id = 6, Name = "Liverpool"},
            new Locations() {Id = 7, Name = "Bristol"},
            new Locations() {Id = 8, Name = "Manchester"},
            new Locations() {Id = 9, Name = "NewCastle"},
            new Locations() {Id = 10, Name = "Leeds"},
            new Locations() {Id = 11, Name = "Sheffield"},
            new Locations() {Id = 12, Name = "Nottingham"},
            new Locations() {Id = 13, Name = "Cardif"},
            new Locations() {Id = 14, Name = "Cambridge"},
            new Locations() {Id = 15, Name = "Bradford"},
            new Locations() {Id = 16, Name = "Kingston Upon Hall"},
            new Locations() {Id = 17, Name = "Norwich"},
            new Locations() {Id = 18, Name = "Conventory"}
        };
    }


Контроллер:

public class DefaultController : Controller
   {
       public ActionResult Index()
       {
           return View();
       }

       public JsonResult Search(string term)
       {
           Locations l = new Locations();
           List<string> Loc;
           Loc = l.locations.Where(x => x.Name.StartsWith(term)).Select(x => x.Name).Distinct().ToList();
           return Json(Loc, JsonRequestBehavior.AllowGet);
       }
   }


Смотреть:

@model IEnumerable<SearchBox.Models.Locations>
@using SearchBox.Models
@{
    ViewBag.Title = "Index";
}
<link href="~/Content/jquery-ui.css" rel="stylesheet" />
<script src="~/Content/jquery-ui.js"></script>
    <script type="text/javascript">
    $(function () {
        $('#searchText').autocomplete({
            source: '@Url.Action("Search")' 
            });
    })
</script>



<h2>Search Demo</h2>
@using (Html.BeginForm())
{
   <input type = "text" id="searchText" name="searchText" />
   <input type="submit" value="Search" />
}

2 Ответов

Рейтинг:
2

Bryian Tan

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

Модель

public class Locations
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

Контроллер
public class DefaultController : Controller
{
    public JsonResult Search(string term)
    {
        List<Locations> l = new List<Locations>()
        {
            new Locations() {Id = 1, Name = "London"},
            new Locations() {Id = 2, Name = "Walles"},
            new Locations() {Id = 3, Name = "Birmingham"},
            new Locations() {Id = 4, Name = "Edinburgh"},
            new Locations() {Id = 5, Name = "Glasgow"},
            new Locations() {Id = 6, Name = "Liverpool"},
            new Locations() {Id = 7, Name = "Bristol"},
            new Locations() {Id = 8, Name = "Manchester"},
            new Locations() {Id = 9, Name = "NewCastle"},
            new Locations() {Id = 10, Name = "Leeds"},
            new Locations() {Id = 11, Name = "Sheffield"},
            new Locations() {Id = 12, Name = "Nottingham"},
            new Locations() {Id = 13, Name = "Cardif"},
            new Locations() {Id = 14, Name = "Cambridge"},
            new Locations() {Id = 15, Name = "Bradford"},
            new Locations() {Id = 16, Name = "Kingston Upon Hall"},
            new Locations() {Id = 17, Name = "Norwich"},
            new Locations() {Id = 18, Name = "Conventory"}
        };

        List<string> Loc;
        Loc = l.Where(x => x.Name.StartsWith(term)).Select(x => x.Name).Distinct().ToList();
        return Json(Loc, JsonRequestBehavior.AllowGet);
    }

    // GET: Default
    public ActionResult Index()
    {
        return View();
    }
}


Рейтинг:
0

Ehsan Sajjad

Вам нужно будет указать свойства элемента отображения и его идентификатор :

$("#searchText").autocomplete({  
           source: function(request,response) {  
               $.ajax({  
                   url: '@Url.Action("Search","Default")',  
                   type: "GET",  
                   dataType: "json",  
                   data: { term : request.term },  
                   success: function (data) {  
                       response($.map(data, function (item) {  
                           return { label: item.Name, value: item.Name };  
                       }))  
  
                   }  
               })  
           },  
           messages: {  
               noResults: "", results: ""  
           }  
       });


Как вы возвращаете свойство с именем Имя вам нужно указать, что, как это fone выше для этикетка и ценность свойство его.


Muhammd Aamir

спасибо Эхсану Саджаду за то, что он поделился своими знаниями .. но это не работает для меня

Ehsan Sajjad

пожалуйста, поставьте точку останова в методе действия и посмотрите, вызывается ли он

Afzaal Ahmad Zeeshan

Эхсан, ответь на их комментарий, нажав кнопку Ответить кнопка с их комментарием, которая уведомит их. В противном случае они не могут быть уведомлены и потребуют перепроверить страницу.

Ehsan Sajjad

спасибо Afzaal за то, что дал мне знать:) я не очень хорошо знаком с форумами codeproject :)

Ehsan Sajjad

а также проверьте консоль браузера на наличие каких-либо ошибок javascript

Muhammd Aamir

ОК, позвольте мне проверить

Muhammd Aamir

Г-н Эхсан Саджад Поисковое действие JsonResult не сработало, и в моем браузере ничего не произошло

Ehsan Sajjad

является ли автозаполнение в

$(document).ready()
?

Muhammd Aamir

Может быть, я не уверен в этом ... я выложил перед вами весь свой код

Ehsan Sajjad

проверяли ли вы консоль dev tools на наличие ошибок js?

Muhammd Aamir

Нет сэр