Mostrar una vista parcial en una ventana emergente modal

Solución:

Con su código actual, cuando el usuario hace clic en el botón de envío, hará un envío de formulario normal ya que su botón de envío está dentro de un form etiqueta. Para su caso de uso, debería secuestrar esa forma normal submit evento usando javascript y haga una llamada ajax a su método de acción donde usará el search_type y search_string parámetros para obtener los datos filtrados y devolver un resultado de vista parcial. El resultado de esta vista parcial es el marcado HTML que desea mostrar dentro del cuadro de diálogo modal. Una vez que su llamada ajax reciba la respuesta del servidor, actualice el contenido del cuerpo del diálogo modal con esta respuesta y active el diálogo modal.

@using (Html.BeginForm("Index", "Accounts", FormMethod.Post, new { id = "searchForm" }))
{
    <div>
        <input type="text" name="Search_String" />
        <input type="submit" id="submit" value="Search" />
    </div>
}    
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" 
                                      data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Ahora tenga algo de código javascript, que escucha el evento de envío en su formulario de búsqueda y detiene el comportamiento normal (envío de formulario normal) y en su lugar realiza un envío de formulario ajax.

$(document).ready(function () {

    $('#searchForm').submit(function (e) {
        e.preventDefault();
        var $form = $(this);

        $.post($form.attr("action"), $form.serialize()).done(function (res) {
            $mymodal = $("#myModal");
            //update the modal's body with the response received
            $mymodal.find("div.modal-body").html(res);
            // Show the modal
            $mymodal.modal("show");
        });
    });

});

Ahora debe asegurarse de que su método de acción Index devuelva una vista parcial (para que no ejecute ningún código de diseño, sino solo ese código de vista).

[HttpPost]
public ActionResult Index(string Search_Type, string Search_String)
{
    // Your existing filtering code goes here.
    return PartialView(accounts.ToList());
}

---

---

Utiliza Nuestro Buscador