如何將數據從視圖模型傳遞到JavaScript函數？

Question

例如我有以下的模型，我傳遞的列表視圖：

public class ExampleViewModel 
{ 
    public int id { get; set; } 
    public string name { get; set; } 

} 

在我看來，我有以下幾點：

@model List<ExampleViewModel> 

<table> 
    <tr> 
     <th>Name</th> 
     <th>Action</th> 
    </tr> 
    @foreach (var x in Model) 
    { 
     <tr> 
      <td> 
       @Html.DisplayFor(m => x.name) 
      </td> 
      <td> 
       <input type="button" onclick="edit();" value="Edit"> 
      </td> 
     </tr> 
    } 
</table> 

<script type="text/javascript"> 
    function edit(x) { 
     window.location = "/Home/Edit?id=" + x 
    } 
</script> 

什麼我有在流逝麻煩x.id到edit（）函數。我預計：

<input type="button" onclick="edit(@x.id);" value="Edit"> 

工作，但它沒有。

感謝

Answer 1

試試這個

<input type="button" onclick="edit(@x.id);" value="Edit"> 

Answer 2

試試這個：

<input type="button" onclick="edit('@(x.id)');" value="Edit"> 

注意，如果你想從您的視圖模型傳遞變量給JavaScript，你應該使用qoutes這樣的：

<script type="text/javascript"> 
    var x = '@Model[0].x'; 
</script> 

你也可以試試表之前的編輯功能的聲明。

Answer 3

我建議你使用數據削減atributes，並使用類似jQuery來處理事件，並利用這些數據削減的屬性。

數據斜槓屬性只是一個名稱以「data-」開頭的屬性。您可以根據需要定義許多這樣的屬性，所有瀏覽器都會支持它們。

<input type="button" onclick="edit" data-id="@x.id" value="Edit"> 

當執行編輯方法，您可以用jQuery訪問元素（使用本），並可以得到值位於此屬性：

var id = $(this).attr('data-id'); 

你甚至可以走得更遠，並刪除「onclick = edit」部分。然後使用jQuery click事件與所需的屬性susbscribe到所有的元素，像這樣

$(document).ready(function() { 
    // this happens when all the page has been loaded in the browser (ready) 
    $('input[data-id]').on('click', function() { 
    // find the input elements with the "data-id" attr, and, when 'click'ed... 
    var id = $(this).attr('data-id'); 
    //get the attribute value and do whatever you want with it... 
    }); 
}); 

*注意：您可以使用var id = $(this).data('id');作爲替代。

這種技術被稱爲「不顯眼的JavaScript」。要做到這一點，當然，你需要在你的頁面中包含jQuery。請開始使用jQuery（或任何其他庫），這將使你更容易。如果您使用它，我建議您爲屬性使用「名稱空間」名稱以避免衝突。 I.e，類似於「data-mynamespace-id」，使用任何有意義的名稱空間。