Well, I need to do an infinite scroll in ASP.NET MVC, but I need to separate content on demand as suggested by the blog #, so that the Google robot can index my products.
Does anyone have a light there? My structure currently looks like this:
public ActionResult GetProducts(int pageIndex, string HeadingLink)
{
bool isFilters = !String.IsNullOrEmpty(HeadingLink) ? true : false;
var ParamIndex = new MySqlParameter { ParameterName = "@p_pageIndex", MySqlDbType = MySqlDbType.Int64, Value = pageIndex };
var ParamIsFilter = new MySqlParameter { ParameterName = "@p_isFilter", MySqlDbType = MySqlDbType.Bit, Value = isFilters };
var ParamLinkHeading = new MySqlParameter { ParameterName = "@p_linkHeading", MySqlDbType = MySqlDbType.VarChar, Value = HeadingLink };
var query = db.Database.SqlQuery<ProductTechnicalVM>
("CALL db_sitenei.SP_GetTechnicalProducts(?p_pageIndex, ?p_isFilter, ?p_linkHeading);"
, ParamIndex, ParamIsFilter, ParamLinkHeading)
.ToList();
return Json(query);
}
public ActionResult ProdutosTecnicos(string link)
{
ProductTechnicalVM model = new ProductTechnicalVM()
{
Headings = _LoadSideBarHeading()
};
List<BreadCrumbVM> breadCrumbVM = new List<BreadCrumbVM>();
breadCrumbVM.Add(BreadCrumbVM.CreateHome(Request.RequestContext));
breadCrumbVM.Add(new BreadCrumbVM()
{
Name = "Catálogo de Produtos"
});
ViewBag.BreadCrumb = breadCrumbVM;
return View(model);
}
var pageIndexes = 1;
$(document).ready(function () {
GetData();
var heightPage = $(document).height();
$("#btn-show-more").click(function () {
GetData();
//$("html, body").animate({ scrollTop: $(document).height() - (heightPage - 800) }, 1000);
$("html, body").animate({ scrollTop: $(document).height() }, 1000);
});
});
function GetData() {
$.ajax({
type: "POST",
url: '@Url.Action("GetProducts", "Lancamentos", new { Area = "" })',
data: { "pageIndex": pageIndexes, "HeadingLink": $("#UrlParam").val() },
beforeSend: function () {
console.log("Carregando...");
//$('#products-loading').html('<span>Aguarde..</span><img width="100" height="100" src="http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif">');},success:function(data){vartextotela="";
var cdnimage = "http://images.nei.com.br/Asset/lm/";
for (var i = 0; i < data.length; i++) {
textotela += "<div class='col-xs-4'>";
textotela += "<a target='_blank' style='text-decoration: none;' href='../produto/" + data[i].Link + "?id=" + data[i].Id + "'><div class='nei-product-box'>";
textotela += "<div class='nei-product-box-image'>";
textotela += "<img src='" + cdnimage + data[i].PrimaryImageId + data[i].FileExtension + "'>";
textotela += "</div>";
textotela += "<div>";
textotela += "<span class='nei-product-date'>" + data[i].CompanyName + "</span>";
textotela += "<h2 class='nei-product-title'>" + data[i].Product + "</h2>";
textotela += "<span class='nei-product-description'>" + data[i].DescriptionMetadata + "</span>";
textotela += "</div>";
textotela += "</div>"
textotela += "</div></a>";
console.log("Sucesso!!!");
pageIndexes++;
}
$("#products-list").html($("#products-list").html() + textotela);
},
error: function (result) {
console.error('Serviço falhou: ' + result.status + ' Tipo :' + result.statusText);
}
});
}
<div class="row" style="margin-top: 25px;">
<div class="col-xs-6">
<div id="products-loading"></div>
</div>
<div class="col-xs-6">
<div id="btn-show-more" class="btn btn-success">Mostrar mais produtos</div>
</div>
<div class="scroll-top-wrapper ">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
</div>[![The output of my html is empty by crawl][1]][1]