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

【问题标题】：How to use razor element as jQuery function parameter?如何使用 razor 元素作为 jQuery 函数参数？
【发布时间】：2020-10-13 17:52:44
【问题描述】：

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

我正在尝试使用 jQuery 函数来完成此任务，但在发送函数的参数以及如何使用它们时遇到了问题。

这是按钮：

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

这是 jQuery 函数：

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

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

我很确定我没有正确使用@Razor，并且希望得到任何关于如何修复它的建议并且我可以在哪里找到一些关于使用剃须刀的 js 函数的示例，因为我不能找不到太多。

提前致谢

【问题讨论】：

如果您必须使用onclick，则添加引号：onclick="AddItem('@Dish.DishName', '@Dish.Price')" - 始终检查呈现的输出，因为应该清楚它没有将正确的字符串放入 onclick（并使用正确的 " ' 余额）。
但是你的函数使用@Name - 如果你通过javascript传递它就不需要了：function AddItem(Name,Price) { var txt = "<li>" + Name + " " + Price + "</li>"（或使用字符串插值）
感谢freedomn-m。 “如果您必须点击我们”是什么意思？这不是一件常见的事情吗？如果不是，还有什么更好的方法？
onclick= 非常过时 - 有多种原因，例如处理程序必须是全局的（不能命名空间），并且通常最好将标记和应用程序代码分开。 Mohsen 的回答中描述了更好的解决方案。

标签： jquery asp.net-mvc razor

【解决方案1】：

您可以使用data-* 属性来存储数据并通过jquery 使用该数据：

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

在你的 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);
}

【讨论】：