CRUD场景下：如何从Razor向JavaScript函数传递参数？

方式一的修正 #

你的方式一代码存在语法错误（多了冗余的" />），且如果@item.Id是字符串类型，需要用引号包裹，否则JavaScript会把它当作未定义变量解析。修正后代码：

Razor代码： #

<input type="button" class="btn btn-primary mx-1" value="Delete" onclick="deletePill('@item.Id')" />

JavaScript函数： #

function deletePill(Id) {
    console.log(Id);
}

如果@item.Id是数字类型，不需要引号，直接写deletePill(@item.Id)即可。

方式二的修正 #

方式二里你给按钮加了data属性，但函数既没接收参数，也没主动读取该属性的值。修正方案有两种：

方案1：调用时直接传参 #

修改Razor代码，把data属性的值作为参数传入函数：

<input type="button" class="btn btn-primary mx-1" value="Delete" onclick="deletePill(this.getAttribute('data'))" />

JavaScript函数保持原写法即可。

方案2：函数内读取标准data-*属性 #

推荐使用HTML标准的data-*属性（比如data-id），再在函数里通过元素获取值：

<input type="button" class="btn btn-primary mx-1" value="Delete" data-id="@item.Id" />

// 用事件监听替代内联onclick（更规范）
document.querySelector('.btn-primary').addEventListener('click', function() {
    const id = this.dataset.id;
    console.log(id);
});

更规范的写法（推荐） #

避免使用内联onclick，改用事件委托或批量绑定事件，代码更易维护，也能避免引号嵌套的问题：

Razor代码： #

<input type="button" class="btn btn-primary mx-1 delete-btn" value="Delete" data-id="@item.Id" />

JavaScript代码： #

// 给所有删除按钮绑定点击事件
document.querySelectorAll('.delete-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        const id = this.dataset.id;
        console.log(id);
        // 此处可编写删除逻辑
    });
});

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