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

您要处理两个独立的问题。服务器端，您使用的是视图组件，而客户端端，您所拥有的只是浏览器从作为响应收到的HTML文档中创建的DOM。当您想要做一些事情，例如用服务器上的一些新内容替换页面的一部分时，您必须向服务器发出新请求以获取所需的内容，然后用该内容手动替换DOM的一部分。换句话说，从客户端的角度来看，不存在视图组件之类的东西，并且它不知道或不在乎响应的构造方式。

这意味着您需要利用AJAX，这是一种客户端机制，用于向服务器发出请求，而不会导致浏览器的视图完全改变。该AJAX请求将需要通过服务器上的某个终结点来提供服务，因此您需要一个可以响应该请求并返回所需内容的操作。该内容将是您需要在服务器端呈现的视图。如果您想在该视图中使用视图组件，当然可以，但是不能简单地请求视图组件本身。

使用Ajax动态更新ViewComponent

1 个答案: