我正在开发一个应用程序。它有一个客户表、一个考勤表和一个小组表。
选择面板以将出勤分配给客户。在我的“创建出勤”页面上，我有一个包含面板名称的下拉列表。该下拉列表后面是包含面板成本、客户已向面板支付的金额以及未清金额的字段。
面板表包含面板日期、面板名称和面板费用（面板模型中的面板费用）。
我想在“创建出勤”页面上做的是，一旦我从下拉列表中选择正确的面板名称并从该下拉列表中选择选项卡，面板成本字段就会根据所选的面板进行填充。 （从所选面板的面板表中获取面板成本）。
将成本填写到此只读字段后，我将输入已支付金额，页面将计算未偿金额。
我不懂 Javascript，但到目前为止我已经获得了帮助，同时研究了可能有效的方法来完成它。
我不知道 Javascript 语法如何正确引用面板名称和面板成本字段来实现这一点。
这是我到目前为止所拥有的：
考勤创建.cshtml：
@page
@model SampleApp.Pages.Attendances.CreateModel
<form method="post">
<div class="border p-3 mt-4">
<div class="row pb-2">
<h2 class="text-primary pl-3">Add Client to Panel</h2>
<hr />
</div>
<div asp-validation-summary="All"></div>
<table class="table table-borderless" style="width:100%">
<tr>
<td style="width: 25%">
<div class="mb-3">
<label asp-for="Attendance.ClientId"></label>
<select asp-for="Attendance.ClientId" id="Select1" class="form-select" asp-items="@(new SelectList(Model.DisplayClientData.OrderBy(x => x.ClientDisplayName),"Id", "ClientDisplayName"))"><option value="" selected disabled>---Select Client Id---</option></select>
</div>
</td>
<td style="width: 80%">
<div class="mb-3">
<label asp-for="Attendance.PanelAssigned"></label>
<select asp-for="Attendance.PanelAssigned" id="PanelName" class="form-select" asp-items="@(new SelectList(Model.DisplayPanelData.OrderBy(x => x.PanelName),"PanelName", "PanelName"))" onchange="assignData()"><option value="" selected disabled>---Select Panel---</option></select>
</div>
</td>
</tr>
</table>
<table class="table table-borderless" style="width:100%">
<tr>
<td style="width: 25%">
<div class="mb-3">
<label asp-for="Attendance.PanelCost"></label>
<input asp-for="Attendance.PanelCost" id="PanelCost" class="form-control" readonly />
<span asp-validation-for="Attendance.PanelCost" class="text-danger"></span>
</div>
</td>
<td style="width: 25%">
<div class="mb-3">
<label asp-for="Attendance.AmountPaid"></label>
<input asp-for="Attendance.AmountPaid" type="number" id="AmountPaid" class="form-control" style="text-align:right" />
<span asp-validation-for="Attendance.AmountPaid" class="text-danger"></span>
</div>
</td>
<td style="width: 25%">
<div class="mb-3">
<label asp-for="Attendance.AmountOutstanding"></label>
<input asp-for="Attendance.AmountOutstanding" type="number" id="AmountOutstanding" class="form-control-plaintext" style="text-align:right" readonly />
<span asp-validation-for="Attendance.AmountOutstanding" class="text-danger"></span>
</div>
</td>
<td style="width: 25%">
<div class="mb-3">
<label asp-for="Attendance.Status"></label>
<select asp-for="Attendance.Status" id="Select3" class="form-select" asp-items="@(new SelectList(Model.DisplayStatusData.OrderBy(x => x.StatusDesc),"StatusDesc", "StatusDesc"))"><option value="" selected disabled>---Status---</option></select>
</div>
</td>
</tr>
</table>
<div>
<button type="submit" class="btn btn-primary" asp-route-id="@ViewData["clientid2"]" style="width:300px;">Add Panel -> Return to Client</button>
<a asp-page="/Client/Edit" class="btn btn-secondary" style="width: 300px;">Return to Client</a>
</div>
</div>
</form>
@section Scripts
{
<script type="text/javascript">
function assignData() {
var contentType = $("#PanelName").val();
if (contentType == $("#PanelName").val() {
$("#PanelCost").val("#PanelName").val(PanelCost);
}
}
</script>
<script type="text/javascript">
}
$(document).ready(function () {
function updatePanelBalance() {
var panelCost = parseFloat($('#PanelCost').val()) || 0;
var amountPaid = parseFloat($('#AmountPaid').val()) || 0;
var amountOutstanding = panelCost - amountPaid;
$('#AmountOutstanding').val(amountOutstanding);
}
$('#PanelCost, #AmountPaid').on('input', updatePanelBalance);
});
</script>
@{
await Html.RenderPartialAsync("_ValidationScriptsPartial");
}
}
在出勤Create.cs上，我只需：
public Panel Panel { get; set; }
public IEnumerable<Panel> DisplayPanelData { get; set; }
面板.cs
namespace SampleApp.Model
{
public class Panel
{
[Key]
[Required]
public int Id { get; set; }
[Display(Name = "Panel Name")]
public string? PanelName { get; set; }
[Display(Name = "Panel Date")]
[DataType(DataType.Date)]
public DateTime? PanelDate { get; set; }
[Display(Name ="Fee")]
[DataType(DataType.Currency)]
[Column(TypeName = "decimal(6,2)")]
public decimal? PanelFee { get; set; }
}
}
任何帮助将不胜感激。谢谢！！
您已经使用
onchange<select asp-for="Attendance.PanelAssigned"
id="PanelName"
class="form-select"
asp-items="@(new SelectList(Model.DisplayPanelData.OrderBy(x => x.PanelName),"PanelName", "PanelName"))"
onchange="assignData()">
<option value="" selected disabled>---Select Panel---</option>
</select>
在
assignData())ifif接下来我不太明白，但我觉得你总体上是在正确的轨道上：
$("#PanelCost").val("#PanelName").val(PanelCost);
您可以像这样设置 PanelCost 输入字段的值：
$("#PanelCost").val(3.50).trigger('input');
问题是，你从哪里得到正确的值？
另请注意，以编程方式设置字段的值时，您需要手动触发输入事件（您不需要，但其余的特定代码取决于它）。
这是完整的内容，使用所选PanelName
的值作为
PanelCost。请注意，我将所有
var更改为
const，因为它们不需要更改。我也摆脱了
$(document).ready，但可以随意把它放回去。第二个脚本标签的开头还有一个错误的
}（语法错误）。
function assignData() {
const contentType = $("#PanelName").val(); //?
$("#PanelCost").val(contentType).trigger('input');
}
function updatePanelBalance() {
const panelCost = parseFloat($('#PanelCost').val()) || 0;
const amountPaid = parseFloat($('#AmountPaid').val()) || 0;
$('#AmountOutstanding').val(panelCost - amountPaid);
}
$('#PanelCost, #AmountPaid').on('input', updatePanelBalance);
一般来说，在测试 JavaScript 时检查浏览器控制台是个好主意，因为它会指出语法错误。您的 IDE 可能还可以设置为捕获语法错误。