评级系统如何将我的评级值 (0-5) 转换为宽度 %

Question

我有一个带 CRUD 的评级系统 api。评级值是 0-5 整数我希望在标准剃须刀模板中显示星星而不是数字。

我查看了演示

但是，宽度值并未填充颜色，而是包裹了白色和空心的星星。另外我怎么能把我的值写成一个%值

==== 这是我的详情页====

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

=== 这是我的 C# 代码 ======

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

看起来像这样

!Attached picture shows how it looks when it runs

感谢您的帮助

Answer 1

您的意思是要显示星星率和 int 值的百分比值吗？

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

结果：

评级系统如何将我的评级值 (0-5) 转换为宽度 %

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

rating-system

razor

asp.net-core