点击动态创建按钮

我正在使用MVC，在我的视图中，我使用For循环动态生成内容。在每个循环中，我插入一个“查看评论”按钮。点击动态创建按钮

如果我点击第一个“查看评论”按钮，我该如何获取它以执行与第一个数据块中的数据相关的代码（例如Dish Detergent信息）？例如，如何从模型中为该行数据获取ID，因为按钮是动态生成的？

我想使用下面的jQuery代码。但我不明白如何抓住特定行的ID。

$("#seeComments").click(function() { 
     alert(ID); 
    });

Dynamic button generation

来源

2014-09-27 nanonerd

当您为每个项目生成html时，将数据属性添加到包含您未显示的值的按钮，以便可以在click事件中检索这些值。注意使用按钮的类名称（不是ID属性），因为您将有重复的ID，这是无效的HTML。

例如

@for(int i = 0; i < Model.Count; i++) 
{ 
    <div class="answer"> // wrapper to allow selection 
    <div class="heading"> 
     <span class="name">@Model[i].Name</span> 
     <span class="rating">@Model[i].Rating</span> 
    </div> 
    ..... 
    <button class="comments" type=button" data-id="@Model[i].ID">See Comments</button> 
    .....  
    </div> 
}

和脚本

$('.comments').click(function() { 
    var id = $(this).data('id'); 
    var rating = $(this).closest('.answer').find('.rating').text(); 
    .... 
}

来源

2014-09-27 03:34:59

尼斯，工作。但不得不将@Model [i]更改为@ Model.ElementAt（i），因为无法在IEnumerable上使用索引。并感谢您额外的脚本信息。必须查看“最接近的”，但现在明白了。作品美丽... ;-) – nanonerd 2014-09-27 05:47:39

然后你不需要一个'for'循环（就像你在你的问题中指出的那样）。如果它的'IEnumerable'，你可以使用'foreach'循环例如'foreach（模型中的var item）{...'并使用'@ item.Name' – 2014-09-27 06:08:42

最初，我使用的是foreach。但是，我需要计数，因为我想显示高亮部分中的前5个项目，然后显示另一个部分中的剩余部分。有没有办法使用foreach进行计数？这就是为什么我切换到For循环。再次感谢，一点一点的学习...... – nanonerd 2014-09-27 14:27:23

你可以把相关行的ID在按钮的data-id属性和设置seeComments作为按钮的class。你不包括你的模型类的定义，因此假定这是一个IEnumerable，您的视图代码会是这样

@foreach (var answer in Model) 
{ 
    ..... 


    <button type="button" data-id="@answer.ID" class="seeComments">See comments</button> 
}

或像下面如果你的模型类包含一个名为嵌套IEnumerable财产Answers

@foreach (var answer in Model.Answers) 
{ 
    ..... 


    <button type="button" data-id="@answer.ID" class="seeComments">See comments</button> 
}

然后结合的Click事件使用.seeComments选择所有See Comments按钮和使用.data("id")抓住像下面

$(".seeComments").click(function() { 
    // this will display the data-id value of the clicked button 
    alert($(this).data("id")); 
});

的ID

来源

2014-09-27 03:30:47 ekad

点击动态创建按钮

回答

相关问题