Live search partialview loads as full view with Ajax.BeginForm

Question

I´m trying to create a live search mechanism using Ajax and partialviews. The idea is that the main view is simply a text box without submit button (this is a main requirement for the program). The user types in the box and an onchange command activates a javascript function which submits the form into a controller. The controller will then make a database search and return a partialview filled with a table of results to substitute a div in the original view.

My problem is that the partialview with the results loads as a full view, over the index and search views.

These are my code snippets starting with the index view.

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

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

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

Now the partialview with the search button

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

Now the relevant controllers

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

    }

Finally the results view.

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

I already tried changing several commands and verifying the instalation of my unobtrusive ajax as well as several other things. Sorry for the long question but I've been going at this for two workdays with no luck. Thanks for the help!

Answer 1

I solved it by calling the jquery.unobtrusive-ajax.js on layout intead of on individual views and changing the

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

for a

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

on the search function inside the search partialview called First.