Фильтровать данные на основе запроса и результата возврата с использованием частичного представления

Question

Я пытаюсь фильтровать данные на основе запроса. Я использую частичное представление для отображения отфильтрованных данных. Однако в частичном представлении ничего не обновляется. Как я могу это исправить? Класс

Контроллер:

public IActionResult Index() { 
    IEnumerable<Organisation> organisations = _organisationRepository.GetAll().OrderBy(b => b.Name).ToList(); 

    if (isAjaxRequest()) { 
     string text = Request.Form["text"].ToString(); 
     return PartialView("_Organisations", _organisationRepository.GetByName(text).ToList()); 
     } 

     return View(organisations); 
    } 

private bool isAjaxRequest() { 
     return Request != null && Request.Headers["X-Requested-With"] == "XMLHttpRequest"; 
    } 

организации Вид:

<form asp-controller="Organisation" asp-action="Index"> 
<div class="form-inline"> 
    <div class="form-group"> 

     <label for="text">Filteren in organisaties</label> 
     <input type="text" name="text" id="text" required pattern="^([0-9]{4}|[a-zA-Z]+)$"> 

     <label for="selected"></label> 
     <select name="selected" id="selected" class="form-control"> 
      <option value="name">Naam</option> 
      <option value="postalcode">Postcode</option> 
     </select> 
    </div> 

    <button type="submit" class="btn btn-default" id="search">Zoeken</button> 
</div> 
</form> 

<div id="partial"> 
    @Html.Partial("_Organisations", Model); 
</div> 

Частичный вид:

<table class="table table-striped table-condensed table-bordered"> 
<tr> 
    <th>Naam</th> 
    <th>Adres</th> 
    <th></th> 
</tr> 

@foreach (var item in Model) { 
    <tr> 
     <td> 
      @item.Name 
     </td> 
     <td> 
      @item.Location.ToString() 
     </td> 
     <td> 
      <a onClick="showForm(this, @item.OrganisationId)" href="#">Selecteer</a> 
     </td> 
    </tr> 
} 

Javascript Файл:

$("#search").click(function() { 
    $.ajax({ 
    url: "Organisation/Index", 
    type: "post", 
    data: $("form").serialize(), 
    success: function (result) { 
     $("#partial").html(result); 
     } 
    }); 
}); 

Любая помощь будет оценена!

Answer 1

Первый ответ (неверно): Если это не опечатка, вы забыли $ jquery $("#search").click(function() {.

Новый ответ: Я думаю, что вот ошибка: вы должны предотвратить нормальное поведение события click. Изменение яваскрипта функции (2 модификации):

 $("#search").click(function (e) { 

      e.preventDefault(); 

      $.ajax({ 
       url: "Organisation/Index", 
       type: "post", 
       data: $("form").serialize(), 
       success: function (result) { 
        $("#partial").html(result); 
       } 
      }); 
     }); 

Теперь функция принимает е (событие) в параметре и, прежде чем сделать вызов Ajax, мы должны вызвать e.preventDefault(); Исправлена ​​ошибка в том, что вызов Ajax возвратил частичный просмотр, #partial html был обновлен, но тогда нормальное поведение «щелчка» перезагрузило страницу запросом HTTP GET.