基于DropDownList选择项查询数据表并填充可编辑文本框

1. 后端新增API接口（Controller） #

在你的业务Controller中添加一个返回JSON格式数据的Action，用于根据选中的ArtikelID查询对应商品详情：

public ActionResult GetArtikelDetails(int artikelId)
{
    // 从数据库查询指定ArtikelID的商品记录
    var targetArtikel = db.Artikels.FirstOrDefault(a => a.ArtikelID == artikelId);
    
    if (targetArtikel == null)
    {
        return Json(new { success = false }, JsonRequestBehavior.AllowGet);
    }
    
    // 返回需要填充的字段数据
    return Json(new {
        success = true,
        beschrijving = targetArtikel.ArtikelBeschrijving,
        prijs = targetArtikel.ArtikelPrijs
    }, JsonRequestBehavior.AllowGet);
}

2. 前端View添加AJAX监听逻辑 #

首先确保页面已引入jQuery（可在布局页或当前View中添加）：

<script src="~/Scripts/jquery-3.6.0.min.js"></script>

然后添加下拉框选择事件的监听脚本，实现自动填充逻辑：

$(document).ready(function() {
    // 监听ArtikelID下拉框的选择变化，需确保下拉框ID为ArtikelID
    $("#ArtikelID").change(function() {
        var selectedId = $(this).val();
        
        // 未选择任何选项时清空文本框
        if (!selectedId) {
            $("#ArtikelBeschrijving").val("");
            $("#ArtikelPrijs").val("");
            return;
        }
        
        // 发送AJAX请求到后端接口，替换"你的控制器名"为实际控制器名称
        $.get("@Url.Action("GetArtikelDetails", "你的控制器名")", { artikelId: selectedId }, function(response) {
            if (response.success) {
                // 将返回的数据填充到对应文本框
                $("#ArtikelBeschrijving").val(response.beschrijving);
                $("#ArtikelPrijs").val(response.prijs);
            } else {
                // 查询失败时清空文本框
                $("#ArtikelBeschrijving").val("");
                $("#ArtikelPrijs").val("");
            }
        });
    });
});

3. 确认View控件配置 #

确保View中正确生成下拉框和可编辑文本框，示例代码如下：

// 生成ArtikelID下拉框，ArtikelList为后端传递的商品ID列表数据源
@Html.DropDownListFor(m => m.ArtikelID, new SelectList(Model.ArtikelList, "ArtikelID", "ArtikelID"), "请选择商品", new { @class = "form-control" })

// 生成商品描述文本框（可编辑）
@Html.TextBoxFor(m => m.ArtikelBeschrijving, new { @class = "form-control" })

// 生成商品价格文本框（可编辑）
@Html.TextBoxFor(m => m.ArtikelPrijs, new { @class = "form-control" })

关键注意点 #

• 需确保下拉框、文本框的ID与脚本中使用的ID完全一致
• 文本框未设置readonly属性，保持可编辑状态，满足手动修改需求
• 后端接口需开启允许GET请求返回JSON（代码中已通过JsonRequestBehavior.AllowGet配置）

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