如何通过使用 MVC 单击图像从锚标记传递 ID 值 onclick 函数？答案

【问题标题】：how to pass ID value onclick function from anchor tag by click on image using MVC?如何通过使用 MVC 单击图像从锚标记传递 ID 值 onclick 函数？
【发布时间】：2017-12-12 12:12:18
【问题描述】：

基于数据库的值状态将是Y或N。如果是Y表示它将被激活.png将被显示。它工作正常。当我单击 active.png 图像然后锚标记onclick="GetRecords1(' + item.ModuleID + '); 函数时，ID 值不会传递给事件。

如何传递active.png图片的点击ID值。

<script>
    $(document).ready(function () {
        $("#DomainID").change(function () {
            var id = $(this).val();
            $("#example tbody tr").remove();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("ViewModules")',
                dataType: 'json',
                data: { id: id },
                success: function (data) {
                    var items = '';
                    $.each(data.EmpList, function (i, item) {
                        $("#findValue").show();
                        /*Find Role here - Comparing Emp List ModuleId to RoleList ModuleId*/
                        var RoleName = $(data.role).filter(function (index, item) {
                            return item.ModuleID == item.ModuleID
                        });

                        if (item.ParentModuleID == -1) {
                            item.ModuleName = " -- " + item.ModuleName
                        } else {
                            item.ModuleName = item.ModuleName
                        }
                        var Status = '';
                        if (item.Status == "Y") {
                            Status = '<a href="JavaScript:void(0)" onclick="GetRecords1(' + item.ModuleID + ');" title="Disable status"><img src="/img/Active.png" height="22" width="42"/></a>'
                        } else {
                            Status = '<a href="JavaScript:void(0)" id="inActiveStatus" title="Active status"><img src="/img/InActive.png" height="22" width="42"/></a>'
                        }

                        var rows = "<tr>"
                            + "<td>" + (i + 1) + "</td>"
                            + "<td>" + item.ModuleName + "</td>"
                            + "<td>" + item.Url + "</td>"
                            + "<td>" + RoleName[i].RoleName + "</td>"
                            + "<td>" + '<a href="@Url.Action("EditModules", "Account")?id=' + item.ModuleID + '" class="font-icon font-icon-pencil" title="Edit"></a>&nbsp;&nbsp;&nbsp;' + Status + "</td>"
                            + "</tr>";
                        $('#example tbody').append(rows);
                    });
                },
                error: function (ex) {
                    var r = jQuery.parseJSON(response.responseText);
                        alert("Message: " + r.Message);
                        alert("StackTrace: " + r.StackTrace);
                        alert("ExceptionType: " + r.ExceptionType);
                }
            });
            return false;
        });
    });
</script>

通过：

<script>
    $(document).ready(function () {
        $('#example tbody').on('click', function GetRecords1(ModuleID) {
            var id = ModuleID;
            alert("Status Clicked:" + ModuleID);
        });
    });
</script>

【问题讨论】：

为什么要投反对票？

标签： javascript jquery asp.net ajax asp.net-mvc

【解决方案1】：

<a id="123" onclick="someFunction(this.id)"></a>

javascript代码：-

someFunction(id){
控制台.log(id)
}

【讨论】：

【解决方案2】：

您为什么使用内联 JavaScript？您可以轻松使用事件委托on 来绑定点击事件。

这是您修改后的代码：

Status = '<a href="JavaScript:void(0)" data-id="@item.ModuleID" data-status="@item.Status" class="user-status" title="Disable status"><img src="/img/Active.png" height="22" width="42"/></a>'

为标签添加了一个类user-status，并将id分配给data-id属性。

现在从点击事件中获取 id：

$(document).on('click','.user-status', function(){
  var getId = $(this).data('id');
  var getStatus = $(this).data('status');
  alert("Status Clicked:" + getId );
});

【讨论】：

如何在相同的代码中传递状态值？任何想法
@IvinRaj：以同样的方式，当我得到 id 后，检查我更新的答案。