Asp.net MVC模态窗口中PessoaNatureza下拉框Change事件失效

我一眼就看到了几个导致下拉框change事件无响应的关键问题，咱们一个个拆解：

1. 动态元素的事件绑定失效 #

你的#PessoaNatureza下拉框是通过AJAX动态加载到模态框里的（在openmodal函数中用load加载Create PartialView），而你在$(document).ready()里直接给$('#PessoaNatureza')绑定change事件的方式，只能对页面初始化时就存在的DOM元素生效。动态生成的元素不会继承这个事件绑定，所以自然没反应。

解决办法是用事件委托，把事件绑定到一个始终存在的父级元素（比如#modalPessoa或者document），再指定触发事件的子元素：

// 替换掉原来的$('#PessoaNatureza').change(...)这一行
$(document).on('change', '#PessoaNatureza', function() {
    // 这里写后续逻辑，下面会说第二个问题
});

2. change事件中的URL获取错误 #

你原来的change事件里写了openmodal(this.href)，但<select>元素根本没有href属性啊！this.href会返回undefined，导致openmodal函数根本不知道要请求哪个地址，流程直接卡壳。

根据你的需求（选择下拉后更新数据并返回Create PartialView），你需要构造正确的请求URL，把选中的PessoaNatureza值作为参数传给Create Action：

$(document).on('change', '#PessoaNatureza', function() {
    var selectedNatureza = $(this).val();
    // 构造带参数的Create Action地址
    var requestUrl = '@Url.Action("Create", "Pessoa")' + '?pessoaNatureza=' + selectedNatureza;
    openmodal(requestUrl);
    return false;
});

同时，你需要在PessoaController的Create Action里添加对应的参数接收逻辑，根据传入的pessoaNatureza返回正确的PartialView：

public IActionResult Create(PessoaNatureza? pessoaNatureza = null)
{
    var viewModel = new PessoaViewModel();
    // 初始化下拉选项等基础逻辑...
    if (pessoaNatureza.HasValue)
    {
        viewModel.PessoaNatureza = pessoaNatureza.Value;
    }
    return PartialView(viewModel);
}

3. 额外小问题：bindForm函数调用缺失参数 #

在bindForm的AJAX成功回调里，你写了bindForm()但没有传参数，这会导致重新加载的表单无法绑定提交事件。修正为：

success: function (result) {
    if (result.success) {
        window.location.reload();
    } else {
        $('#contentModal').html(result);
        bindForm('#contentModal'); // 传入表单所在的容器元素
    }
}

把这些修改完成后，你的下拉框change事件应该就能正常触发，并且重新加载对应的Create PartialView了。

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