在视图上自动更新 ViewComponent

Question

我目前有这个看法：

但是每当我向购物车添加东西时，它都不会自动更新计数。仅当我刷新页面时。

我怎样才能让它自动更新？它在 _Layout 视图上带有一个视图组件。

购物车视图组件

public class CartViewComponent : ViewComponent
    {
        private readonly ApplicationDbContext _context;
        private readonly SignInManager<UserModel> _signInManager;
        private readonly UserManager<UserModel> _userManager;

        public CartViewComponent(
            ApplicationDbContext context, 
            SignInManager<UserModel> signInManager, 
            UserManager<UserModel> userManager)
        {
            _context = context;
            _signInManager = signInManager;
            _userManager = userManager;
        }

        public int CheckIfOrderExists()
        {
            var userId = Request.HttpContext.User.FindFirstValue(ClaimTypes.NameIdentifier);

            OrderMain orderMain = _context.OrderMains.Where(o => o.user_id == userId).FirstOrDefault();
            if (orderMain != null)
            {
                return orderMain.id;
            }
            else
            {
                return 0;
            }

        }

        public int CountItemsInShoppingCart(int order_id)
        {
            var result = (from orderlines in _context.OrderLines
                          join items in _context.Items on orderlines.item_id equals items.id
                          join ordermains in _context.OrderMains on orderlines.order_id equals ordermains.id
                          where orderlines.order_id == order_id
                          select orderlines).Count();

            return result;
        }

        public IViewComponentResult Invoke()
        {
            int order_id = CheckIfOrderExists();
            int count = CountItemsInShoppingCart(order_id);
            ViewBag.count = count;

            return View(ViewBag.count);
        }
    }

默认.cshtml

<span class="badge">@ViewBag.count</span>

_Layout.cshtml

...
<li>
    <a asp-area="" asp-controller="ShoppingCart" asp-action="Index">
        <span style="color:black;" class="glyphicon glyphicon-shopping-cart"></span>
        @await Component.InvokeAsync("Cart")
    </a>
</li>
...

Answer 1

这里有一个服务器端和客户端组件。首先，视图组件只是服务器端的东西。一旦它被呈现并且服务器将响应返回给客户端，那么它是一个视图组件的事实就完全无关紧要了。客户端的所有内容都是 DOM 中的节点集合。

在客户端，如果您只想使用来自服务器的新信息更新页面的某些部分，则需要发出 AJAX 请求。这背后的 JavaScript 对象XMLHttpRequest，就是您所说的“瘦客户端”。它只是发出请求并接收响应，但它不会自行执行任何操作，例如渲染、向 DOM 添加内容等。这取决于您作为开发人员来确定如何处理来自服务器的响应以及如何处理它。

在这方面，您有几个选择。首先，您可以让服务器返回带有一些 HTML 的部分。您不能直接请求或返回您的视图组件，因此您需要一个返回的操作PartialView，以及一个调用您的视图组件的相应部分视图：

public IActionResult GetCart() =>
    PartialView("_Cart");

然后，在_Cart.cshtml：

@await Component.InvokeAsync("Cart");

然后，在对 AJAX 请求的回调中，您将选择页面上现有的“Cart”父元素，并将其替换为从服务器返回的新 HTML。

第二个选项是简单地使用一个端点，将当前购物车项目计数作为 JSON 返回。例如：

{
    "items": 3
}

然后，在你的 AJAX 回调中，你可以用这个数字替换徽章的文本。