我有一个剃刀页面，正在查看人员列表及其投票。它可以提出像市政、主管、简单多数、2/3 多数这样的项目，但当涉及到 SelectedVote 时，它只将值放入第一个记录中，而不是其余记录中。 SelectedVote基于VoteType的DDL。当页面加载时它也不会出现 - 尽管我的理解是“onchange”也会执行“onload”。我错了吗？有人可以指出我缺少什么吗？请温柔一点。我正在尽力而为，在发布此内容之前我已经花了几个小时阅读和尝试。
我的最终目标是用户只需单击每个主管记录的单选按钮，然后在“是”、“否”或“弃权”栏中填写适当的投票数（来自选定的投票列）。我知道我还有很多事情需要弄清楚。
.cshtml 和部分脚本如下：
<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();
}
}
为了简洁起见，已删除了使用和额外字段。如果您需要查看其他内容，请告诉我。谢谢！
在您的代码中
assignVoteTypeData()SelectedVotefunction assignVoteTypeData(row) {
let votetype = $(row).find(".vote-type").val();
let selectedVote = $(row).find(".selected-vote");
selectedVote.val(votetype);
}
$(document).ready(function() {
$('.vote-type').on('change', function() {
let row = $(this).closest('tr');
assignVoteTypeData(row);
});
$('.vote-type').each(function() { // Set SelectedVote on page load event
let row = $(this).closest('tr');
assignVoteTypeData(row);
});
});同时您还需要在页面加载时初始化
SelectedVote<select asp-for="Vote.VoteType" id="VoteType" class="form-select vote-type" asp-items="@(new SelectList(Model.DisplayVoteTypeData.OrderBy(x => x.VoteTypeDesc),"VoteTypeDesc", "VoteTypeDesc"))">
<option value="" selected disabled>---Select Vote Type---</option>
</select>现在直接在 Razor 循环中设置
SelectedVote@Html.TextBoxFor(modelItem => obj.SelectedVote, new { @class = "form-control selected-vote", @readonly = "readonly", @style = "width: 100px" })
请执行上述更正并检查相应的输出。