ASP.NET MVC中用下拉列表选中项填充文本框并实现可编辑主人姓名

1. 控制器新增数据接口 #

在现有控制器中添加一个返回JSON格式数据的Action，用于根据马匹ID获取对应主人姓名：

[HttpGet]
public JsonResult GetEigenaarByPaardId(int paardId)
{
    // 替换为你的实际数据查询逻辑，比如从数据库根据马匹ID关联查询主人信息
    var eigenaar = db.Paarden.FirstOrDefault(p => p.Id == paardId)?.Eigenaar;
    return Json(eigenaar, JsonRequestBehavior.AllowGet);
}

2. 修改视图实现交互逻辑 #

调整视图代码，给马匹下拉框添加选择监听事件，同时确保主人姓名输入框支持编辑：

<!-- 马匹选择下拉框，添加id用于JS监听 -->
<div class="form-group">
    @Html.LabelFor(model => model.PaardId, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownList("PaardId", null, "选择马匹", htmlAttributes: new { @class = "form-control", id = "PaardDropdown" })
        @Html.ValidationMessageFor(model => model.PaardId, "", new { @class = "text-danger" })
    </div>
</div>

<!-- 主人姓名输入框，设置id用于JS填充数据 -->
<div class="form-group">
    @Html.LabelFor(model => model.Eigenaar, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Eigenaar, new { htmlAttributes = new { @class = "form-control", id = "EigenaarInput" } })
        @Html.ValidationMessageFor(model => model.Eigenaar, "", new { @class = "text-danger" })
    </div>
</div>

<!-- 引入jQuery并编写交互脚本 -->
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script>
    $(document).ready(function() {
        // 监听马匹下拉框的选择变化事件
        $("#PaardDropdown").change(function() {
            var selectedPaardId = $(this).val();
            if (selectedPaardId) {
                // 发送AJAX请求获取主人信息
                $.ajax({
                    url: '@Url.Action("GetEigenaarByPaardId", "你的控制器名称")', // 替换为实际控制器名
                    type: 'GET',
                    data: { paardId: selectedPaardId },
                    success: function(ownerName) {
                        // 将获取到的主人姓名填充到输入框
                        $("#EigenaarInput").val(ownerName);
                    },
                    error: function() {
                        alert('获取主人信息失败');
                    }
                });
            } else {
                // 未选择马匹时清空输入框
                $("#EigenaarInput").val('');
            }
        });
    });
</script>

3. 关键注意点 #

• 替换代码中的你的控制器名称为项目实际的控制器类名（比如控制器是PaardController，则填写"Paard"）。
• 根据你的实体模型结构调整数据查询逻辑，比如如果主人信息是关联实体，可能需要改为p.Eigenaar.Naam这类具体属性。
• 确认jQuery已正确引入，版本可根据项目实际情况调整。

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