Автоматическое обновление ViewComponent при просмотре - PullRequest
Новая
       39

Автоматическое обновление ViewComponent при просмотре

0 голосов
/ 26 ноября 2018

У меня сейчас есть это на мой взгляд:

Cart

Но всякий раз, когда я добавляю что-то в корзину, он не будет автоматически обновлять счет,Только когда я обновляю страницу.

Как сделать так, чтобы она автоматически обновлялась?Он с компонентом просмотра в представлении _Layout.

CartViewComponent 

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

Default.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>
...

Ответы [ 2 ]

0 голосов
/ 27 ноября 2018

Я фактически сделал это с помощью функции jQuery get вместо View Components.В функции get я извлекаю public int TotalCount() из моего ShoppingCartController.

В частичном представлении _Layout я создал скрипт jQuery, один для рендеринга текущего значения и один для обновления значения каждые 2 секунды: 

<script src="~/lib/jquery/dist/jquery.min.js">
</script>
<!-- rendering the current value -->
<script>
    $.get('/ShoppingCart/TotalCount', function (data) {
        $('#countCart').html(data);
    });
</script>
<!-- reloading the value every 2 seconds -->
<script>
    setInterval(function () {
        $('#countCart').load('/ShoppingCart/TotalCount');
    }, 2000)
</script>

И значок также находится в частичном представлении _Layout: 

<span class="badge" id="countCart"></span>
0 голосов
/ 26 ноября 2018

Здесь есть серверный и клиентский компоненты.Во-первых, компонент представления - это только вещь на стороне сервера.Как только он будет обработан и сервер вернет ответ клиенту, тот факт, что это был компонент представления, совершенно несущественен.Все это на стороне клиента - это набор узлов в DOM.

На стороне клиента, если вы хотите обновить только некоторую часть страницы новой информацией с сервера, вам нужно сделать AJAX-запрос,Объект JavaScript, стоящий за этим XMLHttpRequest, - это то, что вы бы назвали «тонким клиентом».Он просто делает запрос и получает ответ, но не выполняет ничего, как рендеринг, добавление материала в DOM и т. Д. Сам по себе.Вы, как разработчик, должны определить, как обрабатывать ответ от сервера и что с ним делать.

В связи с этим у вас есть несколько вариантов.Во-первых, вы можете сделать так, чтобы сервер возвращал частичное с некоторым HTML.Вы не можете запрашивать или возвращать свой компонент представления напрямую, поэтому вам потребуется действие, которое возвращает PartialView, и соответствующее частичное представление, которое вызывает ваш компонент представления: 

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

Затем в _Cart.cshtml:

@await Component.InvokeAsync("Cart");

В обратном вызове вашего запроса AJAX вы должны выбрать существующий родительский элемент «Корзина» на странице и заменить его новым HTML-кодом, возвращаемым с сервера.

Второй вариант - просто иметь конечную точку, которая возвращает текущее количество товаров в корзине в формате JSON.Например: 

{
    "items": 3
}

Затем в обратном вызове AJAX вы можете просто заменить текст значка на этот номер.

...