User706400337 posted
I have different categories on my Index.cshtml and on clicking of any of the categories, I am displaying the products of that category. The html containing the product list is updated with a partial view on the success of $.ajax. The products are displayed
according to the category selected, but for a fraction of a second the top part of the view is displayed before the updating of the <div>.
My Index page.
<section id="portfolio" class="section-bg">
<div class="container" id="focusdiv" tabindex="-1">
<header class="section-header">
<h3 class="section-title">Our Portfolio</h3>
</header>
<div id="listproducts" class="text-center">
<ul id="portfolio-flters">
<li><a id="all" href="#">All </a></li>
<li>
<a id="inserts" href="#" data-toggle="popover" title="The optimum usage of the Insert has to be determined by having a controlled low flank wear to reuse the Insert.
Reworking can be done only on Inserts with minimum Flank Wear or regular Flank Wear.">
Inserts
</a>
</li>
<li><a id="cutters" href="#">Cutters</a></li>
<li><a id="angular" href="#">Angular Heads</a></li>
<li><a id="special" href="#">Specialized-Customized</a></li>
<li><a id="dialholders" href="#">Dial Holders</a></li>
</ul>
<input id="currentcategory" type="hidden" value="all" />
</div>
<div id="displayproducts">
@{Html.RenderAction("AllProducts" );}
</div>
</div>
</section><!-- #portfolio -->
My partial view
@model Monotech.Models.ProductViewModel
@if (Model.Products != null)
{
<div id="firstdiv" class="container">
<div class="row">
@foreach (var product in Model.Products)
{
<div class="col-sm-4 col-lg-3">
<div class="product">
<a href="#" class="img-prod">
@if (product.ImageUrl != null)
{
<img class="img-fluid" src="@Url.Content(product.ImageUrl)">
}
</a>
<div class="portfolio-info">
<h4>@product.Name</h4>
</div>
</div>
</div>
}
</div>
</div>
<div>
<nav aria-label="Page navigation example">
<ul class="pagination">
@if (Model.Pager != null && Model.Pager.TotalPages > 1)
{
if (Model.Pager.CurrentPage > 1)
{
<li>
<a href="#" data-pageNo="@Model.Pager.CurrentPage - 1">Previous</a>
</li>
}
for (var page = Model.Pager.StartPage; page <= Model.Pager.EndPage; page++)
{
string activeClass = Model.Pager.CurrentPage == page ? "active bg-info" : string.Empty;
<li>
<a href="#" data-pageNo="@page">@page</a>
</li>
}
if (Model.Pager.CurrentPage < Model.Pager.TotalPages)
{
<li>
<a href="#" data-pageNo="@Model.Pager.CurrentPage + 1">Next</a>
</li>
}
}
</ul>
</nav>
</div>
}
My $.ajax function():
$("#dialholders").click(function () {
var category = 'dialholders';
$("#currentcategory").val(category);
$.ajax({
url: "/Home/ToolsCategory",
type: "GET",
data: {
category: category
},
success: function (data) {
$("#displayproducts").html(data);
$("#focusdiv").attr("tabindex", -1).focus();
// $('body').scrollTo('#focusdiv');
},
});
});
The action method of the Home controller
[HttpGet]
public ActionResult ToolsCategory(string category, int? pageNo)
{
ProductViewModel products = new ProductViewModel();
ProductView productview = new ProductView();
var pageSize = 10;
int totalRecords;
pageNo = pageNo.HasValue ? pageNo.Value > 0 ? pageNo.Value : 1 : 1;
if (category == "all" || category == null)
{
totalRecords = productview.GetAllProductsCount();
products.Products = productview.GetAllProducts(pageNo.Value, pageSize);
}
else
{
totalRecords = productview.GetProductsCategoryCount(category);
products.Products = productview.GetProductsCategoryWise(category, pageNo.Value);
}
products.Categories = productview.GetCategories();
products.Pager = new Pager(totalRecords, pageNo, pageSize);
return PartialView("_Products", products);
}
Please help me understand why this is happening.
The top carousel slider part of the razor view is displayed for a second before updating a <div> with the partial view .
