將項目值從 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