서버 개체의 매개 변수를 JavaScript로 전달하는 가장 좋은 방법

Question

뷰가있는 테이블과 뷰를 렌더링합니다. 표의 각 행은 편집 할 수있는 객체입니다. 따라서이 표의 마지막 열에는 여러 개의 '수정'버튼이 있습니다. 이 EDIT 버튼 중 하나를 클릭하면 JavaScript 함수는 현재 행이 나타내는 객체의 ID를 가져와야합니다. 궁극적으로, 나는 "onclick", "onmouseover"속성이 없으며 사용자 정의 속성이없는 깨끗한 HTML로 끝내기를 원합니다. 아래에는 2 가지 예가 있습니다. 좋은 아이디어있어?

예 1

View.aspx

<td> 
    <input type="button" value="EDIT" onclick="JSFunction(<%: ObjectId %>)" /> 
</td> 

스크립트

function JSFunction(id) 
{ 
    //some code that does whatever with id 
} 

예 2

View.aspx

<td> 
    <input type="button" value="EDIT" customAttribute="<%: ObjectId %>" /> 
</td> 

자바 스크립트

$('input[type=button]').click(function() { 
    var id = this.attr('customAttribute'); 
    //some code that does whatever with id 
}); 

P.S. 더 나은 질문 제목을 제안 할 수 있다면 함께 공유하십시오 :)

Answer 1

과거에 이것을 처리 한 한 가지 방법은 html5 데이터 속성을 사용하는 것입니다. 어느 버전이 jQuery 1.4.3 이상으로 선택되었는지.

<table> 
    <tr class="row" data-rowInfo='{"Id": "1", "Name": "Jon"}'> 
     <td> 
      Row Id 1 
     </td> 
     <td> 
      <input type="button" value="Edit"/> 
     </td> 
    </tr> 
    <tr class="row" data-rowInfo='{"Id": "2", "Name": "Mark"}'> 
     <td> 
      Row Id 2 
     </td> 
     <td> 
      <input type="button" value="Edit"/> 
     </td> 
    </tr> 
    <tfoot> 
     <tr> 
      <td></td> 
     </tr> 
    </tfoot> 
</table> 

는 그런 다음 JQuery와에 다음과 같은 작업을 수행 할 수있는 데이터를 사용하여

$("input[type=button]").click(function(){ 
    var rowInfo = $(this).parents("tr.row").data("rowInfo"); 
    //Do something with rowInfo.Id; 
}); 

방금 ​​속성보다 더 많은 정보를 포함 할 수있는 풍부한 JSON 객체를 가질 수 있습니다 때문이다. 또한 모든 관련 정보를 저장할 하나의 데이터 속성 만 선언하면됩니다.

이 작업의 예는 jsfiddle입니다.

Answer 2

나는 서버에서 ID를 <tr> 태그로 렌더링해야합니다. 자신의 속성을 구성하거나 저장할 수 있습니다. id 속성에 있습니다. 그런 다음 td 안에 편집 버튼이있는 경우 <tr> 태그에 저장된 id를 찾기 위해 jQuery를 작성하면됩니다.

HTML :

<tr myId="1"> 
<td> 
    <input type="button" value="EDIT" /> 
</td> 
</tr> 

jQuery를 :

$(function() { 
     $("input[type=button]").click(function() { 
      var id = $(this).parent().attr("myId"); 
     }); 
    }); 

내가 저장 버튼을 가지고 나는 보통 (자신의 유형을 선택하기보다는 내 편집 버튼에 "편집"의 클래스를 지정하지만 페이지에서).

Answer 3

jQuery 메타 데이터 플러그인을 사용하면 모든 요소에 다양한 방식으로 데이터를 임베드 할 수 있습니다. 일반적인 방법은 다음과 같이 클래스에 추가하는 것입니다.

<input type="button" class="button { objectId : <%: ObjectId %> }" />