如何在ASP.Net 4.8中基于两个表单输入更新模型ComputedRate值

现有代码回顾 #

你的实体类和Controller代码如下：

RecyclableItem 类

public class RecyclableItem
{
    [Key]
    public int Id { get; set; }
    public int RecyclableTypeId { get; set; }
    public decimal Weight { get; set; }
    public decimal ComputedRate { get; set; }
}

RecyclableTypeOptions 类

public class RecyclableTypeOptions
{
    public int Id { get; set; }
    public string Type { get; set; }
    public decimal Rate { get; set; }
}

Controller 的 Create GET 方法

// GET: RecyclableItem/Create
public ActionResult Create()
{
    List<RecyclableTypeOptions> options = PopulateOptions();
    ViewData["RecyclableTypeOptions"] = options;
    return View();
}

private List<RecyclableTypeOptions>  PopulateOptions()
{
    List<RecyclableTypeOptions> options = _repoType.GetAllRecyclableTypesOptions();
    return options;
}

实现实时计算的具体步骤 #

要实现Weight和Rate相乘自动更新ComputedRate，核心是前端监听输入变化+实时计算，同时后端做二次验证确保数据可靠。

1. 在Create视图中构建带Rate属性的下拉框

在Create.cshtml视图里，将RecyclableTypeOptions的Rate值嵌入到下拉选项的自定义属性中，方便前端JS直接获取：

@model YourNamespace.RecyclableItem

<div class="form-group">
    @Html.LabelFor(model => model.RecyclableTypeId, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownListFor(model => model.RecyclableTypeId, 
            new SelectList(ViewData["RecyclableTypeOptions"] as IEnumerable<RecyclableTypeOptions>, "Id", "Type"),
            "请选择回收类型",
            new { @class = "form-control", id = "recyclableTypeSelect" })
        @Html.ValidationMessageFor(model => model.RecyclableTypeId, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.Weight, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Weight, new { htmlAttributes = new { @class = "form-control", id = "weightInput" } })
        @Html.ValidationMessageFor(model => model.Weight, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.ComputedRate, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.ComputedRate, new { htmlAttributes = new { @class = "form-control", id = "computedRateInput", @readonly = "readonly" } })
        @Html.ValidationMessageFor(model => model.ComputedRate, "", new { @class = "text-danger" })
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 将后端传递的选项数据映射到下拉框的自定义属性
    const options = @Html.Raw(Json.Encode(ViewData["RecyclableTypeOptions"]));
    const selectElement = document.getElementById('recyclableTypeSelect');
    
    options.forEach(opt => {
        const option = selectElement.querySelector(`option[value="${opt.Id}"]`);
        if (option) {
            option.setAttribute('data-rate', opt.Rate);
        }
    });
    
    // 绑定计算事件
    bindCalculationEvents();
});

function bindCalculationEvents() {
    const typeSelect = document.getElementById('recyclableTypeSelect');
    const weightInput = document.getElementById('weightInput');
    const computedRateInput = document.getElementById('computedRateInput');
    
    // 定义计算逻辑
    function computeTotal() {
        const selectedOption = typeSelect.options[typeSelect.selectedIndex];
        const rate = parseFloat(selectedOption.getAttribute('data-rate')) || 0;
        const weight = parseFloat(weightInput.value) || 0;
        
        // 计算后保留两位小数（可根据需求调整）
        const total = (rate * weight).toFixed(2);
        computedRateInput.value = total;
    }
    
    // 监听下拉框切换和重量输入事件
    typeSelect.addEventListener('change', computeTotal);
    weightInput.addEventListener('input', computeTotal);
}
</script>

2. 后端二次验证（关键，防止前端篡改）

前端计算仅为提升用户体验，不能完全信任前端数据，需在POST的Create方法中重新从数据库获取Rate并计算：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "Id,RecyclableTypeId,Weight,ComputedRate")] RecyclableItem recyclableItem)
{
    if (ModelState.IsValid)
    {
        // 从数据库获取对应回收类型的Rate，重新计算
        var recyclableType = _repoType.GetRecyclableTypeById(recyclableItem.RecyclableTypeId);
        if (recyclableType != null)
        {
            recyclableItem.ComputedRate = recyclableItem.Weight * recyclableType.Rate;
        }
        
        db.RecyclableItems.Add(recyclableItem);
        db.SaveChanges();
        return RedirectToAction("Index");
    }
    
    // 重新填充下拉选项
    ViewData["RecyclableTypeOptions"] = PopulateOptions();
    return View(recyclableItem);
}

关于外键的补充方案 #

如果觉得当前关联方式不够清晰，可以直接用外键关联RecyclableType实体：

1. 修改RecyclableItem类，添加外键和导航属性：

public class RecyclableItem
{
    [Key]
    public int Id { get; set; }
    
    [ForeignKey("RecyclableType")]
    public int RecyclableTypeId { get; set; }
    public virtual RecyclableType RecyclableType { get; set; }
    
    public decimal Weight { get; set; }
    public decimal ComputedRate { get; set; }
}

// 对应的RecyclableType实体
public class RecyclableType
{
    [Key]
    public int Id { get; set; }
    public string Type { get; set; }
    public decimal Rate { get; set; }
}

2. 此时后端计算可直接通过导航属性获取Rate，无需额外查询，前端下拉框构建逻辑和之前一致，仅需将PopulateOptions方法返回RecyclableType列表即可。

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