A continuación, seguimos con el tutorial sobre cómo implementar el típico botón de "Ver Más" con ASP.net y jQuery. En esta ocasión veremos como ocultar el botón cuando sea necesario y ver el cálculo a realizar para mostrar los productos que se requieren. En este caso, hemos puesto el ejemplo de una tienda online, pero tú lo puedes utilizar para lo que quieras. Sin más dilació, seguimos con el tutorial...
Construyendo la acción de un controlador JsonResult para convertir la vista en una cadena y recibir lo que necesitamos de él
Este es el código para este método:
[HttpPost]
[AllowAnonymous]
public JsonResult LoadMoreProduct(int size)
{
var model = _db.Products.OrderBy(p => p.ProductId).Skip(size).Take(4);
int modelCount = _db.Products.Count();
if (model.Any())
{
string modelString = RenderRazorViewToString("_LoadMoreProduct", model);
return Json(new { ModelString = modelString, ModelCount = modelCount });
}
return Json(model);
}
Parámetro LoadMoreProduct
En la acción LoadMoreProduct, el tamaño es el responsable de proporcionar un número para su uso en el método de escape, cada vez que hagas clic en el botón "Ver más" contamos cuántas veces se ha pulsado y se multiplica por el número de productos que queremos devolver que en este caso son 4 para enviarlo a este método y recibir una nueva serie de productos.
Variable LoadMoreProduct modelCount
Utilizamos esta variable para enviar el número total de productos de nuestra base de datos para que podamos calcular cuándo ocultar el botón "Ver más". Lo verás más claro una vez que veas la parte de JavaScript de la página.
Método RenderRazorViewToString
Este método es el responsable de coger la vista parcial y un modelo para darnos un snippet de html en forma de cadena. Aquí está la definición de RenderRazorViewToString que me he encontrado en Stackoverflow:
public string RenderRazorViewToString(string viewName, object model)
{
ViewData.Model = model;
using (var sw = new StringWriter())
{
var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext,viewName);
var viewContext =
new ViewContext(ControllerContext, viewResult.View,ViewData, TempData, sw);
viewResult.View.Render(viewContext, sw);
viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View);
return sw.GetStringBuilder().ToString();
}
}
LoadMoreProduct - enviar la cadena html y el número de productos a JavaScript
Al final, enviamos el ModelString a quien lo llame, y lo usamos para unir la cadena html en el DOM con algún efecto, y también enviamos el modelcount para contar cuántos productos dejó de mostrar. También ocultamos botón "Ver más" cuando no hay más productos que mostrar. No vamos a perder más tiempo aquí y saltaremos directamente a la parte del script.
Parte Javascript del Ver Más
Este es el código para la parte JavaScript. Siguiendo el código, voy a tratar de explicar lo que he hecho lo más detalladamente posible:
$(function () {
var loadCount = 1;
var loading = $("#loading");
$("#loadMore").on("click", function (e) {
e.preventDefault();
$(document).on({
ajaxStart: function () {
loading.show();
},
ajaxStop: function () {
loading.hide();
}
});
var url = "/Product/LoadMoreProduct/";
$.ajax({
url: url,
data: { size: loadCount * 4 },
cache: false,
type: "POST",
success: function (data) {
if (data.length !== 0) {
$(data.ModelString).insertBefore("#loadMore").hide().fadeIn(2000);
}
var ajaxModelCount = data.ModelCount - (loadCount * 4);
if (ajaxModelCount <= 0) {
$("#loadMore").hide().fadeOut(2000);
}
},
error: function (xhr, status, error) {
console.log(xhr.responseText);
alert("message : n" + "An error occurred, for more info check the js console" +
"n status : n" + status + " n error : n" + error);
}
});
loadCount = loadCount + 1;
});
});
En la primera línea se define la variable loadCount, variable que multiplicaremos por cuatro, ya que tenemos cuatro productos que ya están en la página. Enviamos este número a nuestro parámetro de acción para mostrar otros cuatro. Lo hacemos mediante la asignación de tamaño y lo enviamos a nuestra acción. La próxima vez que se haga clic en el botón "Ver más" multiplicaremos 4 productos por 2 y recibimos 8, por lo que necesitamos saltarnos estos 8 productos y recibir otros cuatro.
La siguiente parte es importante, observa el código con atención:
$(data.ModelString).insertBefore("#loadMore").hide().fadeIn(2000);
La siguiente parte, es el código que utilizamos para calcular cuando tenemos que esconder nuestro botón de "Ver Más":
var ajaxModelCount = data.ModelCount - (loadCount * 4);
if (ajaxModelCount <= 0) {
$("#loadMore").hide().fadeOut(2000);
Aquí multiplicamos el loadCount por cuatro, y luego restamos el número de data.ModelCount. Recibimos el modelcount que son todos los productos de la base de datos a nuestra acción del controlador cada vez que llamamos a la acción LoadMoreProduct. Si ejecutamos el ajaxModelCount y es cero o menos, sabremos que no tenemos más productos que mostrar y simplemente esconderemos el botón.
La parte del código que contiene el ajaxStart y ajaxStop, es para mostrar la animación de carga en nuestro botón. No es obligatorio per ayudará al usuario a entender lo que está ocurriendo.
Con esto concluimos el tutorial de implementar un botón de "Ver Más" con ASP.net jQuery. Esperamos que haya quedado todo claro y sepas aplicarlo a tus proyectos. ¿Tienes un tutorial que te gustaría compartir con todo el mundo? Envíanoslo y lo publicaremos sin problemas.