将参数传递给javascript按钮单击处理程序

时间:2014-09-02 04:47:15

标签: javascript jquery asp.net-mvc-4

我在MVC4中有一个小应用程序。它有一个网格,每一行都有两个东西。 1)身份证 2)按钮

当用户点击按钮时,我需要调用一个将ID作为参数传递的javascript函数。我怎么能在MVC中做到这一点。我可以在以下情况下做得很好。请帮忙

以下是我的代码。

@model IEnumerable<Models.Asset>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th>
            Id
        </th>

        <th>
            Show
        </th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td width="80">
            @item.Id
        </td>


        <td>
            <button class="btnView" onclick="myfunction(@item.someProperty)">Show</button>
        ///How can I pass @item.someProperty as an parameter to click handler?
        </td>              
    </tr>    
}
</table>


<div id="imageDisplay">

    <p>

    </p>
</div>

@section scripts{
    <script type="text/javascript">
        $(function () {
            $('#imageDisplay').dialog({
                autoOpen: false
            });

            $('.btnView').click(function () {
                alert('ok');
                //How can I get id as an parameter to this function?
            });            

        });

    </script>
}

2 个答案:

答案 0 :(得分:3)

首先从按钮中删除onclick处理程序(在使用jquery处理click事件时不需要它)

试试这个:

HTML: -

<td>
  <button class="btnView" data-prop="@item.someProperty">Show</button>
</td> 

JQUERY: -

$('.btnView').click(function () {
     var prop = $(this).attr('data-prop');
     alert(prop);
});

OR

 $('.btnView').click(function () {
     var prop = $(this).data('prop');
     alert(prop);
});

或者(如果您不想在按钮上添加data-prop,那么您可以按照以下回答,抓住'Id' td table中的$('.btnView').click(function () { var id = $(this).closest('tr').find('td').eq(0).text(); alert(id); });

{{1}}

答案 1 :(得分:0)

从按钮中删除onclick处理程序(您没有名为myfunction的函数)

由于您在上一列中已经有ID值,因此您可以使用

获取它
$('.btnView').click(function () {
  var id = $(this).closest('tr').children('td').eq(0).text();
});