Razor Pages Core 3.1 中的购物车实现更新项目计数标签

Question

我想创建一个匿名购物车，一个新用户访问该网站，他们将产品添加到他们的购物车中，创建一个 cookie 来存储用户 guid 和总项目数。实际的购物车存储在数据库中。添加新项目使用 ajax 调用服务器端方法。

我的问题是如何在导航栏中实现一个标签，以在项目计数发生变化时显示项目数量。添加项目不会回发或转到购物篮概览。

我想简单地将购物车链接和文本作为部分内容，从更新的 cookie 中读取总数并刷新，但我不确定是否可以从另一个页面刷新部分内容。

其他人是怎么做到的？只需使用 Javascript 更新标签？

Answer 1

您可以轻松使用局部视图。当购物车更改时，返回一个部分视图作为输出。并根据您的口味设计局部视图。我输入一个代码作为例子

html代码：

<span id="framebasket">
     @Html.Partial("_Basket")
</span>

_篮子部分：

 <div class="col-level1-14">
      <div class="row-new padding-r-25">
         <span class="color-black style-font-12-sb">@p.ProductName</span>
       </div>
       <div class="row-new padding-r-25">
          <span class="color-black style-font-12-sb">@p.ColorTitle</span>
       </div>
                   
       <div class="row-new padding-r-25">
           <span class="style-font-12-sb color-888">Count: </span>
           <span class="style-font-12-sb color-888">@item.Count</span>
           @if (p.ShowOfferPrice.Value)
            {
                 total = total + (p.OfferPrice * item.Count);
                <span class="float-l style-font-12-sb padding-t-5 color-888">@p.OfferPrice.ToPrice()</span>
            }
            else
            {
              total = total + (p.Price * item.Count);
              <span class="float-l style-font-12-sb padding-t-5 color-888">@p.Price.ToPrice()</span>
            }
      </div>
</div>

需要脚本：

<script>
$('.addtobasket').click(function () {
       showLoad();
       var basket = $(this).attr('basket');
       var inst = $('[data-remodal-id=modalbasket]').remodal();

       $.ajax({
         url: "/Basket/AddToBasket",
         data: { basket: basket },
         type: "Post",
         dataType: "Json",
         success: function (result) {
         $("#framebasket").html(result.HtmlBody);
         //this for aler The information was logged into the system to reassure the user
         inst.open();
         closeshowLoad();
        },
        error: function () {
         closeshowLoad();
       }
     });
   });
</script>

控制器示例：

[HttpPost]
public ActionResult AddToBasket(string basket)
{
    basket operation ...
    return Json(new JsonData()
    {
       HtmlMsg = "",
       HtmlBody = this.RenderPartialToString("_Basket", lst),
       Success = true,
    });
}

这只是一个一般性的解释。