ASP.NET Core MVC中JQuery调用控制器返回分部视图模态框不显示问题

以下是对应问题的根因和修复步骤：

• ID冲突问题：主页面中承载分部视图的容器和分部视图内的模态框使用了相同的id="ValidateAddress"，导致DOM选择异常，无法正确找到模态框元素。建议直接将主页面的partial标签替换为普通div容器，修改id为非重复值，比如id="AddressModalContainer"。
• JS重复调用模态框且选择器错误：原有JS中调用了两次模态框显示，第二次的选择器命中了外层的容器而非模态框，导致显示失败。删除重复的$('#ValidateAddress').modal('show');语句，只保留查找子元素.modal的调用即可。
• 控制器State参数为空问题：表单提交的是State.IntStateId，但调用FedEx API时使用的是model.State.StrStateCode，该字段未被赋值会导致API请求失败，进而分部视图加载异常。可以在控制器中根据提交的State.IntStateId查询对应的州编码赋值给StrStateCode，或者直接将州下拉框的value改为州编码而非州ID。
• 分部视图重复页脚问题：分部视图内的表单中已经写了操作按钮的modal-footer，外层又重复定义了一个，会导致样式错乱，删除多余的外层footer即可。
• 按钮data-url冗余参数问题：原有按钮的data-url中传了new { model = Model }，这里的Model是页面初始渲染的空模型，不会携带用户输入的内容，实际JS已经序列化了表单数据，直接将data-url改为@Url.Action("GetValidationOnAddress")即可。

主视图核心修改代码 #

<!-- 替换原来的partial标签为普通div容器 -->
<div id="AddressModalContainer"></div>

<!-- 按钮修改data-url -->
<button type="button" class="btn btn-primary" data-ajax-method="get" data-toggle="ajax-modal" data-target="#ValidateAddress"
        data-url="@Url.Action("GetValidationOnAddress")">
    校验地址
</button>

<!-- JS修改 -->
<script>
$(function () {
    var PlaceHolderElement = $('#AddressModalContainer');
    $('button[data-toggle="ajax-modal"]').click(function (event) {
        event.preventDefault();
        var url = $(this).data('url');
        var form = $(this).closest('form')
        var model = form.serialize();
        $.get(url, model).done(function (data) {
            PlaceHolderElement.html(data);
            PlaceHolderElement.find('.modal').modal('show');
        })
    })
})
</script>

控制器核心修改代码 #

[HttpGet]
public IActionResult GetValidationOnAddress(DeliveryAddressModel model)
{
    // 补充根据州ID查询州编码的逻辑，替换为你实际的查询方法即可
    model.State.StrStateCode = _dbContext.States.FirstOrDefault(s=>s.IntStateId == model.State.IntStateId)?.StrStateCode;
    
    FedexAPI fedexAPI = new FedexAPI();
    List<string> listOfStreets = new List<string>();
    listOfStreets.Add(model.strStreet1);
    listOfStreets.Add(model.strStreet2);
    var newAddress = fedexAPI.ValidateAddress(listOfStreets, model.strCity, model.State.StrStateCode, model.strZip, "US");

    if (newAddress.customerMessages.Contains("INTERPOLATED.STREET.ADDRESS"))
    {
        model.ErrorMessage = "未找到输入的地址，请核对地址信息。如果问题持续存在，请联系我们的客服_________";
    }
    else
    {
        model.strStreet1 = newAddress.streetLinesToken[0];
        if (newAddress.streetLinesToken.Count > 1)
            model.strStreet2 = newAddress.streetLinesToken[1];
        model.strCity = newAddress.city;
        model.strZip = newAddress.postalCode;
    }

    return PartialView("_AddressValidationPartial", model);
}

分部视图修改说明 #

直接删除分部视图中modal-body结束标签之后的这段重复页脚代码即可：

<div class="modal-footer">
    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
    <button type="button" class="btn btn-primary" data-save="modal">保存修改</button>
</div>

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