Ajax 仅适用于表的第一行

Question

我正在使用 asp.net MVC3在我看来，我正在显示一个表格在表中，我的每一行都有一个链接，称为"附加文件"此链接将通过 AJAX 调用调用控制器函数

@Html.HiddenFor(modelItem => item.CourseID, new { @id = "CourseID", @Class="courseiding"})
@Html.HiddenFor(modelItem => item.PrtfID, new { @id = "prtfID" , @Class="prtfiding"})
@Html.ActionLink("Attach a file", "Index", null, new { @Id = "attchlink" })

阿贾克斯：

 $('#attchlink').click(function (e) {
        window.formCount = 0;
        e.preventDefault();
       var id = $('.prtfiding').val();
        var size1 = $('.sizing').val();
        var url2 = '@Url.Action("Index")';
        $.ajax({
            url: url2,
            data: { pid: id, size: size },
            cache: false,
            type: 'POST',
            success: function (data) {
                $('#result').html(data);
            }
        });
    });

这适用于所有行，但在 id 和大小中传递值时......它只为所有行传递第一行的值

Answer 1

元素的 Id 属性在页面上应该是唯一的。

您的问题是您有多个具有相同Id = "attachlink"的链接，并且当您调用$('#attachlink') jQuery时，仅使用第一个链接。

要解决此问题，您应该使用类而不是Id：

@Html.ActionLink("Attach a file", "Index", null, new { @class = "attachlink" })
$('.attachlink').click(function (e) {
}

然后，您可以使用 .closest() 函数获取点击事件中的"colosest"值：

var id = $(this).closest('.prtfiding').val();
var size1 = $(this).closest('.sizing').val();

或者，您可以将所有必需的数据以data-属性的形式放在ActionLink上：

@Html.ActionLink("Attach a file", "Index", null, 
    new 
    { 
         @Id = "attchlink",
         data_courseID = item.CourseID,
         data_prtfID = item.prtfID
    })

在您的 js 函数中，您可以通过以下方式访问它们：

var courseID = $(this).data('courseID');
var prtfID = $(this).data('prtfID');

如果您在其他地方不需要隐藏字段，则可以使用此方法将其删除。