如何使用razor元素作为jQuery函数参数？

我正在尝试创建一个按钮，单击该按钮可创建一个列表项并将其添加到现有列表中。列表项将包含来自我的模型（或者更确切地说是我的数据库）的数据

我试图用jQuery函数实现这一点，但在发送函数的参数以及如何使用这些参数方面遇到了问题

这是按钮：

<button onclick="AddItem(@Dish.DishName,@Dish.Price)">@Dish.DishName</button> 

@Dish.DishName

这是jQuery函数：

function AddItem(Name, Price) {
    var txt1 = "<li > @Name @Price</li>";        // Create text with HTML

    $(".list-group").append(txt1);   // Append new elements
}

功能附加项（名称、价格）{
var txt1=“
@Name@Price
”；//使用HTML创建文本
$（“.list group”）.append（txt1）；//追加新元素
}

我非常确定我没有正确使用

@Razor

，如果您能给我一些建议，告诉我如何修复它，以及在哪里可以找到一些使用Razor的js函数示例，我将不胜感激，因为我找不到太多

---

提前感谢

您可以使用

数据-*

属性来存储数据，并通过jquery使用该数据：

<button data-name="@Dish.DishName" data-price="@Dish.Price" id="addButton">@Dish.DishName</button> 

@Dish.DishName

在js文件中：

$('#addButton').click(){
    const name = $(this).attr("data-name");
    const price = $(this).attr("data-price");
    const item = `<li>${name} ${price}</li>`; 
    $(".list-group").append(item);
}

$（“#添加按钮”）。单击（）{
常量名称=$（this.attr（“数据名称”）；
常量价格=$（此）.attr（“数据价格”）；
const item=`
${name}${price}
`；
$（“.list group”）。追加（项目）；
}

如果必须使用

onclick

，请添加引号：

onclick=“AddItem（'@Dish.DishName'，'@Dish.Price'）”

-始终检查呈现的输出，因为应该清楚它没有将正确的字符串放入onclick中（并使用正确的

“

”

余额）但是你的函数使用了

@Name

-如果你是通过javascript传递的，就不需要这样做：

函数AddItem（Name，Price）{var txt=“
”+Name+”+Price+“
”

（或使用字符串插值）thanx freedomn-m。你说的“如果你必须我们再点击一下”是什么意思“？这不是一件常见的事情吗？如果不是的话，还有什么更好的方法呢？onclick=非常过时-有各种原因，例如处理程序必须是全局的（不能用名称空间），通常最好将标记和应用程序代码分开。Mohsen的回答中描述了更好的解决方案。