Dynamic ViewComponent update with ajax - ajax

Question

...text description of the problem at the bottom
I have this controller:
public class StoreController : Controller
{
ShopContext db;
public StoreController(ShopContext context)
{
db = context;
}
public IActionResult Index()
{
return View();
}
public ViewComponentResult ListOfProducts(int page)
{
return ViewComponent("ListOfProducts", page);
}
part of Index View:
<div class="row">
<div id="ListOfProducts"></div>
</div>
ListOfPoducts ViewComponent:
public class ListOfProducts : ViewComponent
{
private readonly ShopContext db;
public ListOfProducts(ShopContext context)
{
db = context;
}
public async Task<IViewComponentResult> InvokeAsync(int page)
{
int SkipCount = (page - 1) * 9;
var products = await db.Products
.OrderByDescending(a => a.Rating)
.Skip(SkipCount)
.Take(9)
.ToListAsync();
int CountOfProducts = await db.Products.CountAsync();
ViewBag.CountOfPage = CountOfProducts / 9;
if (ViewBag.CountOfPage % 9 == 0)
ViewBag.CountOfPage++;
ViewBag.Page = page;
return View("Default", products);
}
}
with this View:
#foreach (var product in Model)
{
<div class="col-md-4 col-xs-6">
#await Html.PartialAsync("_ProductCellPartial", product)
</div>
}
<partial name="_StorePagination"/>
StorePagination:
<ul class="store-pagination">
#if (ViewBag.CountOfPage <= 9)
{
for (int i = 1; i <= ViewBag.CountOfPage; i++)
{
<li>#i</li>
}
}
else
{
if (ViewBag.Page <= 4)
{
for (int i = 1; i <= 7; i++)
{
<li>#i</li>
}
<li><a>...</a></li>
<li>#ViewBag.CountOfPage</li>
}
else if (ViewBag.Page > 4 && ViewBag.Page <= ViewBag.CountOfPage - 3)
{
<li><a href="#store-anchor" >1</a></li>
<li><a>...</a></li>
for (int i = ViewBag.Page - 2; i <= ViewBag.Page + 2; i++)
{
<li>#i</li>
}
<li><a>...</a></li>
<li>#ViewBag.CountOfPage</li>
}
else if (ViewBag.Page > ViewBag.CountOfPage - 3 && ViewBag.Page <= ViewBag.CountOfPage)
{
<li>1</li>
<li><a>...</a></li>
for (int i = ViewBag.Page - 6; i <= ViewBag.CountOfPage; i++)
{
<li>#i</li>
}
}
}
</ul>
ProductCell - item in the product table(ViewPartial)
and this script:
$(document).ready(function () {
$(".store-pagination").children().children().click(function () {
event.preventDefault();
var id = $(this).attr("href"),
top = $(id).offset().top;
$('body,html').animate({ scrollTop: top }, 200)
$(".store-pagination").children().removeClass("active")
$(this).parent().addClass("active")
var page = $(this).text()
$("#ListOfProducts").load("/Store/ListOfProducts", "page=" + page);
})
});
About problem:
I want to make a dynamic change of a part of the page (going by pagination did not overload the all page). The problem is (as I understand it) that it is impossible to call ViewComponent from itself (I hope it's understandable). According to my code above, I call the Ajax request when I click on the page number of the goods list, but this does not work. And I tried to call this script outside ViewComponent and it worked (confirms what I said above).
How can I solve this problem?
...Sorry for my English, inexperience.

Answer 1

You're dealing with two separate things. Server-side, you're using a view component, but client-side, all you have is the DOM created by the browser from the HTML document it received as a response. When you want to do something like replace part of the page with some new content from the server, you have to make a new request to server to get the content you want and then manually replace the portion of the DOM with that. In other words, from the client-side perspective, there's no such thing as the view component, and it doesn't know or care how the response was constructed.
That means you'll need to utilize AJAX, which is the client-side mechanism for making a request to the server without causing the browser's view to change entirely. That AJAX request will need to be served via some endpoint on your server, so you'll need an action that can respond to the request and return the content you want. That content will be a view that you'll need to render server-side. If you want to utilize a view component in that view, you may of course, but you cannot simply request the view component itself.