将项目值从 model 传递给 JS - MVC C#

Question

我正在使用 MVC 开发一个项目，我想知道是否有一种方法可以将输入的 ID（从我的 model 项之一接收到的值）存储到我的一个 JS 变量中

下面是输入的 id 是如何被寻址的

 @foreach (var item in Model) { <input type="hidden" value="@item.id" id="@item.id"> <input type="hidden" value="@item.nome" id="@item.nome"> <input type="hidden" value="@item.preco" id="@item.preco"> }

这是我在 my.JS 文件中尝试做的

 var id = document.getElementById('@item.id').value; var nome = document.getElementById('@item.nome').value; var preco = document.getElementById('@item.price').value;

Answer 1

您可以使用 css class 标记要存储 id 的元素

1. select 使用 js 的所有元素 css class
2. 使用循环读取每个元素的 id 属性
3. 以您需要的方式存储它，例如。 数组

Answer 2

好吧，如果您尝试这样做，您会发现您的值已保存。

let id = document.getElementById('Id').value;
let name = document.getElementById('Name').value;
let price = document.getElementById('Price').value;
console.log(id);
console.log(name);
console.log(price);

但我以某种方式无法在 html 中使用它们。例如，这不起作用。

<script>
    document.getElementById('Id').innerHTML = id;
    document.getElementById('Name').innerHTML = name;
    document.getElementById('Price').innerHTML = price;
</script>
<h1 id="Id"></h1>
<h1 id="Name"></h1>
<h1 id="Price"></h1>

可能是因为输入被隐藏了。

Answer 3

方法一

好吧，您可以将该项目 ID 直接公开给 JavaScript

<script>
// this must be in the .html file, using window makes the variable global
// most rendering frameworks don't do conditional/server side rendering on static js files
window.ITEM_DATA = {
    itemId: "@item.id"
}
</script>

<input type="hidden" value="@item.id" id="@item.id">
<input type="hidden" value="@item.nome" id="@item.nome">
<input type="hidden" value="@item.preco" id="@item.preco">

方法二

或者，您可以给每个输入一个 class 和 select 所有类（或所有类型隐藏的输入）

<input type="hidden" value="@item.id" id="@item.id" class="item-data">
<input type="hidden" value="@item.nome" id="@item.nome" class="item-data">
<input type="hidden" value="@item.preco" id="@item.preco" class="item-data">

// this could be in its own file because we aren't relying on the server
// this is client-side js
const [itemId, itemNome, itemPreco] = document.querySelectorAll(".item-data")
// this could also fit a narrow use case
// document.querySelectorAll("input[type='hidden']")

编辑：对方法 2 添加了说明

Answer 4

您可以直接在 razor 页面中访问 model，例如 @ModelName.objectname 但您应该导入 model，例如 @model ModelName 示例：@Model.id