Результаты поиска в режиме реального времени, как полный просмотр с Ajax.BeginForm

Question

Я пытаюсь создать механизм поиска в реальном времени с использованием Ajax и partialviews. Идея заключается в том, что основным видом является просто текстовое поле без кнопки отправки (это основное требование для программы). Пользователь вводит в поле и команду onchange активирует функцию javascript, которая отправляет форму в контроллер. Затем контроллер выполнит поиск в базе данных и вернет частичное представление, заполненное таблицей результатов, чтобы заменить div в исходном представлении.

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

Это мои фрагменты кода, начиная с индексного представления.

@{ 
    ViewBag.Title = "Index"; 
} 

<h2>Index</h2> 

<div id="buscar"> 
    @Html.Action("Buscar", "Reportes") 
</div> 

<div id="encontrar-form"> 
</div> 

Теперь PartialView с помощью кнопки поиска

@model IEnumerable<ProyectoTamaulipas.Reporte> 


<script> 
     function showRes() { 

      document.getElementById("forma").submit(); 
     } 
</script> 

<div> 

    <br /> 
    <br /> 
    <h2>Haga una búsqueda por número de folio</h2> 
    <p> 
     @using (Ajax.BeginForm("Buscar", "Reportes", FormMethod.Post, new AjaxOptions(){ 
      InsertionMode = InsertionMode.Replace, 
      HttpMethod = "POST", 
      UpdateTargetId = "encontrar-form" 
     }, new { id = "forma" })) 
     { 

      <input type="text" name="numero" onchange="showRes()" /> 
     } 

    </p> 
</div> 

Теперь соответствующие контроллеры

[HttpGet] 
    public ActionResult Buscar() 
    { 
     return PartialView("First"); 
    } 


    [HttpPost] 
    public PartialViewResult Buscar(string numero) 
    { 

     if (numero != null) 
     { 
      int numeroF = 0; 
      //var query = (from a in db.Reporte 
      //    where SqlMethods.Like(a.Calle1, "%" + parm + "%") 
      //    select a).ToList(); 
      List<Reporte> query = null; 
      if (Int32.TryParse(numero, out numeroF)) 
      { 
       query = (from a in db.Reporte 
         where a.Folio == numeroF 
         select a).ToList(); 
      } 
      return PartialView("reporte", query); 
     } 
     ViewBag.Message = "no se encontraron resultados"; 
     return PartialView("reporte"); 

    } 

Наконец представление результатов.

@model IEnumerable<ProyectoTamaulipas.Reporte> 


@ViewBag.Message 

<table class="table"> 
    <tr> 
     <th> 
      @Html.DisplayNameFor(model => model.UCivil_ID) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.ServicioID) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.Ubicacion) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.Calle1) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.Calle2) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.ColoniaID) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.Comentarios) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.EstatusID) 
     </th> 

     <th></th> 
    </tr> 

    @foreach (var item in Model) 
    { 
     <tr> 
      <td> 
       @Html.DisplayFor(modelItem => item.UCivil_ID) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.ServicioID) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.Ubicacion) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.Calle1) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.Calle2) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.ColoniaID) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.Comentarios) 
      </td> 
      @*<td> 
        @Html.DisplayFor(modelItem => item.Fotografia) 
       </td>*@ 
      <td> 
       @Html.DisplayFor(modelItem => item.EstatusID) 
      </td> 

     </tr> 
    } 

</table> 

Я уже попытался изменить несколько команд и проверки Кладка моей ненавязчивой AJAX, а также несколько других вещей. Извините за длинный вопрос, но я собираюсь на это в течение двух рабочих дней без везения. Спасибо за помощь!

Answer 1

Я решил его, вызывая jquery.unobtrusive-ajax.js на макет Intead из индивидуальных взглядов и изменения

document.getElementById("forma").submit(); 

для

$("#forma").trigger("submit"); 

на функции поиска внутри поиска partialview называется First.