Поиск в реальном времени MVC

Question

Я ищу поиск в реальном времени структуры ASP.NET и сущности. Я немного зелёный. Я читал, что ему нужно использовать ajax, но я никогда не использовал его раньше и не могу получить хороший пример. Вот кусок кода, cshtml (часть текстового поля)

<div class="form-horizontal"> 
     <hr /> 
     <h4>Search for a client: </h4> 

     <div class="input-group"> 
      <span class="input-group-addon" id="Name"> 
       <span class="glyphicon glyphicon-user" aria-hidden="true"></span> 
      </span> 
      @Html.TextBox("Name", "", new { @class = "form-control", placeholder = "Name" }) 
     </div> 
     <div><h6></h6></div> 
     <div class="input-group"> 
      <span class="input-group-addon" id="Surname"> 
       <span class="glyphicon glyphicon-user" aria-hidden="true"></span> 
      </span> 
      @Html.TextBox("Surname", "", new { @class = "form-control", placeholder = "Surname" }) 
     </div> 
     <div><h6></h6></div> 
     <button type="submit" class="btn btn-default" data-toggle="modal" data-target="#infoModal">Search</button> 
    </div> 

это часть контроллера:

public ActionResult Index(string Name, string Surname) 
    { 
     var SearchList = from m in db.Klienci 
         select m; 
     if (!String.IsNullOrEmpty(Name)) 
     { 
      SearchList = SearchList.Where(s => s.Name.Contains(Name)); 
     } 
     if (!String.IsNullOrEmpty(Surname)) 
     { 
      SearchList = SearchList.Where(s => s.Nazwisko.Contains(Surname)); 
     } 
     return View(SearchList); 
    } 

Так что искать меня клиентов по имени и фамилии, но обновить всю страницу когда он потерял фокус или после нажатия кнопки. Как его решить, чтобы получить прямой поиск? после каждого нажатия клавиши поиск по базе данных? Я немного зелёный, ты поможешь мне?

Answer 1

Вы можете слушать keyup события на вашем входном элементе, прочитать значение и отправить его на сервер с помощью Ajax. Верните результаты и в обратном вызове успеха ajax-вызова обновите ui с результатами.

$(function() { 

    $("#Name,#SurName").keyup(function(e) { 
      var n = $("#Name").val(); 
      var sn = $("#SurName").val(); 
      $.get("/Home/Index?Name="+n+"&SurName="+sn,function(r){ 
       //update ui with results 
       $("#resultsTable").html(r); 
      }); 

    }); 

}); 

Код в основном слушает ключ до событий на два входных текстовых и прочитать значения и отправить методу /Home/Index действия с использованием методы JQuery ПОЛУЧИТЬ asynchronously.When метод действия возвращает ответ, мы обновляем DOM ,

Предполагая, что resultsTable - это идентификатор таблицы, в которой мы приводим результаты.

Кроме того, так как вы возвращаете результат частичного просмотра (без заголовков макета), вы должны использовать return PartialView() вместо return View()

if(Request.IsAjaxRequest()) 
    return PartialView(SearchList); 

return View(SearchList); 

Answer 2

Вот хороший пример/учебник, как использовать Ajax с ASP.NET MVC

http://www.itorian.com/2013/02/jquery-ajax-get-and-post-calls-to.html

Редакцией: 2016-07-20

Пример:

$(function() { 
 
     $("searchField").keyup(function() { 
 
      $.ajax({ 
 
       type: "POST", 
 
       url: "/Controller/Action", 
 
       data: data, 
 
       datatype: "html", 
 
       success: function (data) { 
 
        $('#result').html(data); 
 
       } 
 
      }); 
 
     });

Answer 3

Вы должны посетить сервер для получения данных с сервера и без ajax, это невозможно. Теперь вопрос заключается в том, как сделать вызов ajax, вы можете использовать jQuery js lib, но я бы порекомендовал вам попробовать угловой, поскольку привязка данных в угловом исполнении будет соответствовать вашим потребностям. Посмотрите на себя следующие ссылки Angular Ajax Service - jQuery Ajax