在创建 Razor 页面上添加或减去字段并在页面上显示结果？

Question

假设我有一个模型：

using System.ComponentModel.DataAnnotations;

namespace Test.Model
{
    public class Balance
    {
        [Key]
        public int Id
        [Display(Name = "Invoice Amount")] 
        public int? InvoiceAmount { get; set; }
        [Display(Name = "Payment Amount")] 
        public int? PaymentAmount { get; set; }
        public int Balance {get; set; }
        {
             InvoiceAmount - PaymentAmount
        }
    }
}

我不需要将余额存储在数据库中，因为我可以随时计算它，但是当有人创建记录并输入发票金额和付款金额时，如何将其显示在创建页面上？

在提交表单并将 InvoiceAmount 和 PaymentAmount 提交到数据库之前，我该怎么做？

如果他们在输入发票金额或付款金额后更改了怎么办？我怎样才能像这样动态地改变平衡呢？我认为 InvoiceAmount 和 PaymentAmount 都需要某种类型的事件（这是正确的词 - 我不是程序员）与它们绑定吗？

我在这里搜索过，但没有找到任何关于“创建”页面的解释。仅已绑定并正在报告的字段。

希望使用这个非常基本的示例来了解它是如何工作的。

谢谢！！

Answer 1

我不需要将余额存储在数据库中，因为我总是可以 计算一下，

如果你想在模型类中拥有一个属性而不存储在数据库中，你可以使用

[NotMapped]

属性来忽略该属性。

但是当有人创建时我如何将它显示在创建页面上 记录并输入发票金额和付款金额？

在提交表格并承诺之前我该怎么做？ InvoiceAmount 和 PaymentAmount 存入数据库？

如果他们更改发票金额或付款金额怎么办 输入后？

您在模型中定义需要服务器端交互或页面刷新的计算。但你想要的是实现

Balance

字段的实时更新。您可以使用 Jquery 监听

InvoiceAmount

和

PaymentAmount

输入字段中的更改。

您可以关注的工作演示：

型号

public class Balance
{
    [Key]
    public int Id { get; set; }
    [Display(Name = "Invoice Amount")]
    public int? InvoiceAmount { get; set; }
    [Display(Name = "Payment Amount")]
    public int? PaymentAmount { get; set; }
    [NotMapped] // This will ensure that Balance is not created in the database
    public int BalanceAmount { get; set; }
}

查看

@model Balance
<form>
    Invoice Amount: <input asp-for="InvoiceAmount"><br>
    Payment Amount: <input asp-for="PaymentAmount"><br>
    Balance: <span id="balanceDisplay">0</span><br>
</form>
@section Scripts
{
    <script type="text/javascript">
        $(document).ready(function () {
            function updateBalance() {
                var invoiceAmount = parseInt($('#InvoiceAmount').val()) || 0;
                var paymentAmount = parseInt($('#PaymentAmount').val()) || 0;

                var balance = invoiceAmount - paymentAmount;
                $('#balanceDisplay').text(balance);
            }

            $('#InvoiceAmount, #PaymentAmount').on('input', updateBalance);
        });
    </script>
}