Kliknij dynamicznie utworzone przyciski - jquery, asp.net-mvc, przycisk, widok

Używam MVC, aw moim widoku dynamicznie generuję zawartość za pomocą pętli For. W każdej pętli wstawiam przycisk „Zobacz komentarze”.

Jeśli kliknę pierwszy przycisk „Zobacz komentarze”, jak to zrobićczy mogę uzyskać kod, który jest odpowiedni dla danych w pierwszym bloku (np. informacje o detergencie do naczyń)? Na przykład, jak mogę pobrać identyfikator z modelu dla tego wiersza danych, ponieważ przyciski są generowane dynamicznie?

Chciałbym użyć poniżej kodu jQuery. Ale nie widzę, jak złapać identyfikator tego konkretnego wiersza.

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

Odpowiedzi:

Gdy generujesz HTML dla każdego elementu,dodaj atrybuty danych do przycisku zawierającego wartości, które nie są wyświetlane, aby można je było pobrać w zdarzeniu kliknięcia. Uwaga: użyj nazwy klasy dla przycisku (nie atrybutu ID), ponieważ będziesz mieć zduplikowany identyfikator, który jest nieprawidłowym HTML.

Na przykład

@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>
}

i skrypt

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

Możesz wstawić identyfikator odpowiedniego wiersza w data-id atrybut przycisku i zestawu seeComments jako class przycisku. Nie podałeś definicji klasy modelu, więc zakładając, że to an IEnumerable, Twój kod widoku byłby taki

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


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

lub jak poniżej, jeśli twoja klasa modelu zawiera zagnieżdżone IEnumerable właściwość o nazwie Answers

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


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

następnie powiązaj zdarzenie click dla wszystkich See Comments przyciski za pomocą .seeComments wybierz i użyj .data("id") złapać identyfikator jak poniżej

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