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

我建议你使用数据斜杠属性，并使用类似jQuery的东西来处理事件，并使用数据斜杠属性。

数据斜杠属性只是一个名称以“data-”开头的属性。您可以根据需要定义多个这些属性，在任何元素上，所有浏览器都支持它们。

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

当执行edit方法时，你可以访问元素（使用这个），使用jQuery你可以获得属性值：

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

您甚至可以更进一步，删除“onclick = edit”部分。然后使用jQuery将click事件挂钩到具有必需属性的所有元素，如此

$(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（或任何其他库），这将使您更轻松。如果你使用它，我建议你使用属性的“命名空间”名称来避免冲突。即，类似于“data-mynamespace-id”，使用任何有意义的命名空间。

Answer 3

试试这个：

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

请注意，如果您想将ViewModel中的变量传递给javascript，您应该使用这样的qoutes：

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

您也可以在表格之前尝试编辑功能。

如何将数据从视图模型传递到javascript函数？

3 个答案: