如何在JavaScript函数中将本地JSON文件的键作为变量使用（Razor Pages场景）

方案1：直接从Razor渲染层传递参数（优先推荐） #

你已经在Razor模板中循环渲染商品数据，不需要额外读取本地JSON文件，直接将商品价格作为参数传入JS函数即可，性能更高且无额外请求开销。

修改HTML代码 #

<div class="merch-container">
    <ul class="merch-ul">
        @foreach (var item in Model.Items)
        {
            <li class="merch-display">
                <img src="~/imgs/@item.Image" style="width: 250px; height: 250px; padding: 15px; object-fit: cover;" />
                <p>@item.Price</p>
                <form>
                    <!-- 把当前商品价格作为参数传入点击函数 -->
                    <input type="button" onclick="deductValueAndRevenue(@item.Price)" value="-" />
                    <input type="button" onclick="incrementValueAndRevenue(@item.Price);" value="+" />
                </form>
            </li>
        }
    </ul>
</div>

修改JS代码 #

修正原有逻辑问题：原逻辑用单价乘总销量仅适合单商品场景，多商品场景下改为累加对应商品价格，计算结果才准确。

function incrementValueAndRevenue(price) {
    // 处理总销量
    let soldCount = parseInt(document.getElementById("items-sold").value) || 0;
    soldCount++;
    document.getElementById("items-sold").value = soldCount;

    // 累加总营收，保留两位小数避免浮点数精度问题
    let totalRevenue = parseFloat(document.getElementById("total-revenue").value) || 0;
    totalRevenue += price;
    document.getElementById("total-revenue").value = totalRevenue.toFixed(2);
}

// 对应扣减函数同步修改
function deductValueAndRevenue(price) {
    let soldCount = parseInt(document.getElementById("items-sold").value) || 0;
    if (soldCount <= 0) return;
    soldCount--;
    document.getElementById("items-sold").value = soldCount;

    let totalRevenue = parseFloat(document.getElementById("total-revenue").value) || 0;
    totalRevenue -= price;
    document.getElementById("total-revenue").value = totalRevenue.toFixed(2);
}

方案2：读取本地JSON文件获取价格 #

如果必须从JSON文件读取数据，可按以下步骤实现：

前置准备 #

将你的JSON文件放入项目wwwroot目录下，命名为products.json，确保可通过/products.json路径正常访问。

修改HTML代码 #

将商品ID作为参数传入点击函数：

<input type="button" onclick="deductValueAndRevenue(@item.Id)" value="-" />
<input type="button" onclick="incrementValueAndRevenue(@item.Id);" value="+" />

修改JS代码 #

// 缓存商品数据，避免每次点击重复发起请求
let productList = null;

// 读取JSON并匹配对应ID的商品价格
async function getPriceById(productId) {
    if (!productList) {
        const res = await fetch('/products.json');
        productList = await res.json();
    }
    const target = productList.find(item => item.Id === productId);
    return target ? target.Price : 0;
}

async function incrementValueAndRevenue(productId) {
    const price = await getPriceById(productId);
    let soldCount = parseInt(document.getElementById("items-sold").value) || 0;
    soldCount++;
    document.getElementById("items-sold").value = soldCount;

    let totalRevenue = parseFloat(document.getElementById("total-revenue").value) || 0;
    totalRevenue += price;
    document.getElementById("total-revenue").value = totalRevenue.toFixed(2);
}

// 扣减函数按相同逻辑改造即可
async function deductValueAndRevenue(productId) {
    const price = await getPriceById(productId);
    let soldCount = parseInt(document.getElementById("items-sold").value) || 0;
    if (soldCount <= 0) return;
    soldCount--;
    document.getElementById("items-sold").value = soldCount;

    let totalRevenue = parseFloat(document.getElementById("total-revenue").value) || 0;
    totalRevenue -= price;
    document.getElementById("total-revenue").value = totalRevenue.toFixed(2);
}

注意：Razor Pages默认开启wwwroot目录的静态文件服务，只要JSON文件放在该目录下即可正常访问，无需额外配置。

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