DropdownListFor onChange事件下重载DataSet_Data div的问题

问题场景 #

页面加载时通过data-url结合Url.Action成功加载局部视图到DataSet_Data div，但当下拉框selectedDataSet变更后，虽已更新DataSet_Data的data-url属性并触发click事件，div内容却未重载。

核心问题 #

你依赖的ASP.NET Unobtrusive Ajax的data-ajax特性是在页面初始化时绑定的，后续修改data-url属性不会自动触发新请求；且自定义的click事件仅打印日志，没有执行加载局部视图的实际逻辑。

最简解决方案：使用jQuery load()方法 #

直接用jQuery的load()方法替代Unobtrusive Ajax机制，更直观且无需额外属性绑定：

修改后的HTML代码 #

<div class="row form-group">
    <div class="col-lg-2"></div>
    <div class="col-lg-3">
        @Html.DropDownListFor(m => Model.DataSetID, new SelectList(Model.DataSets, "Value", "Text"), new { @class = "form-control m-l-5", @id = "selectedDataSet" })
    </div>
</div>

<div id="DataSet_Data"></div>

修改后的JavaScript代码 #

<script>
$(document).ready(function () {
    // 页面初始化时加载初始局部视图
    var initialUrl = '@Url.Action("DataSet_Data", "CP", new { DataSetID = Model.DataSetID })';
    $('#DataSet_Data').load(initialUrl);

    // 下拉框变更时重载局部视图
    $("#selectedDataSet").change(function () {
        // 拼接请求URL（根据路由配置调整格式）
        var url = '@Url.Action("DataSet_Data", "CP")' + '?DataSetID=' + $(this).val();
        // 直接加载新内容到div
        $('#DataSet_Data').load(url);
    });
});
</script>

补充说明 #

• 如果你的路由配置支持/CP/DataSet_Data/{DataSetID}格式，可将URL拼接改为更规范的路由参数形式：

  var url = '@Url.Action("DataSet_Data", "CP", new { DataSetID = "_" })'.replace("_", $(this).val());
  

• load()方法会自动发送GET请求，并将返回的HTML直接替换目标div内容，完全替代原有data-ajax触发逻辑，简洁高效。

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