如何将 ViewBag/ViewData 从 PartialView 传递到 ASP.NET Core 中的父视图？

Question

我需要在其父视图中获取我的 ViewData["CurrnetPageId"] 的值，该值位于返回局部视图的操作方法中。

我的父操作方法 ShowSingleProduct 看起来像这样：

[Route("/Single/{id}")]
public IActionResult ShowSingleProduct(int id)
{
    var product = _productService.GetProductById(id);

    if (product.DiscountId != null)
    {
        ViewData["PriceWithDiscount"] = _discountService.GetPriceAfterDiscount(product.Price, product.Discount.PercentValue);
    }
    else
    {
        ViewData["PriceWithDiscount"] = 0;
    }

    return View(product);
}

还有一个名为 _ShowComments 的子操作，其中 returns PartialView():

public IActionResult _ShowComments(int id, int take = 2, int pageId = 1)
{
    ViewData["CurrnetPageId"]= pageId;
    var comments = _productService.GetAllCommentsByProductId(id, take, pageId);
    return PartialView(comments);
}

当我需要在子视图中获得 ViewData["CurrnetPageId"]= pageId; 的值时，在父视图中，将 null 设置为 ViewData["CurrnetPageId"]= pageId;!!

我使用 jQuery/ajax 进行了尝试，如下所示（这是在父视图 ShowSingleProduct.cshtml 中）：

@{
    var currentPage = ViewData["CurrnetPageId"];
}
.
.
<div class="text-center">
    <button onclick="showMoreComments(@currentPage)" class="btn btn-outline-accent" type="button"><i class="ci-reload me-2"></i> See More.. </button>
</div>
.
.
function showMoreComments(id) {
     $.ajax({
                url: "/Products/_ShowComments",
                type: "get",
                dataType: "html",
                data: { id:@Model.ProductId, pageId: id }
            }).done(function (res) {
                $(".product-review").html(res);
      });
<script>

</script>

有人能帮忙吗？

Answer 1

ViewData只在页面渲染时起作用。对于您的父视图第一次呈现，它没有任何价值。当你点击按钮时，虽然它设置了值，但正如我之前所说，ajax默认不会更新整个页面，你使用$(".product-review").html(res)更新元素中的数据class="product-review" 这里。因此只会更新此元素中的代码。其他元素将保留之前的值。

我建议您使用 localStorage 来存储客户端数据。

这是一个您可以遵循的简单演示：

查看：

<div class="text-center">
    <button onclick="showMoreComments()" class="btn btn-outline-accent" type="button"><i class="ci-reload me-2"></i> See More.. </button>
</div>

<div class="product-review">

</div>
@section Scripts
{
    <script>
        localStorage.setItem("pageId",1);
        function showMoreComments() {
            var id =parseInt(localStorage.getItem("pageId"));
            $.ajax({
                    url: "/Products/_ShowComments",
                    type: "get",
                    dataType: "html",
                    data: { id:@Model.ProductId, pageId: id }
                }).done(function (res) {
                    id=id+1;
                    localStorage.setItem("pageId",id);
                    console.log(localStorage.getItem("pageId"));
                    $(".product-review").html(res);
               
            });
        }
</script>

}

控制器：

public IActionResult _ShowComments(int id, int take = 2, int pageId = 1)
{
    //ViewData["CurrnetPageId"] = pageId;
    var comments = _productService.GetAllCommentsByProductId(id, take, pageId);
    return PartialView(comments);

}

如何将 ViewBag/ViewData 从 PartialView 传递到 ASP.NET Core 中的父视图？

How to pass a ViewBag/ViewData from a PartialView to the parent view in ASP.NET Core?

jquery

asp.net-core

asp.net-core-mvc

partial-views

viewdata