Un Buscador, JQuery AJAX, HighLight, EF y MVC

30. April 2011 00:37 by Oscar.SS in Desarrollo Web, Herramientas  //  Tags: , , ,   //   Comments (3)

Pues lo que dice el título del post, hoy vamos a ver un "popurry" de varias teconologías para dotar de cierta funcionalidad a un simple buscador.

El buscador implementado con ASP.NET MVC 3 realizará una llamada al servidor por AJAX utilizando JQuery. Desde el servidor utilizaremos Entity Framework como la capa de acceso a la base de datos.

En cliente, también haremos uso de un plugin muy ligero llamado HighLight que nos permite marcar con distintos estilos el texto de una página HTML. Así podremos dotar a nuestro buscador con dos funcionalidades bastante interesantes de cara al usuario, mostrar el número de resultados obtenidos y resaltar el texto de búsqueda en todas las coincidencias.

 

 

 

El Modelo

Como hemos mencionado antes, en el modelo utilizaremos Entity Framework como capa de acceso a los datos que estarán almacenados en la conocía base de datos Northwind de Microsoft. Para simplificar el ejemplo haremos la consulta sobre una única tabla llamada Customers.

 

 

Los campos en los que se intentará la coincidencia de la cadena de texto son CompanyName, ContactName, ContactTitle, City y Country. Una vez creado nuestro contexto de datos con Entity Framework escribiremos una clase en el modelo que permita manegar las operaciones sobre la entidad Customer.

 

    public class CustomerManager
    {
        ContextoDatos ctxDatos 
= new ContextoDatos();

        public 
List<Customer> CustomersSearch(string text)
        {
            var result 
from c in ctxDatos.Customers where 
                         c.CompanyName.Contains(text) ||
                         c.ContactName.Contains(text) ||
                         c.ContactTitle.Contains(text) ||
                         c.City.Contains(text) ||
                         c.Country.Contains(text)
                         select c
;

            return 
result.ToList();
        
}
    }

 

Como se puede apreciar es muy sencillo. Tenemos un único método CustomersSearch() que al pasarle la cadena de búsqueda realiza con LINQ el filtrado sobre todos los Customers. Desde luego el filtrado se puede afinar más, por ejemplo teniendo en cuenta las mayúsculas o minúsculas, pero para este ejemplo es suficiente.

 

El Controlador

No hay mucho que comentar del controlador. Tendremos una acción Search() de tipo GET que será nuestro punto de entrada en la aplicación y devolverá la UI del buscador. Y otra acción Search(string text) de tipo POST que toma el texto introducido por el usuario.

 

    public class CustomerController : Controller
    {
        CustomerManager cm 
= new CustomerManager();

        
[HttpGet]
        
public ActionResult Search()
        {
            
return View();
        
}

        [HttpPost]
        
public ActionResult Search(string text)
        {
            var results 
cm.CustomersSearch(text);
            return 
PartialView("ResultsPartial", results);
        
}
    }

 

La segunda acción es la encargada de llamar al modelo y obtener los datos de los clientes filtrados por la cadena de busqueda introducida por el usuario. Como se puede apreciar devuelve una vista parcial.

 

El Script

En la vista tendremos el siguiente JavaScript utilizando la librería JQuery y el plugin anteriormente mencionado.

 

    <script type="text/javascript">
        
function buscarAjax() {
            $.ajax({
                url: 
'@Url.Action("Search", "Customer")',
                data: { text: $(
"#txBusqueda").val() },
                type: 
"post",
                cache: 
false,
                success: 
function (retorno) {
                    $(
"#contenido").html(retorno);
                    
$('td').highlight($("#txBusqueda").val());
                    
$('h3').text('Se han encontrado ' + $('.highlight').length + ' coincidencias');
                
},
                error: 
function () {
                    
alert("Se ha producido un error");
                
}
            })
;
        
}
    </script>

 

En primer lugar realizamos la llamada asíncrona pasandole la ruta de la acción (Customer/Search) que ejecutará la búsqueda y la cadena introducida por el usuario. También especificamos que la llamada se realice por el método POST y que no se guarde en cache.

Si la llamada asíncrona tiene éxito "pintamos" el HTML con los datos devueltos por el servidor. A continuación marcamos en toda la página el texto de búsqueda con una clase CSS que cambiará el color de fondo amarillo. También mostramos un mensaje con el número de coincidencias que se encuentran en la página. Si la operación no tiene éxito mostramos un mensaje de error.

Como vemos es un ejemplo muy sencillo pero igualmente válido para mostrar los fundamentos de colaboración entre todas estás tecnologías.

Podéis descargar el ejemplo de código completo:  BuscardorAjaxMvc.rar (164,81 kb)

Comments (3) -

Carlos Díez
Carlos Díez
5/10/2011 8:45:28 AM #

Me lo acabo de bajar, en cuanto tenga un rato lo pruebo, pero tiene muy buena pinta.
Un abrazo, compi.

Oscar.SS
Oscar.SS
5/10/2011 9:27:44 AM #

Bueno, la verdad es que es un ejemplo simple para salir del paso. ¡A veces uno no sabe de que escribir!   Wink

Si tienes cualquier duda, no dudes en comentarlo y si puedo ayudarte.......

Un saludo.

Diego
Diego
7/8/2012 2:15:18 AM #

Muy buen post lo probé y anda muy bien. gracias!!

Recent Comments

Comment RSS

Month List