How to save the rating?

Question

ASP.NET

Hello, I want to make a rating in the form of stars on my site. I have already made the rating itself, but I cannot save it.
Here's what I've already done:
The page on which the rating is located:

@page
@model MyWebSite.Pages.Company.DetailsModel
@{
    ViewData["Title"] = "Details";
}
@using Microsoft.AspNetCore.Mvc.Localization
@inject IViewLocalizer Localizer
<link rel="stylesheet" href="/css/rating.css">
<div class="container-fluid">
    <div class="container">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h1>@Localizer["Details"]</h1>
                    <div>
                        <h4>@Localizer["Company"]</h4>
                        //сам рейтинг:
                        <div class="rating-area">
                            <input type="radio" id="star-5" name="rating" value="5">
                            <label for="star-5" title="Оценка «5»"></label>	
                            <input type="radio" id="star-4" name="rating" value="4">
                            <label for="star-4" title="Оценка «4»"></label>    
                            <input type="radio" id="star-3" name="rating" value="3">
                            <label for="star-3" title="Оценка «3»"></label>  
                            <input type="radio" id="star-2" name="rating" value="2">
                            <label for="star-2" title="Оценка «2»"></label>    
                            <input type="radio" id="star-1" name="rating" value="1">
                            <label for="star-1" title="Оценка «1»"></label>
                        </div>
                        <hr />
                        <dl class="row">
                            <dt class="col-sm-2">
                                @Html.DisplayNameFor(model => model.Company.Title)
                            </dt>
                            <dd class="col-sm-10">
                                @Html.DisplayFor(model => model.Company.Title)
                            </dd>
                            <dt class="col-sm-2">
                                    @Html.DisplayNameFor(model => model.Company.Rank)
                                </dt>
                                <dd class="col-sm-10">
                                    @Html.DisplayFor(model => model.Company.Rank)
                                </dd>
                            <dt class="col-sm-2">
                                @Html.DisplayNameFor(model => model.Company.EnrollmentDate)
                            </dt>
                            <dd class="col-sm-10">
                                @Html.DisplayFor(model => model.Company.EnrollmentDate)
                            </dd>
                            <dt class="col-sm-2">
                                @Html.DisplayNameFor(model => model.Company.Thematics)
                            </dt>
                            <dd class="col-sm-10">
                                @Html.DisplayFor(model => model.Company.Thematics)
                            </dd>
                            <dt class="col-sm-2">
                                @Html.DisplayNameFor(model => model.Company.Bonus)
                            </dt>
                            <dd class="col-sm-10">
                                @Html.DisplayFor(model => model.Company.Bonus)
                            </dd>
                            <dt class="col-sm-2">
                                @Html.DisplayNameFor(model => model.Company.Description)
                            </dt>
                            <dd class="col-sm-10">
                                @Html.DisplayFor(model => model.Company.Description)
                            </dd>
                            <dt class="col-sm-2">
                                @Html.DisplayNameFor(model => model.Company.Images)
                            </dt>
                            <dd class="col-sm-10">
                                @Html.DisplayFor(model => model.Company.Images)
                            </dd>
                            <dt class="col-sm-2">
                                @Html.DisplayNameFor(model => model.Company.Video)
                            </dt>
                            <dd class="col-sm-10">
                                @Html.DisplayFor(model => model.Company.Video)
                            </dd>
                            <dt class="col-sm-2">
                                @Html.DisplayNameFor(model => model.Company.Topic)
                            </dt>
                            <dd class="col-sm-10">
                                @Html.DisplayFor(model => model.Company.Topic)
                            </dd>
                            <dt class="col-sm-2">
                                @Html.DisplayNameFor(model => model.Company.News)
                            </dt>
                            <dd class="col-sm-10">
                                @Html.DisplayFor(model => model.Company.News)
                            </dd>
                            <dt class="col-sm-2">
                                @Html.DisplayNameFor(model => model.Company.Price)
                            </dt>
                            <dd class="col-sm-10">
                                @Html.DisplayFor(model => model.Company.Price)
                            </dd>
                            <dt class="col-sm-2">
                                @Html.DisplayNameFor(model => model.Company.Tags)
                            </dt>
                            <dd class="col-sm-10">
                                @Html.DisplayFor(model => model.Company.Tags)
                            </dd>
                            <dt class="col-sm-2">
                                @Html.DisplayNameFor(model => model.Company.Owner)
                            </dt>
                        </dl>
                    </div>
                    <form action="https://www.paypal.com/donate" method="post" target="_top">
                        <input type="hidden" name="hosted_button_id" value="NMUMHG7VQM4FL" />
                        <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
                        <img alt="" border="0" src="https://www.paypal.com/en_BY/i/scr/pixel.gif" width="1" height="1" />
                    </form>
                    <div>
                        <a asp-page="./Edit" asp-route-id="@Model.Company.ID">@Localizer["Edit"]</a> |
                        <a asp-page="./Index">@Localizer["Back to List"]</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/css/rating.css"></script>

Trying to save rating:

const link = document.getElementById('star-1-link');
const link = document.getElementById('star-2-link');
const link = document.getElementById('star-3-link');
const link = document.getElementById('star-4-link');
const link = document.getElementById('star-5-link');
const lightRating = '/css/rating.css';
let currentRating = localStorage.getItem('rating');

(function(){
    if( !currentRating ) {
        currentRating = lightRating;
        localStorage.setItem('rating', currentRating);
    }
    link.setAttribute('href', currentRating);
})();

document.getElementById('star-1').addEventListener('click', e => {
    e.preventDefault();
    if( currentRating == lightRating ) {
        currentRating = lightRating;
    }
    link.setAttribute('href', currentRating);
    localStorage.setItem('rating', currentRating);
});

document.getElementById('star-2').addEventListener('click', e => {
    e.preventDefault();
    if( currentRating == lightRating ) {
        currentRating = lightRating;
    }
    link.setAttribute('href', currentRating);
    localStorage.setItem('rating', currentRating);
});

document.getElementById('star-3').addEventListener('click', e => {
    e.preventDefault();
    if( currentRating == lightRating ) {
        currentRating = lightRating;
    }
    link.setAttribute('href', currentRating);
    localStorage.setItem('rating', currentRating);
});

document.getElementById('star-4').addEventListener('click', e => {
    e.preventDefault();
    if( currentRating == lightRating ) {
        currentRating = lightRating;
    }
    link.setAttribute('href', currentRating);
    localStorage.setItem('rating', currentRating);
});

document.getElementById('star-5').addEventListener('click', e => {
    e.preventDefault();
    if( currentRating == lightRating ) {
        currentRating = lightRating;
    }
    link.setAttribute('href', currentRating);
    localStorage.setItem('rating', currentRating);
});

I focused on this tutorial - https://snipp.ru/html-css/rating-css . What am I doing wrong? Thanks in advance

Answer 1

You are trying to store all of this in the client's local storage.
I honestly do not want to understand, this is a bad way.
do something like /api/rating/filmid/ratingId POST
Well, correct the page so that it displays what is stored in the database.