在Razor Create页面实现字段加减并实时显示计算结果

1. 修正后端Model #

你的Model存在语法错误，且计算属性需要添加[NotMapped]特性避免EF将其映射到数据库字段，修正后的代码如下：

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema; // 引入命名空间使用NotMapped特性

namespace Test.Model
{
    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]
        public int? CalculatedBalance 
        { 
            get 
            { 
                // 处理空值，避免空引用异常
                return (InvoiceAmount ?? 0) - (PaymentAmount ?? 0); 
            } 
        }
    }
}

2. 前端Create页面实现实时计算 #

创建新记录时数据还未提交到数据库，因此需要通过前端JavaScript监听输入框变化，实时计算并展示Balance值，以下是ASP.NET MVC视图的示例代码：

@model Test.Model.Balance

@{
    ViewData["Title"] = "Create Balance";
}

<h1>Create Balance</h1>

<div class="col-md-4">
    <form asp-action="Create">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        
        <div class="form-group mb-3">
            <label asp-for="InvoiceAmount" class="form-label"></label>
            <input asp-for="InvoiceAmount" class="form-control" id="invoiceInput" />
            <span asp-validation-for="InvoiceAmount" class="text-danger"></span>
        </div>
        
        <div class="form-group mb-3">
            <label asp-for="PaymentAmount" class="form-label"></label>
            <input asp-for="PaymentAmount" class="form-control" id="paymentInput" />
            <span asp-validation-for="PaymentAmount" class="text-danger"></span>
        </div>
        
        <!-- 实时展示计算后的Balance -->
        <div class="form-group mb-3">
            <label class="form-label">Balance</label>
            <input type="text" class="form-control" id="balanceDisplay" readonly />
        </div>
        
        <button type="submit" class="btn btn-primary">Save</button>
    </form>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script>
        // 获取DOM元素
        const invoiceInput = document.getElementById('invoiceInput');
        const paymentInput = document.getElementById('paymentInput');
        const balanceDisplay = document.getElementById('balanceDisplay');

        // 计算Balance的逻辑
        function updateBalance() {
            // 把输入值转为整数，空值或非数字则取0
            const invoice = parseInt(invoiceInput.value) || 0;
            const payment = parseInt(paymentInput.value) || 0;
            balanceDisplay.value = invoice - payment;
        }

        // 监听输入框的input事件（用户输入/修改时触发）
        invoiceInput.addEventListener('input', updateBalance);
        paymentInput.addEventListener('input', updateBalance);

        // 页面加载时初始化一次（如果有默认值）
        updateBalance();
    </script>
}

实现原理 #

• 后端的[NotMapped]特性告诉EF Core不要为该属性创建数据库字段，仅作为内存中的计算属性使用。
• 前端通过input事件监听用户对两个金额输入框的操作，每次输入变化时调用计算函数，将结果更新到只读的显示框中，实现实时更新效果。
• 这种方式完全在浏览器端完成计算，无需和后端交互，响应速度快，符合创建页面的需求。

内容的提问来源于stack exchange，提问作者MelB