Возврат значений на страницу Razor — запутанный Javascript или .cs?

Меня смущают ответы на аналогичный вопрос, но я также упростил свое приложение, удалив шаг, чтобы сделать его более понятным. Я надеюсь, что кто-нибудь сможет направить меня в правильном направлении и понять, что я делаю неправильно.

Отказ от ответственности: я не программист Javascript или программист asp.net. Я пытаюсь, но я еще не там. Если я задаю вопрос, то это потому, что, несмотря на то, что я прочитал много материала (и всегда перечитываю все, что было предложено) и задал вопросы, я все еще не понимаю или не пытаюсь заставить это работать самостоятельно после просмотр указанного материала не дал результатов. Я не задаю вопросы, потому что мне лень.

У меня есть приложение, которое должно записывать голоса в реальном времени. То есть кто-то нажимает кнопку-переключатель «Да», «Нет» или «Воздержаться», и голос записывается в столбцах «Да», «Нет» или «Воздержался». Существует 2 типа голосов: простое большинство и большинство в 2/3. Они определяются DDL. Если в качестве выбора DDL выбрано, например, «Простое большинство» и есть голос «За», количество голосов за простое большинство должно быть записано в столбце «Да». Это должно произойти для каждого супервизора на странице. Вот мой последний скриншот:

В настоящее время, когда я нажимаю любой переключатель в любой строке, в столбцах «Да», «Нет» или «Воздержался» не возвращается количество голосов. Кроме того, если щелкнуть переключатель для первого супервизора, а затем щелкнуть переключатель для следующего супервизора, первый проверенный переключатель станет непроверенным. Каким-то образом мой код сообщает странице, что ВСЕ переключатели находятся в одной группе - даже если это должны быть отдельные группы - по одной для каждого супервизора.

Область заголовка голосования взята из таблицы голосования, которая при объединении с таблицей супервизора становится таблицей рабочего голосования. Возможно, это запутанный способ сделать это, но я не был уверен, как еще я мог бы присоединиться к ним. Заголовок голосования (6 полей вверху страницы) создается отдельно, без остальной части страницы, и сохраняется в таблице голосования.

Таким образом, на странице «Ввести голоса» единственное, что должен сделать пользователь, — это щелкнуть каждую из групп переключателей, пока руководители голосуют для записи голосов. Затем пользователь нажимал кнопку «Обновить», и ВСЕ на этой странице было опубликовано в таблице «WorkingVote». Надеюсь, это имеет смысл.

Вот .cshtml (с моей попыткой использования Javascript):

<form method = "post">
    <input hidden asp-for = "Vote.VoteId" />
        <div class = "border p-3 mt-4">
            <div class = "row pb-2">
                <h2 class = "text-primary pl-3">Enter Votes</h2>
                <hr />
            </div>
            <div asp-validation-summary = "All"></div>
            <table class = "table table-borderless" style = "width:100%">
                <tr>
                    <td style = "width: 15%">
                        <div class = "mb-3">
                            <label asp-for = "Vote.VoteDate"></label>
                            <input asp-for = "Vote.VoteDate" id = "VoteDate" type = "date" class = "form-control" />
                            <span asp-validation-for = "Vote.VoteDate" class = "text-danger"></span>
                        </div>
                    </td>
                    <td style = "width: 10%">
                        <div class = "mb-3">
                            <label asp-for = "Vote.VoteCode"></label>
                            <input asp-for = "Vote.VoteCode" id = "VoteCode" type = "text" class = "form-control" />
                            <span asp-validation-for = "Vote.VoteCode" class = "text-danger"></span>
                        </div>
                    </td>
                    <td style = "width: 75%">
                        <div class = "mb-3">
                            <label asp-for = "Vote.VoteDesc"></label>
                            <input asp-for = "Vote.VoteDesc" id = "VoteDesc" class = "form-control" />
                            <span asp-validation-for = "Vote.VoteDesc" class = "text-danger"></span>
                        </div>
                    </td>
                </tr>
            </table>
            <table class = "table table-borderless" style = "width:100%">
                <tr>
                    <td style = "width: 25%">
                        <div class = "mb-3">
                            <label asp-for = "Vote.SupervisorStatus"></label>
                            <select asp-for = "Vote.SupervisorStatus" id = "SupervisorStatus" class = "form-select" asp-items = "@(new SelectList(Model.DisplayStatusData.OrderBy(x => x.StatusDesc),"StatusDesc", "StatusDesc"))" onchange = "assignSupervisorData()">
                                <option value = "" selected disabled>---Select Supervisor Status---</option>
                            </select>
                        </div>
                    <td style = "width: 25%">
                        <div class = "mb-3">
                            <label asp-for = "Vote.VoteType"></label>
                                <select asp-for = "Vote.VoteType" id = "VoteType" class = "form-select" asp-items = "@(new SelectList(Model.DisplayVoteTypeData.OrderBy(x => x.VoteTypeDesc),"VoteTypeDesc", "VoteTypeDesc"))" >
                                <option value = "" selected disabled>---Select Vote Type---</option>
                            </select>
                        </div>
                    </td>
                    <td style = "width: 50%">
                        <div class = "mb-3">
                            <label asp-for = "Vote.Committee"></label>
                                <select asp-for = "Vote.Committee" id = "Committee" class = "form-select" asp-items = "@(new SelectList(Model.DisplayCommitteeData.OrderBy(x => x.CommitteeDesc),"CommitteeDesc", "CommitteeDesc"))">
                                <option value = "" selected disabled>---Select Committee---</option>
                            </select>
                        </div>
                    </td>
                </tr>
            </table>
            <table class = "table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>
                            MUNICIPALITY
                        </th>
                        <th>
                            SUPERVISOR
                        </th>
                        <th>
                            SIMPLE
                        </th>
                        <th>
                            2/3
                        </th>
                        <th>
                            ACTIVE VOTE
                        </th>
                        <th>
                            YES
                        </th>
                        <th>
                            NO
                        </th>
                        <th>
                            ABSTAIN
                        </th>
                    </tr>
                </thead>
                <tbody>
                @foreach (var obj in Model.WorkingVote.OrderBy(i => i.Municipality))
                    {
                        <tr width = "100%">
                            <td width = "14%">
                                <div class = "mb-3">
                                    @Html.TextBoxFor(modelItem => obj.Municipality, new
                                    { disabled = "disabled", @readonly = "readonly", @class = "form-control", @style = "width: 125px", id  = "Municipality" })
                                </div>
                            </td>
                            <td width = "14%">
                                <div class = "mb-3">
                                    @Html.TextBoxFor(modelItem => obj.SupervisorName, new
                                    { disabled = "disabled", @readonly = "readonly", @class = "form-control", @style = "width: 175px" })
                                </div>
                            </td>
                            <td width = "12%">
                                <div class = "mb-3">
                                    @Html.TextBoxFor(modelItem => obj.SimpleMajority, new
                                    { disabled = "disabled", @readonly = "readonly", id = "SimpleMajority", @class = "form-control", @dir = "rtl", @style = "width: 75px" })
                                </div>
                            </td>
                            <td width = "12%">
                                <div class = "mb-3">
                                    @Html.TextBoxFor(modelItem => obj.TwoThirdsMajority, new
                                    { disabled = "disabled", @readonly = "readonly", id = "TwoThirdsMajority", @class = "form-control", @dir = "rtl", @style = "width: 50px" })
                                </div>
                            </td>
                            <td style = "width: 20%">
                                <div class = "form-group, mb-3">
                                    @foreach (var item4 in Html.GetEnumSelectList<ActiveVote>())
                                    {
                                        <input type = "radio" asp-for = "Vote.ActiveVote" value = "@item4.Text" onclick = "updateVoteData()" />

                                        @item4.Text
                                    }
                                </div>
                            </td>
                            <td width = "12%">
                                <div class = "mb-3">
                                @Html.TextBoxFor(modelItem => obj.YesVote, new { disabled = "disabled", @readonly = "readonly", id = "YesVote", @class = "form-control", @dir = "rtl", @style = "width: 100px" })
                                </div>
                            </td>
                            <td width = "12%">
                                <div class = "mb-3">
                                @Html.TextBoxFor(modelItem => obj.NoVote, new { disabled = "disabled", @readonly = "readonly",  id = "NoVote", @class = "form-control", @dir = "rtl", @style = "width: 100px" })
                                </div>
                            </td>
                            <td width = "12%">
                                <div class = "mb-3">
                                @Html.TextBoxFor(modelItem => obj.AbsVote, new { disabled = "disabled", @readonly = "readonly", id = "AbsVote", @class = "form-control", @dir = "rtl", @style = "width: 100px" })
                                </div>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
            <div>
                <button type = "submit" class = "btn btn-primary" style = "width:150px;">Update</button>
                <a asp-page = "Index" class = "btn btn-secondary" style = "width: 150px;">Back to List</a>
            </div>
        </div>
</form>

<div>
    @{
        var prevDisabled = !Model.WorkingVote.HasPreviousPage ? "disabled" : "";
        var nextDisabled = !Model.WorkingVote.HasNextPage ? "disabled" : "";
    }

    <a asp-page = "./Index"
       asp-route-pageIndex = "@(Model.WorkingVote.PageIndex - 1)"
       class = "btn btn-primary @prevDisabled">
        Previous
    </a>
    <br />
    <br />
    <a asp-page = "./Index"
       asp-route-pageIndex = "@(Model.WorkingVote.PageIndex + 1)"
       class = "btn btn-primary @nextDisabled">
        Next
    </a>

</div>

@section Scripts
{
    <script type = "text/javascript">

        const votes = [$("#Municipality")];
        var votetype = document.getElementById('VoteType');
        var sm = document.getElementById('SimpleMajority');
        var ttm = document.getElementById('TwoThirdsMajority');
        var radio = document.getElementById('ActiveVote');
        var yes = document.getElementById('YesVote');
        var no = document.getElementById('NoVote');
        var abs = document.getElementById('AbsVote');

        votes.forEach(radio.addEventListener("click", function updateVoteData() {
            if (radio.value === 'Yes' && $("#VoteType").value === 'Simple Majority') {
                radio.value = "Yes";
                this.checked = true;
                input.removeAttribute('disabled')
                input.value = radio.value;
                yes = $("#SimpleMajority").val();
                $("#YesVote").val(yes);
            }
            elseif (radio.value === 'No' && $("#VoteType").value === 'Simple Majority') {
                radio.value = "No";
                this.checked = true;
                input.removeAttribute('disabled')
                input.value = radio.value;
                no = $("#SimpleMajority").val();
                $("#NoVote").val(no);
            }
            elseif (radio.value === 'Abstain' && $("#VoteType").value === 'Simple Majority') {
                radio.value = "Abstain";
                this.checked = true;
                input.removeAttribute('disabled')
                input.value = radio.value;
                abs = $("#SimpleMajority").val();
                $("#AbsVote").val(abs);
            }
            elseif (radio.value === 'Yes' && $("#VoteType").value === '2/3 Majority') {
                radio.value = "Yes";
                this.checked = true;
                input.removeAttribute('disabled')
                input.value = radio.value;
                yes = $("#TwoThirdsMajority").val();
                $("#YesVote").val(yes);
            }
            elseif (radio.value === 'No' && $("#VoteType").value === '2/3 Majority') {
                radio.value = "No";
                this.checked = true;
                input.removeAttribute('disabled')
                input.value = radio.value;
                no = $("#TwoThirdsMajority").val();
                $("#NoVote").val(no);
            }
            elseif (radio.value === 'Abstain' && $("#VoteType").value === '2/3 Majority') {
                radio.value = "Abstain";
                this.checked = true;
                input.removeAttribute('disabled')
                input.value = radio.value;
                abs = $("#TwoThirdsMajority").val();
                $("#AbsVote").val(abs);
            }
            else
                {
                    ''
                }
        }));

    </script>
    <partial name = "_ValidationScriptsPartial"/>
}

А вот мой .cs для той же страницы.

[BindProperties]

public class EditModel : PageModel
{
    private readonly ApplicationDbContext _db;
    public Vote Vote { get; set; }
    public ActiveVote ActiveVote { get; set; }
    public Supervisor Supervisor { get; set; }
    public EditModel(ApplicationDbContext db)
    {
        _db = db;
    }

    public PaginatedList<WorkingVote>? WorkingVote { get; set; } = default!;

    public IEnumerable<Committee> DisplayCommitteeData { get; set; }
    public IEnumerable<VoteType> DisplayVoteTypeData { get; set; }
    public IEnumerable<Supervisor> DisplaySupervisorData { get; set; }
    public IEnumerable<Status> DisplayStatusData { get; set; }

    public async Task OnGetAsync(int Id, int? pageIndex)
    {
        Vote = _db.Vote.Find(Id);
        DisplayCommitteeData = await _db.Committee.ToListAsync();
        DisplayVoteTypeData = await _db.VoteType.ToListAsync();
        DisplaySupervisorData = await _db.Supervisor.ToListAsync();
        DisplayStatusData = await _db.Status.ToListAsync();

        IQueryable<WorkingVote> workingVote = (IQueryable<WorkingVote>)(from x in _db.Supervisor
                                           join y in _db.Vote on x.Status equals y.SupervisorStatus
                                           select new WorkingVote
                                           {
                                               VoteId = y.VoteId,
                                               VoteCode = y.VoteCode,
                                               VoteDate = y.VoteDate,
                                               VoteDesc = y.VoteDesc,
                                               VoteType = y.VoteType,
                                               Committee = y.Committee,
                                               Municipality = x.Municipality,
                                               SupervisorName = x.DisplayName,
                                               SimpleMajority = x.Simple,
                                               TwoThirdsMajority = x.TwoThirds,
                                               ActiveVote = y.ActiveVote,
                                               YesVote = y.YesVote,
                                               NoVote = y.NoVote,
                                               AbsVote = y.AbsVote,
                                           }); ;

        int casesPerPage = 20;
        WorkingVote = await PaginatedList<WorkingVote>.CreateAsync(
            workingVote, pageIndex ?? 1, casesPerPage);
    }

    public async Task<IActionResult> OnPost()
    {
        if (ModelState.IsValid)
        {
            _db.Vote.Update(Vote);
            await _db.SaveChangesAsync();
            TempData["success"] = "Votes cast successfully.";
            return RedirectToPage("Index");
        }
        return Page();
    }
}

Мои вопросы:

1. Могу ли я использовать Javascript для этого? Я получил противоречивые ответы.
2. Если да, то что не так с моим Javascript?
3. Если нет, то как мне заставить это работать на моем .cs?

Большое спасибо за понимание.

РЕДАКТИРОВАНИЕ ДЛЯ ДОБАВЛЕНИЯ: Обновлен Javascript. Сейчас идет работа над обновлением количества голосов в столбцах «Да», «Нет» и «Воздержался», НО приложение не УДАЛИТ число голосов в столбцах «Да», «Нет» или «Воздержался», если пользователь нажимает другой переключатель. Я удалил две строки «input.removeAttribute('disabled') «input.value = _value;», так как это вообще запрещало выбор другого переключателя. Думаю, мне нужны эти строки, но они расположены неправильно? Пользователь должен быть можно изменить переключатель на другой голос, но когда это произойдет, старый номер голоса необходимо удалить из столбца «старый голос» и добавить в новый. Прямо сейчас приложение продолжает добавлять номера каждый раз, когда вы нажимаете на переключатель. См. рис. Строка 1, я нажал все 3 переключателя, строки 2-4 я просто нажал один раз для каждой строки.

Обновленный Javascript:

    <script type = "text/javascript">

        const votes = $(".Municipality");
        $(".updateVoteData").click(function () {
            let _value = event.target.value;
            if (_value === 'Yes' && $("#VoteType")[0].value == 'Simple Majority') {
                _value = "Yes";
                this.checked = true;
                yes = $(this).parent().parent().prev().find(".SimpleMajority").val();
                $(this).parent().parent().parent().find(".YesVote").val(yes);
            } else if (_value === 'No' && $("#VoteType")[0].value == 'Simple Majority') {
                _value = "No";
                this.checked = true;
                no = $(this).parent().parent().prev().find(".SimpleMajority").val();
                $(this).parent().parent().parent().find(".NoVote").val(no);
            } else if (_value === 'Abstain' && $("#VoteType")[0].value == 'Simple Majority') {
                _value = "Abstain";
                this.checked = true;
                abs = $(this).parent().parent().prev().find(".SimpleMajority").val();
                $(this).parent().parent().parent().find(".AbsVote").val(abs);
            } else if (_value === 'Yes' && $("#VoteType")[0].value == '2/3 Majority') {
                _value = "Yes";
                this.checked = true;
                yes = $(this).parent().parent().prev().find(".TwoThirdsMajority").val();
                $(this).parent().parent().parent().find(".YesVote").val(yes);
            } else if (_value === 'No' && $("#VoteType")[0].value == '2/3 Majority') {
                _value = "No";
                this.checked = true;
                no = $(this).parent().parent().prev().find(".TwoThirdsMajority").val();
                $(this).parent().parent().parent().find(".NoVote").val(no);
            } else if (_value === 'Abstain' && $("#VoteType")[0].value == '2/3 Majority') {
                _value = "Abstain";
                this.checked = true;
                abs = $(this).parent().parent().prev().find(".TwoThirdsMajority").val();
                $(this).parent().parent().parent().find(".AbsVote").val(abs);
            }
        })
    </script>