Как передать данные из модели просмотра в функцию 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"> 

Обратите внимание, что если вы хотите передать переменную из вашей ViewModel в Javascript вы должны использовать qoutes так:

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

Также вы можете попробовать объявление функции редактирования перед таблицей.

Answer 3

Я бы рекомендовал вам использовать данные слэш atributes, и использовать что-то вроде JQuery для обработки событий, а также использовать данные слэш атрибуты.

Атрибут данных слэш - это просто атрибут, имя которого начинается с «data-». Вы можете определить столько атрибутов theses, сколько вам нужно, на любом элементе, все браузеры будут их поддерживать.

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

Когда метод редактирования выполняется, вы можете получить доступ к элементу (с помощью этого), и их с JQuery вы можете получить атрибуты значения лежат в этом:

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

Вы можете пойти еще дальше, и удалите часть «onclick = edit». Затем с помощью JQuery для 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», используя то, что имеет смысл как ваше пространство имен.