asp.net-corerazorratingbar
Rating stars implementation works on index only on first record
I have implemented based on advise on edit rating system and it works fine.
Now I tried to implement the same on an index page. On first record it works fine. However on second record it does not work. I tried as well with on change (now commented) but it did not help. Tks for your support.
=== Here is my razor page code ========
@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>
}
Solution
If the model is a list, change like below:
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},
};
}
Result:
- Blazor: The type or namespace name 'ApplicationPartAttributeAttribute' does not exist in the namespace 'Microsoft.AspNetCore.Mvc.ApplicationParts'
- How can I validate multiple action parameters with ValidationAttribute in ASP.NET Core 3.0
- MVC ASP.NET Core Show detailed error for staging environment
- Microsoft.AspNetCore.OpenAPI generates document with schema $refs to previous properties of same type instead of the base schema itself
- EF Core CRUD Scaffold, show primary key in view?
- Cannot resolve scoped service from root provider .Net Core 2
- Azure SignalR - Client connection fails with 401-Unauthorized 'invalid_token. The signature key was not found'
- How to hide the Links column in the Swagger UI Responses section
- Blazor InputText: conditionally rendering an attribute
- The SSL connection could not be established, see inner exception. Docker problem
- Check if a string is half width or full width in C#
- Unable to invoke javascript function from blazor component
- Cannot remove DBContext from DI
- Send HTTP_1_1_REQUIRED from ASP.NET Core controller
- How to disable the component hierarchy in Blazor?
- IdentityServer4 in IIS being recycled due to app_offline.htm when using discovery endpoint sometimes
- Interact with the Virtualize component
- Cannot resolve scoped service 'xx.IEnumerable`1[xx.IDbContextOptionsConfiguration`1[xx.ExampleDbContext]]...' after upgrading from .NET 8 to .NET 9
- How i can add endpoint (or сatch a request and check its path) to BCL?
- How does the "Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore" package resolves types which are in "Microsoft.AspNetCore.dll"?
- Customize output Serilog
- Unhandled exception. System.InvalidOperationException
- Is it possible to use ASP.NET Core within an F# fsx script?
- How to send data with the size more than Signalr message size limit in Blazor?
- IDX12723: Unable to decode the payload '[PII of type 'System.String' is hidden
- UpdateRange method of Entity Framework Core does not work
- How to enable CORS in ASP.net Core WebAPI
- Why does my CORS configuration still block datatables from consuming an API?
- .NET return JSON without reformating
- .NET 8 & SQL Server 2016 - Contains() throws error