Blazor中使用单参数函数实现行级onblur事件金额计算

要实现每行独立计算数量×单价、onblur触发、单个函数处理的逻辑，核心是先把每行数据封装成独立模型，再通过循环渲染+参数化函数来处理。以下是具体实现步骤：

1. 创建行数据模型 #

定义InvoiceItem类存储每行的独立数据，避免单变量导致的行数据冲突：

public class InvoiceItem
{
    public int ItemOrder { get; set; }
    public string Sku { get; set; }
    public string Description { get; set; }
    public int Quantity { get; set; }
    public decimal UnitPrice { get; set; }
    public decimal Total { get; set; }
    public string FormattedTotal => $"$ {Total:n2}";
}

2. 修改页面逻辑代码 #

用List<InvoiceItem>管理所有行数据，编写带参数的计算函数处理单行计算：

namespace Starterkit.Pages.Invoice
{
    public partial class Index
    {
        public DateTime DtpToDate = DateTime.Now;
        // 存储所有 invoice 行数据
        private List<InvoiceItem> InvoiceItems { get; set; } = new();

        protected override void OnInitialized()
        {
            // 初始化一行示例数据
            InvoiceItems.Add(new InvoiceItem { ItemOrder = 1 });
        }

        // 带参数的计算函数，接收当前行对象
        private void CalculateTotal(InvoiceItem item)
        {
            // 计算数量×单价，处理0值避免无效计算
            item.Total = item.Quantity > 0 && item.UnitPrice > 0 
                ? item.Quantity * item.UnitPrice 
                : 0;
        }
    }
}

3. 修改Razor页面代码 #

通过foreach循环渲染每行，给数量、单价输入框绑定onblur事件并传递当前行对象，金额框绑定对应行的计算结果：

<table class="table">
    <tbody>
        @foreach (var item in InvoiceItems)
        {
            <tr>
                <td>
                    <label class="fs-6 fw-semibold col-form-label">@item.ItemOrder</label>
                </td>
                <td>
                    <select name="Perticular@item.ItemOrder" class="form-select form-select-solid">
                        <option value="">Please Select Perticular</option>
                    </select>
                </td>
                <td>
                    <input class="form-control form-control-solid la-money" 
                           placeholder="Remark" 
                           @bind="item.Description" />
                </td>
                <td>
                    <input id="InputUnit@item.ItemOrder" 
                           class="form-control form-control-solid" 
                           @bind="item.Quantity" 
                           @onblur="() => CalculateTotal(item)" />
                </td>
                <td>
                    <input id="Rate@item.ItemOrder" 
                           class="form-control form-control-solid" 
                           @bind="item.UnitPrice" 
                           @onblur="() => CalculateTotal(item)" />
                </td>
                <td>
                    <input class="form-control form-control-solid" 
                           type="text" 
                           value="@item.FormattedTotal" 
                           disabled />
                </td>
            </tr>
        }
    </tbody>
</table>

关键逻辑说明 #

• 独立行数据：List<InvoiceItem>确保每行数据相互隔离，不会出现计算结果串行的问题
• 参数化函数：CalculateTotal接收当前行的InvoiceItem对象，直接修改该行的Total属性，精准对应到当前行
• onblur触发：通过@onblur="() => CalculateTotal(item)"传递当前行对象，实现输入框失去焦点时触发计算
• 金额框赋值：直接绑定value="@item.FormattedTotal"，显示格式化后的计算结果

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