ASP.NET MVC下拉列表选择后自动刷新其他字段问题求助

1. 后端新增获取单价的接口 #

在AddOrderController里添加一个返回JSON的Action，用于根据选中项的标识（比如产品ID）返回对应单价：

public JsonResult GetUnitPrice(int productId)
{
    // 替换为你的实际业务逻辑，比如从数据库或服务层查询单价
    decimal unitPrice = _productRepository.GetUnitPrice(productId);
    return Json(unitPrice, JsonRequestBehavior.AllowGet);
}

2. 前端绑定下拉列表变更事件 #

在View视图中，给下拉列表添加onchange事件，通过AJAX请求后端接口获取单价并更新页面字段：

<!-- 假设你的下拉列表定义如下 -->
@Html.DropDownListFor(m => m.SelectedProductId, Model.ProductOptions, "请选择产品", new { id = "productSelect", @class = "form-control" })

<!-- 单价展示/输入框 -->
@Html.TextBoxFor(m => m.UnitPrice, new { id = "unitPriceBox", @class = "form-control", disabled = "disabled" })

<script src="~/Scripts/jquery.min.js"></script>
<script>
    $(function() {
        $("#productSelect").change(function() {
            var productId = $(this).val();
            if (!productId) {
                $("#unitPriceBox").val("");
                return;
            }
            
            $.get('@Url.Action("GetUnitPrice", "AddOrder")', { productId: productId }, function(data) {
                $("#unitPriceBox").val(data);
            }).fail(function() {
                alert("获取单价失败，请检查网络或重试");
            });
        });
    });
</script>

3. 常见问题排查 #

• 确认下拉列表的id与JS选择器完全匹配，比如示例中的productSelect
• 检查后端Action的参数名（productId）和AJAX请求的参数名一致，否则会出现参数接收为空的情况
• 验证jQuery已正确引入，打开浏览器控制台查看是否有JS报错
• 测试直接访问接口地址（如/AddOrder/GetUnitPrice?productId=1），确认能返回正确的单价数值
• 确保SelectListItemState生成的下拉项Value是产品ID的字符串形式，保证后端能正确解析参数：

// 示例SelectListItemState构造逻辑
public List<SelectListItemState> BuildProductOptions()
{
    return _db.Products.Select(p => new SelectListItemState
    {
        Value = p.ProductId.ToString(),
        Text = p.ProductName
    }).ToList();
}

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