4

例如，我有以下模型，我将列表传递给视图：

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">

工作，但它没有。

谢谢

4

3 回答 3

4

我建议您使用数据斜线属性，并使用 jQuery 之类的东西来处理事件，并使用数据斜线属性。

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

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

当编辑方法被执行时，你可以访问元素（使用这个），并且他们用 jQuery 你可以得到属性值是这样的：

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

您甚至可以更进一步，删除“onclick=edit”部分。然后使用 jQuery 为所有具有 required 属性的元素订阅 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”之类的东西，使用任何有意义的东西作为你的命名空间。

于 2013-07-10T11:11:37.140 回答
4

尝试这个

<input type="button" onclick="edit(@x.id);" value="Edit">
于 2013-07-10T10:51:29.517 回答
1

尝试这个：

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

请注意，如果要将变量从 ViewModel 传递给 javascript，则应使用 qoutes，如下所示：

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

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

于 2013-07-10T10:49:56.040 回答