테이블의 링크 Ajaxing

Question

마지막 열이 세부 정보보기 링크 인 ASP.Net MVC 페이지에 결과 표가 있습니다. 사용자에게 세부 정보보기 링크를 클릭하고 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)에서 데이터를 쉽게 반환하고 자바 스크립트를 사용하여 소비 할 수 있습니다.