I have a razor page that is looking at a list of people and their votes. It is bringing up items like Municipality, Supervisor, Simple Majority, 2/3 Majority just fine, but when it comes to SelectedVote, it only put the value in the first record, not the rest. SelectedVote is based on the DDL of VoteType. It also will not be present when the page loads – even though it is my understanding that “onchange” will also do “onload”. Am I incorrect? Could someone please point me to what I am missing? Please be gentle. I am trying my best and I have spent hours reading and trying things before I posted this.
My ultimate objective is the user just needs to click the radio button for each supervisor record and it fills in the appropriate vote number (from the selected vote column) in either the yes, no or abstain columns. I know I have a lot to figure out yet.
.cshtml and section script follows:
<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: 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"))" onchange="assignVoteTypeData()">
<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>
SELECTED VOTE
</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" })
</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: 75px" })
</div>
</td>
<td width="12%">
<div class ="mb-3">
@Html.TextBoxFor(modelItem => obj.SelectedVote, new
{ disabled = "disabled", @readonly = "readonly", id = "SelectedVote", @class = "form-control", @dir = "rtl", @style = "width: 100px" })
</div>
</td>
<td width="12%">
<div id="ActiveVote" class="mb-3">
<label>
@Html.RadioButtonFor(modelItem => obj.ActiveVote, "Yes", new { id = "" })
<span>YES</span>
</label>
<label>
@Html.RadioButtonFor(modelItem => obj.ActiveVote, "No", new { id = "" })
<span>NO</span>
</label>
<label>
@Html.RadioButtonFor(modelItem => obj.ActiveVote, "Abstain", new { id = "" })
<span>ABSTAIN</span>
</label>
</div>
</td>
<td width="12%">
<div class="mb-3">
@Html.TextBoxFor(modelItem => obj.YesVote, new { 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 { 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 { 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">
function assignVoteTypeData() {
votetype = $("#VoteType").val();
console.log(votetype)
$("#SelectedVote").val(votetype).trigger('input');
}
function updateVoteTypeData() {
let votes;
if (votetype == "Simple Majority") {
votes = parseFloat($("#SimpleMajority").val());
}
else {
votes = parseFloat($("#TwoThirdsMajority").val());
}
$("#SelectedVote").val(votes);
}
$(document).ready(function () {
$('#SelectedVote').on('input', updateVoteTypeData);
});
</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,
SelectedVote = y.Votes,
ActiveVote = y.ActiveVote
}); ;
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();
}
}
usings and extra fields have been eliminated for brevity. Please let me know if you need to see something else. Thanks!