ASP.NET Core MVC地址验证模态框视图传控制器模型为空如何解决

问题根因 #

你遇到的控制器接收模型为null的问题，核心是两个原因：

1. 你在@Url.Action中直接传入的是页面首次渲染时的初始Model，此时用户还未输入内容，后续用户在表单填写的内容不会动态更新到按钮的data-url属性中，请求时携带的永远是初始的空模型。
2. 用GET请求传递复杂结构的模型，很容易出现参数绑定失败的问题，且GET请求有参数长度限制。

修复步骤 #

• 第一步：给表单套上form标签
  你现有的表单元素没有被form标签包裹，后续序列化表单数据会失败，找到视图中<div class="form-horizontal">的位置，在外面套上form标签：

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <!-- 原有所有表单内容、验证提示、按钮都保持不变 -->
    </div>
}

• 第二步：修改校验按钮的属性
  删除按钮data-url里的模型参数，仅保留基础的请求地址：

<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#ValidateAddress" data-url="@Url.Action("GetValidationOnAddress")">Verify Address</button>

• 第三步：修改AJAX请求逻辑
  改为POST请求，同时序列化当前表单的用户输入内容传递给控制器，修改你的script部分代码：

$(function () {
    var PlaceHolderElement = $('#PlaceHolderHere');
    $('button[data-toggle="ajax-modal"]').click(function (event) {
        var url = $(this).data('url');
        // 序列化当前表单的所有用户输入数据
        var postData = $('form').serialize();
        // 发送POST请求到控制器
        $.post(url, postData).done(function (data) {
            PlaceHolderElement.html(data);
            PlaceHolderElement.find('.modal').modal('show');
        })
    })
})

• 第四步：调整控制器方法适配POST请求
  确认你的GetValidationOnAddress方法添加了POST请求接收注解，参数为对应的地址模型：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult GetValidationOnAddress(DeliveryAddressModel model)
{
    // 原有FedEx地址校验逻辑不变
}

调整后控制器就能正常接收到用户填写的表单内容了，地址校验完成后返回模态框内容即可实现无刷新弹出确认的需求。

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