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

Question

У меня есть таблица результатов на странице ASP.Net MVC, где последний столбец является ссылкой 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 вы можете связать свое событие click.

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

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

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

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

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