none
Cómo hacer una búsqueda en una vista en ASP.NET MVC RRS feed

  • Pregunta

  • Muy buenas amigos, estoy realizando un sistema donde me filtra los registros según lo que el usuario ingrese en un input.

    Hice una tabla donde se vean esos registros, y determiné que solo mostrara un rango determinado para no hacer tan extensa la vista con todos esos datos, por ejemplo: configuré que solo mostrara 5 registros y si hay mas los compagina en varias páginas 1, 2, 3 etc...

    El problema radica cuando ingreso en mi input una búsqueda, por ejemplo, busco el nombre del empleado llamado "José". José está registrado, pero no me lo muestra porque está en la página 2, lo que tengo que hacer es hacer clic en la página 2 y escribir nuevamente mi búsqueda y alli si me lo muestra.

    Hay alguna forma donde pueda realizar esa búsqueda tomando en cuenta todos los registros de todas las páginas y no solo de la actual.

    Mi cógido:

    VISTA:

    <input type="text" id="Search" placeholder="Buscar..." class="form-control" style = "width: 460%;max-width: 460%;">
    <tr class="Search">
        <td style="vertical-align:middle">
       @Html.DisplayFor(modelItem => item.NombreEmpleado)
       </td>
    </tr>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script>
        $(document).ready(function () {
            function contains(text_one, text_two) {
                return text_one.toLowerCase().indexOf(text_two.toLowerCase()) != -1;
            }
            $("#Search").keyup(function () {
                var searchText = $(this).val();
                $(".Search").each(function () {
                    $(this).toggle(contains($(this).text(), searchText));
                });
            });
        });
    </script>
    

    EN MI CONTROLADOR:

    public ActionResult Index(int page=1, int pageSize=6)
            {
                List<Empleado> list = db.Empleados.ToList();
                PagedList<Asignatura> model = new PagedList<Asignatura>(list, page, pageSize);           
                return View(model);            
            }



    viernes, 16 de marzo de 2018 15:36

Respuestas

  • No he visto el enlace de greg_dorian, pero seguramente lo envía a un tutorial de cómo buscar en ASP.net MVC del lado del servidor.  Si es así, pues es una buena solución.

    Su problema actual radica en el hecho de que el HTML resultante en la página (y por lo tanto el 100% de los datos disponibles para su función de jQuery) contiene únicamente aquellos datos pertenecientes a la página que usted visualiza.

    En otras palabras, su búsqueda no puede ser hecha vía jQuery.  Tiene que actualizar la vista, ya sea por AJAX o bien recargándola.

    ASP.net MVC provee una forma sencilla de recargar la vista.  Simplemente usamos @Html.BeginForm() para crear un elemento <form> en la página.  El botón de buscar haría un POST a la misma acción, esta vez incluyendo el valor digitado en la casilla de texto.  Con este valor, usted filtra los datos que están en la lista (su variable list) y listo.

    Sí, hablé de un botón de buscar.  Este método que le describí no va bien con el evento KeyUp de la casilla de texto.  Sería que el usuario primero escriba su palabra clave, y luego que presione el botón de buscar para realizar dicha búsqueda.

    El método AJAX necesitaría varios cambios en sus vistas.  La forma más directa sería hacer de la tabla una vista parcial para poder llamar a una acción en el contolador que solamente devuelva la tabla con los resultados de búsqueda.  De nuevo, en KeyUp se complica.  Le recomiendo un botón de Buscar.


    Jose R. MCP
    Code Samples

    • Marcado como respuesta MaxLuna jueves, 22 de marzo de 2018 23:13
    martes, 20 de marzo de 2018 17:31

Todas las respuestas

  • hola juan

    para que esa parte de jQuery? en fin no la entendi

    esta pagina me sirvió para busquedas basicas en asp mvc https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/adding-search

    martes, 20 de marzo de 2018 15:12
  • No he visto el enlace de greg_dorian, pero seguramente lo envía a un tutorial de cómo buscar en ASP.net MVC del lado del servidor.  Si es así, pues es una buena solución.

    Su problema actual radica en el hecho de que el HTML resultante en la página (y por lo tanto el 100% de los datos disponibles para su función de jQuery) contiene únicamente aquellos datos pertenecientes a la página que usted visualiza.

    En otras palabras, su búsqueda no puede ser hecha vía jQuery.  Tiene que actualizar la vista, ya sea por AJAX o bien recargándola.

    ASP.net MVC provee una forma sencilla de recargar la vista.  Simplemente usamos @Html.BeginForm() para crear un elemento <form> en la página.  El botón de buscar haría un POST a la misma acción, esta vez incluyendo el valor digitado en la casilla de texto.  Con este valor, usted filtra los datos que están en la lista (su variable list) y listo.

    Sí, hablé de un botón de buscar.  Este método que le describí no va bien con el evento KeyUp de la casilla de texto.  Sería que el usuario primero escriba su palabra clave, y luego que presione el botón de buscar para realizar dicha búsqueda.

    El método AJAX necesitaría varios cambios en sus vistas.  La forma más directa sería hacer de la tabla una vista parcial para poder llamar a una acción en el contolador que solamente devuelva la tabla con los resultados de búsqueda.  De nuevo, en KeyUp se complica.  Le recomiendo un botón de Buscar.


    Jose R. MCP
    Code Samples

    • Marcado como respuesta MaxLuna jueves, 22 de marzo de 2018 23:13
    martes, 20 de marzo de 2018 17:31