En los próximos dos artículos, os voy a explicar cómo implementar un botón de "Ver más" utilizando Asp.Net MVC y jQuery. Este botón se puede utilizar para multitud de cosas, pero en el caso de este artículo, yo lo usaré para mostrar una lista de productos ficticios para una tienda online. Voy a tratar de no complicar las cosas y explicar lo que he hecho de manera simple y directa.
En pocas palabras
Para decirlo de forma concisa, la forma en que vamos a implementar esta función es enviando un modelo a un método, este método genera una vista y se convierte en una cadena que adjuntaremos en el DOM, por supuesto necesitamos algo de código para calcular la cantidad de tiempo desde que hemos hecho clic en el botón "Ver más" y multiplicarlo con el número de productos que queremos cargar, para coger el número de productos que necesitamos. No os voy a molestar con más explicaciones aquí, vamos a saltar directamente al código y voy a explicaros cada parte en detalle.
Construyendo la vista del índice para mostrarlo en la página de productos
El primer paso es enviar nuestro modelo a la vista para, después, construir la vista de la interfaz de usuario. Lo importante aquí es que no podemos usar dos bucles foreach anidados, aquí necesitamos un bucle foreach para las filas de bootstrap y un bucle interno para la generación de los productos reales, para esta página de inicio, mostraremos cuatro productos en la página, cualquier producto posterior debe ser cargado usando el botón "Ver más".
Este es el código para nuestro controller action:
public ActionResult Index()
{
var model = _db.Products.OrderBy(p => p.ProductId).Take(4); ;
return View(model);
}
Y este es el código de la Vista:
@using LoadMoreMVCSample.Helpers @model IEnumerable<LoadMoreMVCSample.Models.Product> @{ ViewBag.Title = "LoadMore Sample - HamidMosalla.com"; } <br /> <br /> @foreach (var item in Model.Batch(4)) { <div class="row"> <div class="col-md-10"> @foreach (var subitem in item) { <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"
style="padding-right: 5px; padding-left: 5px;"> <div class="thumbnail"> <h4 class="text-center">
<span class="label label-default">@subitem.ProductName</span></h4> <p class="text-center" style="font-size: small;">
@subitem.ProductDate.ToLongDateString()</p> <a href="/Product/Details/@subitem.ProductId/@subitem.ProductName">
<img src="@subitem.ProductPicture"
alt="@subitem.ProductName" class="img-responsive"></a> <div class="caption"> <div class="row"> <div style="font-size: small;" class="col-md-12 col-xs-12 price"> @Html.Raw(subitem.ProductDescription) <a href="#">Read more...</a> </div> </div> <div class="row"> <div class="col-md-8"> <a href="#" class="btn btn-success"
style="width: 100%;">
<span class="glyphicon glyphicon-shopping-cart"></span>Add to Cart</a> </div> </div> </div> </div> </div> } </div> </div> } <br /> <p id="loadMore" style="text-align: center;"> <a class="btn btn-danger btn-lg"> LoadMore » <span> <img id="loading" style="display: none;" src="~/Content/ajax-loader.gif" /> </span> </a> </p> @section scripts{ <script src="~/Scripts/CustomScript/LoadMore.js"></script> }
Te habrás fijado en el uso de Batch aquí. Aquí está el código del método para esta característica que me he encontrado en Stackoverflow:
public static IEnumerable> Batch(
this IEnumerable source, int batchSize)
{
using (var enumerator = source.GetEnumerator())
while (enumerator.MoveNext())
yield return YieldBatchElements(enumerator, batchSize - 1);
}
private static IEnumerable YieldBatchElements(
IEnumerator source, int batchSize)
{
yield return source.Current;
for (int i = 0; i < batchSize && source.MoveNext(); i++)
yield return source.Current;
}
También puedes utilizar un sencillo bucle for para hacer la iteración, y para ser honesto, la única razón por la que he hecho esto de esta manera era que tenía curiosidad sobre cómo hacerlo anidado para cada bucle. Si lo deseas, puedes utilizar un simple bucle for, así:
For(int i = 0; i < 1; i++)
Habrás visto el script al final de la vista, ignoradlo de momento. Lo explicaré más adelante en esta misma serie de artículos.
Construir la vista parcial para convertir los productos cargados en una cadena
El siguiente paso es la construcción de una vista parcial, después enviaremos esta vista parcial y un modelo con nuestros productos, a un método para recibir la cadena con la que trabaja. Esta vista es bastante sencilla:
@model IEnumerable<LoadMoreMVCSample.Models.Product> <div class="row"> <div class="col-md-10"> @foreach (var item in Model) { <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"
style="padding-right: 5px; padding-left: 5px;"> <div class="thumbnail"> <h4 class="text-center">
<span class="label label-default">@item.ProductName</span></h4> <p class="text-center" style="font-size: small;">
@item.ProductDate.ToLongDateString()</p> <a href="/Product/Details/@item.ProductId/@item.ProductName">
<img src="@item.ProductPicture" alt="@item.ProductName" class="img-responsive"></a> <div class="caption"> <div class="row"> <div style="font-size: small;" class="col-md-12 col-xs-12 price"> @Html.Raw(item.ProductDescription) <a href="#">Read more...</a> </div> </div> <div class="row"> <div class="col-md-8"> <a href="#" class="btn btn-success"
style="width: 100%;"><span class="glyphicon glyphicon-shopping-cart">
</span>Add to Cart</a> </div> </div> </div> </div> </div> } </div> </div>
Este es el final de la primera parte, próximamente publicaremos la segunda parte. Estate atento a programacion.net si estás interesado en el tema y, ya sabes, si quieres que traigamos algún tutorial similar, indícanoslo en los comentarios.