ライブ検索partialviewがAjax.BeginFormで完全なビューとしてロードされる

Question

Ajaxとpartialviewsを使用してライブ検索メカニズムを作成しようとしています。メインビューは送信ボタンのないテキストボックス（これはプログラムの主な要件です）です。ユーザーがボックスに入力すると、onchangeコマンドは、フォームをコントローラに送信するjavascript関数をアクティブにします。コントローラーはデータベース検索を行い、元のビュー内のdivを置換するために結果の表でいっぱいの部分ビューを返します。

私の問題は、結果の部分ビューがインデックスビューと検索ビューでフルビューとして読み込まれることです。

これは私のコードスニペットで、インデックスビューから始まります。今すぐ検索ボタン

@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> 

と今partialview最後に、関連するコントローラ

[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"); 

    } 

結果ビュー

@{ 
    ViewBag.Title = "Index"; 
} 

<h2>Index</h2> 

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

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

。

@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のインスタレーションなど、いくつかの他の事を検証してみました。申し訳ありませんが長い質問ですが、私は運がない2つの稼働日のためにこれに行ってきました。助けてくれてありがとう！

Answer 1

私は個々のビュー上のレイアウトinteadにjquery.unobtrusive-ajax.jsを呼び出し、検索内部検索機能の

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

ため

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

を変更することによってそれを解決最初に呼ばれたpartialview。