CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-3
drinu16
drinu16

Reputation: 795

Executing the same partial view multiple times in the same view

I am new to MVC and would like some help.

I have a view (below) which displays the products, next to each other. Till here everything is fine. 

@foreach (var item in Model)
{
    <a href="@Url.Action("showProductDetails", "Shared", new { ProductID = item.ProductID }, null)">
        <div class='OutsideDiv'  >
            <table class='DivBorder'>  
                <tr >  
                    <td class='title'>  
                        @item.ProductName    
                    </td> 
                </tr> 
                <tr >  
                    <td class='imageBox'> 
                        <img alt='' src="@item.ImageURL" /> 
                    </td>  
                </tr> 
                <tr>  
                    <td class='title'> 
                       @Html.Action("showAverageRating", "Rating" , new { ProductID = item.ProductID }  ) *************

                    </td>
                </tr>  
                <tr>  
                    <td class='desc'>
                        @item.Description  
                    </td>
                </tr>   
                <tr>
                    <td class='price'>
                        € @item.Price 
                    </td>  
                </tr> 
            </table>
        </div> 
        <script type='text/javascript'>   $('.DivBorder').mouseover(function () { $(this).css('border-color', '#0953cb'); $(this).css('background-color', '#eaeaea'); }); $('.DivBorder').mouseout(function () { $(this).css('border-color', '#bdbdbd'); $(this).css('background-color', '#f6f6f6'); });</script> 
    </a>
}

In the line marked with '****' above I am calling another view (showAverageRating) which for now is just displaying 5 rating stars with the first 3 starts selected.

<input class="star  " name="adv1" type="radio" /> 
<input class="star  " name="adv1" type="radio" />
<input checked="checked" class="star   " name="adv1" type="radio" /> 
<input class="star  " name="adv1" type="radio" /> 
<input class="star  " name="adv1" type="radio" />

The problem is that on the second item, when the rating stars view (above partial view) is called again, the stars are displayed next to the stars of the first product, picture below.

enter image description here

I think I have to use something else rather than Html.Action?

EDIT : showAverageRating Code 

public ActionResult showAverageRating(int ProductID)
{
    decimal averageRating = new RatingsService.RatingsClient().getAverageRating(ProductID);
    ViewData["averageRating"] = averageRating;
    return PartialView();
}

Upvotes: 0

Views: 1167

Answers (1)

drinu16
drinu16

Reputation: 795

The problem was that the name of the stars where identical, so I included the productID with their name, like below.

showAverageRating partial view

@{decimal averageRating = ViewBag.averageRating;}
@{int productID = ViewBag.productID;}

<div id="averageRating"  >
    <input class="star" name="star+@productID" type="radio" /> 
    <input class="star  " name="star+@productID" type="radio" />
    <input checked="checked" class="star   " name="star+@productID" type="radio" /> 
    <input class="star  " name="star+@productID" type="radio" /> 
    <input class="star  " name="star+@productID" type="radio" />  
</div>

Upvotes: 1

Related Questions