ajax仅适用于第一行表

时间:2012-06-08 06:36:24

标签: asp.net-mvc-3 asp.net-ajax

我正在使用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" })

AJAX:

 $('#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和size中传递值时...它仅为所有行传递第一行的值

1 个答案:

答案 0 :(得分:1)

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

您的问题是您有多个链接使用相同的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');

如果您不需要其他地方的隐藏字段,您可以使用此方法删除它们。