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

I need to get the value of my ViewData["CurrnetPageId"] which is inside an action method returning a partial view, in its parent view.

My parent action method called ShowSingleProduct looks like this:

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

And there is a child action called _ShowComments which 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);
}

When I need to have the value of ViewData["CurrnetPageId"]= pageId; in the child view, at the parent view, setting null as a value to ViewData["CurrnetPageId"]= pageId;!!

I tried it by using jQuery/ajax as shown below (this is within the parent view ShowSingleProduct.cshtml):

@{
    var currentPage = ViewData["CurrnetPageId"];
}
.
.
<div >
    <button onclick="showMoreComments(@currentPage)"  type="button"><i ></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>

Can anyone help?

CodePudding user response：

ViewData only works when page rendering. For the first time your parent view render, it does not have any value. When you click the button, although it set the value, but as what I said before, ajax will not update the whole page by default and you use $(".product-review").html(res) update the data in the element here. So only the code in this element will be updated. Other element will keep the value before.

I suggest you using localStorage to store the client side data.

Here is a simple demo you could follow:

View:

<div >
    <button onclick="showMoreComments()"  type="button"><i ></i> See More.. </button>
</div>

<div >

</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>

}

Controller:

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

}