Передача параметров из ссылок при их циклической генерации
 

Есть такой код на станице HTML (применяется Razor):

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.PetName)
        </td>
        <td>
            <a href="#" id="linkCarInfo" data-num=@item.Id>Описание</a>
        </td>
    </tr>
}

, генерируются ссылки для описания авто, которое должно выводиться на странице ниже в отдельном блоке div:

<div id="carInfo"></div>

.

Для получения описания авто необходимо вызвать скрипт что-то вроде этого:

$(document).ready(function () {
    $("#linkCarInfo").click(function () {
        var id = $(this).data("num");
        Car.getCarInfo(id);
    });
});

Car = {
    getCarInfo: function (id) {
        $.ajax({
            dataType: "Json",
            contentType: "application/json; charset=utf-8",
            asynch: false,
            url: "/Home/CarInfo/" + id,
            success: function (output, status, xhr) {
                var car = eval(output);
                Car.viewCarInfo(car);
            },
            error: function (error) {
                alert("Error: " + error);
            }
        });
    },

    viewCarInfo: function (car) {
        var result = "Модель: " + car.model + "<br/>";
        result += "Максимальная скорость: " + car.maxSpeed + "<br/>";
        result += "Разгон до 100 км/ч за" + car.acceleration + " сек<br/>";
        
        document.getElementById("carInfo").innerHTML = result;
    }
}

В итоге работает только при нажатии на первую ссылку. При нажатии на последующие ноль реакции. Изучаю ASP.net MVC и по JQuery знаний пока мало (как и по JS):) .

Сам(и) вопрос(ы):
Как правильно делать обработку таких ссылок или как их генерировать, чтоб потом под один обработчик запихнуть и считывать там только ID. Конечно интересно решение ненавязчивого JS, без подвески аттрибута onclick или вызова функции JS в ссылке.

id – на страницы должен быть уникальным. Судя же по вашему коду, приведённому выше, он выводится несколько раз в цикле, а jQuery обработчик события назначает только одному вывод id заменить на class назначить обработчик события через метод each.

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.PetName)
        </td>
        <td>
            <a href="#" class="linkCarInfo" data-num=@item.Id>Описание</a>
        </td>
    </tr>
}

$(document).ready(function () {
    $(".linkCarInfo").each(function() {
		$(this).click(function () {
			Car.getCarInfo($(this).data("num"));
		});	
	});
});

Так на мой взгляд более симпатично смотрится.:)

jQuery(function($) {
	var getCarInfo = function(id) {
		if ( !id ) return;
		$.getJSON('/Home/CarInfo/' + id, function(data) {
			$('#carInfo').html(
				"Модель: " + data.model + "<br/>" +
				"Максимальная скорость: " + data.maxSpeed + "<br/>" +
				"Разгон до 100 км/ч за" + data.acceleration + " сек<br/>"
			);
		});
	};
	
	$('.linkCarInfo').each(function() {
		$(this).click(function() {
			getCarInfo( $(this).data('num') );
		});
	});
});

Спасибо. Заработало :dance:
Догадывался, то что из-за уникальности id на странице не работает, но как исправить не знал:)