點擊動態創建按鈕

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

點擊動態創建按鈕

回答

相關問題