Ajaxing ссылка в таблице

Question

У меня есть таблица результатов на странице ASP.Net MVC, где последний столбец является ссылкой View Details. Я хочу, чтобы пользователь щелкнул ссылку View Details и вызвал метод AJAX, чтобы открыть результаты в плавающем диалоговом окне.

Я борюсь с тем, как связать вызов AJAX со ссылкой в ​​таблице результатов. Я использовал ссылку, которая встраивала в нее ссылку ~ / ControllerName / ViewDetails / InstanceId. Нажав на него, пользователь перешел на новую страницу, и именно это поведение я хочу заменить вызовом AJAX и диалоговым окном.

Теперь я хочу прикрепить обработчик jQuery к ссылке для запуска вызова AJAX, и я не вижу, как это сделать, кроме как написать обработчик jQuery для каждой строки в таблице результатов. Должен быть способ пометить ссылку как ссылку ViewDetails (используя класс?) И прикрепить обработчик щелчков jQuery ко всем экземплярам класса ViewDetails класса.

Answer 1

Приведите все ссылки в одном классе.

$(".classname").click(function(){
    // use selectors like $(this).prev(), $(this).next(), $(this).parent() to get data from the particular row for in your ajax call.
});

Answer 2

Вы должны использовать селектор класса jQuery.

- стиль строк с тем же именем класса CSS, напр. '.myDetailCol', а затем в Jquery вы можете связать их событие щелчка.

Теперь, поскольку у вас будут строки, вам понадобится идентификатор, который распознает, какая это строка. Для этого вы можете сохранить некоторую информацию в идентификаторе атрибута и использовать ее.

$('.myDetailCol').click(function(){
 var id = $(this).attr('id');

 $.post('myUrl', {myID: id}, function(result){
   //Show your data in the box
 });
});

Есть и другие варианты. Иногда вам может понадобиться добавить префикс к вашему идентификатору, чтобы он отличался от остального содержимого.

Поскольку вы используете ASP.Net MVC, вы можете легко вернуть данные в формате HTML (contentresult) или JSON (JsonResult) и использовать их с помощью Javascript.