.NET Core MVC中Bootstrap模态框AJAX更新数据时变量返回Null

核心问题分析 #

参数全为Null的原因主要有两点：

1. 控制器Action未配置正确的请求特性与绑定方式，无法解析AJAX发送的JSON数据
2. 模态框表单元素的name属性与模型属性不匹配（虽AJAX构造的对象正确，但统一修正可避免后续表单提交问题）

具体修复步骤 #

1. 修改控制器Update方法 #

添加[HttpPost]标记POST请求，用[FromBody]指定从请求体解析JSON，同时返回符合AJAX期望的JSON结果：

using Microsoft.AspNetCore.Mvc;

public class CustomerController : Controller
{
    CustomerDB objCustomer = new CustomerDB();
    public IActionResult Index()
    {
        List<Customer> lstctm = new List<Customer>();
        lstctm = objCustomer.GetAllCustomers().ToList();
        return View(lstctm);
    }

    [HttpPost]
    public IActionResult Update([FromBody] Customer ctmupdate)
    {
        if(ModelState.IsValid)
        {
            objCustomer.UpdateCustomer(ctmupdate);
            return Json(new { success = true, message = "更新成功" });
        }
        return Json(new { success = false, message = "数据验证失败" });
    }
}

2. 修正模态框表单的name属性 #

表单元素name必须与Customer类属性名完全一致，否则模型绑定会失败：

<div class="modal fade" id="EditModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="model-header">
                <h5 class="modal-title" id="editModalLable">Edit Customer</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                <div class="form-group" style="display:none;">
                    <label for="txtID">ID</label>
                    <input type="text" class="form-control" id="txtID" name="ID" />
                </div>
                <div class="form-group">
                    <label for="txtCID">Customer ID</label>
                    <input type="text" class="form-control" id="txtCID" name="CID" />
                </div>
                <div class="form-group">
                    <label for="txtLastName">Last Name</label>
                    <input type="text" class="form-control" id="txtLastName" name="LastName" />
                </div>
                <div class="form-group">
                    <label for="txtFirstName">First Name</label>
                    <input type="text" class="form-control" id="txtFirstName" name="FirstName" />
                </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="Update();">Update</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>    
</div>

注意：将Update按钮的type="submit"改为type="button"，避免触发表单默认提交干扰AJAX请求。

3. 优化AJAX函数（可选） #

将ID转为数字类型，避免模型绑定的类型转换问题：

function Update() {  
    var res = validate();  
    if (res == false) {  
        return false;  
    }  
    var empObj = {  
        ID: parseInt($('#txtID').val()),
        CID: $('#txtCID').val().trim(),
        LastName: $('#txtLastName').val().trim(),
        FirstName: $('#txtFirstName').val().trim(),
    };  
    $.ajax({  
        url: "/Customer/Update",  
        data: JSON.stringify(empObj),  
        type: "POST",  
        contentType: "application/json;charset=utf-8",  
        dataType: "json",  
        success: function (result) { 
            if(result.success){
                $('#EditModal').modal('hide');
                location.reload();
            } else {
                alert(result.message);
            }
        },  
        error: function (errormessage) {  
            alert(errormessage.responseText);  
        }  
    });
}

4. 额外注意事项 #

• 确保Customer类属性名、AJAX对象键名、表单name属性完全一致（大小写敏感）
• 检查数据库连接字符串DBcon配置是否正确
• 可在控制器添加日志输出，验证ctmupdate参数是否正确绑定

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