Passing data from Action Method returning "PartialView()" into the parent View | using ASP.NET Core MVC and jQuery ajax

Question

This is my main view named _ShowSingleProduct.cshtml:

<div class="col-md-7">
            <!-- Review-->
            <div class="product-review pb-4 mb-4 border-bottom">
                 //*Here I'm going to load my comments*
            </div>

            <div class="text-center">
                <button onclick="showMoreComments()" class="btn btn-outline-accent" type="button"><i class="ci-reload me-2"></i>بیشتر دیدن</button>
            </div>
</div>

I'm going to load my data(which are some comments from the users) inside a <div> with class="product-review" using ajax.

This is my Javascript code:

$(function() {
     ShowComment();
});

function ShowComment() {
      $(".product-review").load("/Products/_ShowComments/"+ @Model.ProductId);
};

Everything is ok now!

But I need to update my comments using ajax by every clicking on the <button> with

<button onclick="showMoreComments()" class="btn btn-outline-accent" type="button">
    <i class="ci-reload me-2"></i>بیشتر دیدن</button>

Here is the target action method which returns the partial view:

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

My question is that how to take the value of ViewBag.CurrnetPageId to my parent view (_ShowSingleProduct.cshtml) because every time I need it, it returns me null; I tried the following way:

@{
     var currentPage=ViewBag.CurrnetPageId;
}

<script>
function showMoreComments() {
       var currentPageId =@currentPage;
       $(".product-review").load("/Products/_ShowComments?id=" + @Model.ProductId+"&pageId=" + currentPageId);
};
<script>

but still considering the currentPageId variable as null!

Can anyone help me?

Drandell

Answer 1

Child actions follow a different controller/model/view lifecycle than parent actions. As a result they do not share ViewData/ViewBag.

You can try this method.

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

In your Partial View (Products/_ShowComments) , use @ViewBag.CurrnetPageId to receive the data

//........

// add this code to save the data
<input id="currentPageId" [email protected] type="hidden"/>
//......

Finally, When load the partial view in parent view, Use $("#currentPageId").val() to get the value of @ViewBag.CurrnetPageId

<script>
function showMoreComments() {
   $(".product-review").load("/Products/_ShowComments?id=" + @Model.ProductId +"&pageId=" + $("#currentPageId").val());
}
<script>

Sternum