Динамическое обновление ViewComponent с помощью AJAX

Question

... текстовое описание проблемы внизу У меня есть этот контроллер:

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);
    }

часть представления индекса:

 <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);
    }
}

с этим представлением:

@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><a href="#store-anchor">@i</a></li>
        }
    }
    else
    {
        if (ViewBag.Page <= 4)
        {
            for (int i = 1; i <= 7; i++)
            {
                <li><a href="#store-anchor">@i</a></li>
            }
            <li><a>...</a></li>
            <li><a href="#store-anchor">@ViewBag.CountOfPage</a></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><a href="#store-anchor">@i</a></li>
            }
            <li><a>...</a></li>
            <li><a href="#store-anchor">@ViewBag.CountOfPage</a></li>
        }
        else if (ViewBag.Page > ViewBag.CountOfPage - 3 && ViewBag.Page <= ViewBag.CountOfPage)
        {
            <li><a href="#store-anchor">1</a></li>
            <li><a>...</a></li>
            for (int i = ViewBag.Page - 6; i <= ViewBag.CountOfPage; i++)
            {
                <li><a href="#store-anchor">@i</a></li>
            }
        }
    }
</ul>

ProductCell - элемент в таблице продуктов (ViewPartial)

и этот скрипт:

$(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);             
            })
        });

О проблеме: я хочу динамически изменить часть страницы (переход по страницам не перегружал всю страницу).Проблема в том (насколько я понимаю), что невозможно вызвать ViewComponent от самого себя (надеюсь, это понятно).Согласно моему коду выше, я вызываю запрос Ajax, когда нажимаю на номер страницы списка товаров, но это не работает.И я попытался вызвать этот сценарий вне ViewComponent, и он сработал (подтверждает то, что я сказал выше).

Как я могу решить эту проблему?

... Извините за мой английский, неопытность.

Answer 1

Вы имеете дело с двумя отдельными вещами.На стороне сервера вы используете компонент представления, но на стороне клиента все, что у вас есть, это DOM, созданный браузером из документа HTML, который он получил в ответ.Если вы хотите сделать что-то вроде замены части страницы новым содержимым с сервера, вам нужно сделать новый запрос к серверу, чтобы получить нужный вам контент, а затем вручную заменить часть DOM на эту.Другими словами, с точки зрения клиента, нет такой вещи, как компонент представления, и он не знает и не заботится о том, как был создан ответ.

Это означает, что вам нужно использовать AJAX,который является клиентским механизмом для отправки запроса на сервер без полного изменения представления браузера.Этот AJAX-запрос необходимо будет обслуживать через какую-то конечную точку на вашем сервере, поэтому вам потребуется действие, которое может ответить на запрос и вернуть желаемое содержимое.Этот контент будет представлением, которое вам нужно будет визуализировать на стороне сервера.Если вы хотите использовать компонент представления в этом представлении , вы, конечно, можете, но вы не можете просто запросить сам компонент представления.