Rating stars 实施仅适用于第一条记录的索引

Question

我已经根据编辑评级系统的建议实施了它，它运行良好。

现在我尝试在索引页上实现相同的功能。在第一次记录时它工作正常。但是在第二个记录上它不起作用。我也尝试过改变（现在评论）但它没有帮助。感谢您的支持。

!Picture of the system

=== 这是我的剃须刀页面代码 ========

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

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

@inject IViewLocalizer Localizer

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

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

<p>
    <a asp-page="/RatingfromCusContactToSupContact/Create">@Localizer["Create New"]</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.RatingfromCusContactOverview[0].RatingDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.RatingfromCusContactOverview[0].RatingSupContactId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.RatingfromCusContactOverview[0].RatingTitle)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.RatingfromCusContactOverview[0].RatingValue)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.RatingfromCusContactOverview[0].RatingText)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.RatingfromCusContactOverview[0].RatingReviewed)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.RatingfromCusContactOverview[0].CusContactId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.RatingfromCusContactOverview[0].CusContactFirstName)
                @Html.DisplayNameFor(model => model.RatingfromCusContactOverview[0].CusContactLastName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.RatingfromCusContactOverview[0].SupContactId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.RatingfromCusContactOverview[0].SupContactFirstName)
                @Html.DisplayNameFor(model => model.RatingfromCusContactOverview[0].SupContactLastName)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.RatingfromCusContactOverview)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.RatingDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.RatingSupContactId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.RatingTitle)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.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>
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.RatingText)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.RatingReviewed)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CusContactId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CusContactFirstName)
                    @Html.DisplayFor(modelItem => item.CusContactLastName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.SupContactId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.SupContactFirstName)
                    @Html.DisplayFor(modelItem => item.SupContactLastName)
                </td>
                <td>
                    <a asp-page="/RatingfromCusContactToSupContact/Edit" asp-route-id="@item.RatingId">["Edit"]</a>
                    <a asp-page="/RatingfromCusContactOverview/Details" asp-route-id="@item.RatingId">["Details"]</a>
                    <a asp-page="/RatingfromCusContactToSupContact/Delete" asp-route-id="@item.RatingId">["Delete"]</a>
                </td>
            </tr>
        }
    </tbody>
</table>
@section scripts{
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
    <script>

        //$("#ratingVal").on("change", function () {
        
        $(function () {
            var ratingValue =  @Html.Raw(Model.RatingfromCusContactOverview[0].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>
}

Answer 1

如果模型是一个列表，改变如下：

Index.cshtml:

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

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

<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.RatingfromCusContactOverview[0].RatingValue)
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.RatingfromCusContactOverview)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.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>
                        <span>@((double)item.RatingValue / 5 * 100 + "%")</span>
                    </div>
                </td>
            </tr>
        }
    </tbody>
</table>

@section scripts{
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
    <script>
        $(function () {
            var rateArr = @Html.Raw(Json.Serialize(Model.RatingfromCusContactOverview));
            $.each(rateArr, function (index, value) {
                var stars = $('.start_rate').get(index).children;
                for (var i = 0; i < value.ratingValue; i++) {
                    stars[i].classList.remove('fa-star-o');
                    stars[i].classList.add('fa-star');
                }
            });
        })
    </script>
}

Index.cshtml.cs:

public List<RatingfromCusContactOverview> RatingfromCusContactOverview { get; set; }

public void OnGet()
{
    RatingfromCusContactOverview = new List<RatingfromCusContactOverview>
    {
        new RatingfromCusContactOverview{ RatingValue = 1},
        new RatingfromCusContactOverview{ RatingValue = 3},
        new RatingfromCusContactOverview{ RatingValue = 5},
    };
}

结果：

Rating stars 实施仅适用于第一条记录的索引

Rating stars implementation works on index only on first record

razor

ratingbar

asp.net-core