使用Ajax.BeginForm將實時搜索部分視圖加載為全視圖

Question

我正在嘗試使用Ajax和partialviews創建實時搜索機制。 這個想法是主視圖只是一個沒有提交按鈕的文本框（這是程序的主要要求）。 用戶在框中輸入內容，然后使用onchange命令激活一個JavaScript函數，該函數將表單提交到控制器中。 然后，控制器將進行數據庫搜索，並返回一個填充有結果表的局部視圖，以替換原始視圖中的div。

我的問題是，帶有結果的partialview將作為完整視圖加載到索引視圖和搜索視圖中。

這些是我的代碼片段，從索引視圖開始。

@{
    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並更改

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

為一個

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

在搜索偏視圖內名為First的搜索功能上。