Schroeder Consulting LLC

This blog explains the rating that is used in my portfolio app Blazor Picture Gallery that is described in my previous blog.

The code for this blog is a simplification of the Microsoft Blazor application “Best For You Recipes”.

My goal is to present my implementation of the rating. I created this project as a Blazor Web App using MudBlazor.

I created a component that I called Rating. Rating has two child components, a StarRating component and a StarRatingReview component.

<div class="item">
    <div class="star-rating-avg">
        <StarRating Value="@AverageStarReview.ToString()" ></StarRating>
        <div>
            <MudText Typo="Typo.body2">@numberOfReviews </MudText>
        </div>
    </div>
</div>
<StarRatingReview OnSubmitReview="SubmitReview"></StarRatingReview>

The StarRating component renders the star. This relies on well-known css.

Here is the mark-up for StarRatingReview.

<MudRadioGroup Value=@SelectedOption ValueChanged="Changed" T="string">
    <MudRadio Value=1.ToString()>1</MudRadio>
    <MudRadio Value=2.ToString()>2</MudRadio>
    <MudRadio Value=3.ToString()>3</MudRadio>
    <MudRadio Value=4.ToString()>4</MudRadio>
    <MudRadio Value=5.ToString()>5</MudRadio>
</MudRadioGroup>
<MudButton Variant="Variant.Filled" ButtonType="ButtonType.Button" Color="Color.Primary" OnClick="Submit">Submit</MudButton>

The Changed method updates SelectedOption. Submit handles the click event of the button. This event must percolate to the parent Rating. This is necessary so the parent can update the rating. To accomplish this, Rating passes an event handler to StarRatingReview.

[Parameter] public EventCallback<Review> OnSubmitReview { get; set; } 

It is the job of the child StarRatingReview component is to fire this event which is does when the button is clicked.

 async Task Submit()
 {
     if (!String.IsNullOrEmpty(SelectedOption))
     {
         var review = new Review
             {
                 Rating = Double.Parse(SelectedOption),
                 Text = "This is a review",
                 ItemId = 3
             };
         store.AddReview(review);
         SelectedOption = null;
         await OnSubmitReview.InvokeAsync(review);
     }
}

The review added here relies on test values that I use for demonstration purposes.

The reviews are stored in the database. Here, store is a service with the data access code. The event OnSubmitReview passes a review to the parent.

The markup in Rating specifies that the method SubmitReview will handle the event OnSubmitReview that StarRatingReview raised.

void SubmitReview(Review review)
{
    reviews.Add(review);
    AverageStarReview = reviews.Sum(i => i.Rating) / reviews.Count;
    numberOfReviews = $"Reviews {reviews.Count} ";
}

It updates Rating.

Here Reviews is a list of reviews that are retrieved in the Rating component when it is intialized.

protected override async Task OnInitializedAsync()
{
    reviews = await store.GetReviews(3);
    if (reviews.Any())
    {
        AverageStarReview = reviews.Sum(i => i.Rating) / reviews.Count;
        numberOfReviews = $"Reviews {reviews.Count} ";
    }

}

This blog has been about my implementation of a rating system. The user submits a rating and the user interface updates. This is achieved by an event that a child component raises which is handled by the parent component.