问题描述
我有一个带有 CRUD api 的评级系统。评级值为 int 0-5 我很想在标准剃须刀模板中显示星星而不是数字。
我查阅了演示CSS for star ratings via FontAwesome
但是宽度值没有填充颜色，白色和空星被包裹。 另外，我如何将 int 中的值写入 % 值
==== 这是我的详细信息页面 ====
@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
感谢您的帮助
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）