ASP.NET Core点击View按钮后Modal显示居民信息为NULL求助

核心问题分析 #

点击View按钮后Modal显示NULL，主要由以下三个原因导致：

• JSON序列化与JS访问的大小写不匹配：C# ViewModel属性是PascalCase（如ResidentID），默认序列化后JSON键保持PascalCase，但JS代码用camelCase（如residentID）访问，无法取到值。
• Contacts属性名称不一致：ViewModel中Contacts的联系方式字段是ContactNumber，但JS代码错误使用contactValue访问。
• Addresses缺失JS所需字段：ViewModel的AddressViewModel没有City、State、ZipCode属性，JS却尝试渲染这些字段。
• Bootstrap Modal兼容问题（次要）：关闭按钮用了旧版属性data-dismiss="modal"，Bootstrap 5需改为data-bs-dismiss="modal"，否则关闭功能可能失效。

具体修复步骤 #

1. 修正JSON序列化的大小写配置 #

修改Manage.cshtml中的按钮代码，指定序列化时使用camelCase，确保JS能匹配字段：

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#residentModal" 
        data-resident='@Html.Raw(System.Text.Json.JsonSerializer.Serialize(resident, new System.Text.Json.JsonSerializerOptions { PropertyNamingPolicy = System.Text.Json.JsonNamingPolicy.CamelCase }))'>
    View
</button>

2. 修正JS中Contacts的字段访问 #

修改resident.js里的Contacts渲染逻辑，将contactValue改为contactNumber：

contacts.forEach(function (contact) {
    contactList.append('<li>' + contact.contactType + ': ' + contact.contactNumber + '</li>');
});

3. 补充AddressViewModel的缺失字段 #

更新ResidentController.cs中的AddressViewModel映射（需确保实体类WMS_Address包含对应字段）：

Addresses = r.Addresses.Select(a => new AddressViewModel
{
    AddressID = a.AddressID,
    ResidentID = a.ResidentID,
    AddressType = a.AddressType,
    HouseNumber = a.HouseNumber,
    Street = a.Street,
    Barangay = a.Barangay,
    City = a.City, // 补充缺失字段
    State = a.State, // 补充缺失字段
    ZipCode = a.ZipCode, // 补充缺失字段
    CreationDate = a.CreationDate,
    ModifiedBy = a.ModifiedBy,
    ModifiedDate = a.ModifiedDate
}).ToList(),

4. 修正Modal关闭按钮的Bootstrap属性 #

修改Modal结构中的关闭按钮：

<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
</button>

验证方法 #

1. 运行项目后，打开浏览器控制台（F12），查看console.log('Resident data:', resident)输出的JSON结构，确认字段大小写和名称与JS访问的一致。
2. 点击View按钮，检查Modal中的所有字段是否正常显示，包括地址和联系方式。

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