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)