ASP.NET Razor Pages中通过Ajax获取对象并更新页面元素的方法

当前代码的核心问题 #

你的前端代码里存在一个关键错误：把后端返回的已自动解析的JSON对象用JSON.stringify()转成了字符串，导致无法直接访问VCode和currency属性。另外后端代码重复查询数据库，存在性能浪费。

修正后的前端代码 #

jQuery的Ajax会自动把JSON格式的响应解析为JavaScript对象，直接使用这个对象即可访问属性，无需额外转字符串：

function GetPOVendorCode(ID) {
    $.ajax({
        data: { VendorName: ID },
        url: '/Purchase/POGenerals/Create/?handler=VendorCode',
        type: 'GET',
        success: function (data) {
            // 直接提取属性并赋值给变量
            const vendorCode = data.VCode;
            const vendorCurrency = data.currency;
            
            // 示例：更新页面上的文本框（替换为你的实际元素ID）
            $('#VendorCodeInput').val(vendorCode);
            $('#CurrencyInput').val(vendorCurrency);
        },
        error: function(xhr, status, error) {
            // 增加错误处理，方便调试问题
            console.error('获取供应商数据失败:', error);
        }
    });
}

优化后的后端代码 #

避免重复查询数据库，一次查询即可获取所需数据，同时规范类名符合C#命名约定：

// 遵循C# PascalCase命名规范
public class VendorData
{
    public int VCode { get; set; }
    public string Currency { get; set; }
}

[HttpGet]
public IActionResult OnGetVendorCode(string VendorName)
{
    // 单次查询定位目标供应商，减少数据库交互
    var targetVendor = _context.VendorMaster
        .FirstOrDefault(o => o.CompanyID == Company && o.VendorName == VendorName);
        
    var vendorData = new VendorData();
    if (targetVendor != null)
    {
        vendorData.VCode = targetVendor.VendorCode;
        vendorData.Currency = targetVendor.Currency;
    }

    return new JsonResult(vendorData);
}

额外优化建议 #

• 空值处理：后端查询不到供应商时，返回的对象属性会是默认值（int默认0，string默认null），前端可根据此做提示，比如if (vendorCode === 0) alert('未找到匹配的供应商');
• 参数校验：后端可添加VendorName的非空校验，避免无效查询
• 缓存优化：如果供应商数据不频繁更新，可缓存VendorMaster列表，进一步减少数据库查询次数

内容的提问来源于stack exchange，提问作者Adnan Ul Haq