asp.net-corerazorrating-system

Rating system how can I transfer my rating value (0-5) into width %

I have a rating system with CRUD api. The rating value is int 0-5 I would love to show the stars instead of the figure in the standard razor template.

I looked up the demo CSS for star ratings via FontAwesome

However the value in width is not filling the colors and white and empty stars are wrapped. In addition how can I write my value in int to a % value

==== Here is my detail page ====

@page
@using Microsoft.AspNetCore.Localization
@using Microsoft.AspNetCore.Mvc.Localization
@model WorkCollaboration.Pages.RatingfromCusContactOverview.DetailsModel

@{
    ViewData["Title"] = "Details";
}

@inject IViewLocalizer Localizer

<h1>@Localizer["Details"]</h1>

<div>
    <h4>@Localizer["RatingsfromCusContactOverview"]</h4>
    <hr />
    <dl class="row">
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.RatingfromCusContactOverview.RatingDate)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.RatingfromCusContactOverview.RatingDate)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.RatingfromCusContactOverview.RatingSupContactId)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.RatingfromCusContactOverview.RatingSupContactId)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.RatingfromCusContactOverview.RatingTitle)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.RatingfromCusContactOverview.RatingTitle)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.RatingfromCusContactOverview.RatingValue)
            <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
            <span class="score">
                <div class="score-wrap">
                    <span class="stars-active" style="width:50%">
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                    </span>
                    <span class="stars-inactive">
                        <i class="fa fa-star-o" aria-hidden="true"></i>
                        <i class="fa fa-star-o" aria-hidden="true"></i>
                        <i class="fa fa-star-o" aria-hidden="true"></i>
                        <i class="fa fa-star-o" aria-hidden="true"></i>
                        <i class="fa fa-star-o" aria-hidden="true"></i>
                    </span>
                </div>
            </span>
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.RatingfromCusContactOverview.RatingValue)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.RatingfromCusContactOverview.RatingText)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.RatingfromCusContactOverview.RatingText)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.RatingfromCusContactOverview.RatingReviewed)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.RatingfromCusContactOverview.RatingReviewed)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.RatingfromCusContactOverview.CusContactId)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.RatingfromCusContactOverview.CusContactId)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.RatingfromCusContactOverview.CusContactFirstName)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.RatingfromCusContactOverview.CusContactFirstName)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.RatingfromCusContactOverview.CusContactLastName)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.RatingfromCusContactOverview.CusContactLastName)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.RatingfromCusContactOverview.SupContactId)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.RatingfromCusContactOverview.SupContactId)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.RatingfromCusContactOverview.SupContactFirstName)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.RatingfromCusContactOverview.SupContactFirstName)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.RatingfromCusContactOverview.SupContactLastName)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.RatingfromCusContactOverview.SupContactLastName)
        </dd>
    </dl>
</div>
<div>
    <a asp-page="/RatingfromCusContactToSupContact/Edit" asp-route-id="@Model.RatingfromCusContactOverview.RatingId">@Localizer["Edit"]</a>
    <a asp-page="/RatingfromCusContactOverview/Index">@Localizer["Back to List"]</a>
</div>

=== Here is my c# code ======

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    using Microsoft.EntityFrameworkCore;
    using WorkCollaboration.Data;
    using WorkCollaboration.Models;
    
    namespace WorkCollaboration.Pages.RatingfromCusContactOverview
    {
        public class DetailsModel : PageModel
        {
            private readonly WorkCollaboration.Data.WorkCollaborationContext _context;
    
            public DetailsModel(WorkCollaboration.Data.WorkCollaborationContext context)
            {
                _context = context;
            }
    
            public Models.RatingfromCusContactOverview RatingfromCusContactOverview { get; set; }
    
            public async Task<IActionResult> OnGetAsync(int? id)
            {
                if (id == null)
                {
                    return NotFound();
                }
    
                RatingfromCusContactOverview = await _context.RatingfromCusContactOverview.FirstOrDefaultAsync(m => m.RatingId == id);
    
                if (RatingfromCusContactOverview == null)
                {
                    return NotFound();
                }
                return Page();
            }
        }
    }

===== Here is my model =====

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

namespace WorkCollaboration.Models
{
    public class RatingfromCusContactOverview
    {
        [Key]
        [Display(Name = "Rating Id"), Required(ErrorMessage = "Rating Id Required")]
        public int RatingId { get; set; }
        [Display(Name = "Customer Contact Id"), Required(ErrorMessage = "Customer Contact Id Required")]
        public int RatingCusContactId { get; set; }
        [Display(Name = "Date"), Required(ErrorMessage = "Date Required")]
        public DateTime RatingDate { get; set; }
        [Display(Name = "Supplier Contact Id"), Required(ErrorMessage = "Supplier Contact Id Required")]
        public int RatingSupContactId { get; set; }
        [Display(Name = "Title"), Required(ErrorMessage = "Title Required")]
        public string RatingTitle { get; set; }
        [Display(Name = "Rating Value"), Required(ErrorMessage = "Rating Value Required")]
        public int RatingValue { get; set; }
        [Display(Name = "Rating Text")]
        public string RatingText { get; set; }
        [Display(Name = "Rating Reviewed Contact Id"), Required(ErrorMessage = "Rating Reviewed Required")]
        public int RatingReviewed { get; set; }
        [Display(Name = "Customer Contact Id")]
        public int CusContactId { get; set; }
        [Display(Name = "Customer Contact First Name")]
        public string CusContactFirstName { get; set; }
        [Display(Name = "Customer Contact Last Name")]
        public string CusContactLastName { get; set; }
        [Display(Name = "Supplier Contact Id")]
        public int SupContactId { get; set; }
        [Display(Name = "Supplier Contact First Name")]
        public string SupContactFirstName { get; set; }
        [Display(Name = "Supplier Contact First Name")]
        public string SupContactLastName { get; set; }
    }
}

It looks like this

!Attached picture shows how it looks when it runs

Thanks for helping

Solution

  • Do you mean that you want display the the stars rate and a percent value from a int value?

    Index.cshtml.cs:

    public class IndexModel : PageModel
{
    private readonly ILogger<IndexModel> _logger;

    public IndexModel(ILogger<IndexModel> logger)
    {
        _logger = logger;
    }

    [Display(Name = "Rating Value"), Required(ErrorMessage = "Rating Value Required")]
    public int RatingValue { get; set; }

    public void OnGet()
    {
        RatingValue = 2;
    }


    public void OnPost()
    {

    }

}

    Index.cshtml:

    @page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<style>
    i {
        color: #EEBD01;
    }
</style>

@Html.DisplayNameFor(model => model.RatingValue)
<div>
    <span class="start_rate">
        <i class="fa fa-star-o" aria-hidden="true"></i>
        <i class="fa fa-star-o" aria-hidden="true"></i>
        <i class="fa fa-star-o" aria-hidden="true"></i>
        <i class="fa fa-star-o" aria-hidden="true"></i>
        <i class="fa fa-star-o" aria-hidden="true"></i>
    </span>
</div>

<div id="percent">

</div>

@section scripts{
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
    <script>
        $(function () {
            var ratingValue = @Html.Raw(Model.RatingValue);
            var startlist = $('.start_rate').children();
            for (var i = 0; i < ratingValue; i++) {
                startlist[i].classList.remove('fa-star-o');
                startlist[i].classList.add('fa-star');
            }
            $('#percent').html(ratingValue/5 * 100 + "%")
        })
    </script>
}

    Result:

    enter image description here