부분 사이트를 다른 div로 렌더링하는 방법은 무엇입니까?

Question

사이트에 테이블이있는보기를 원하고 테이블 항목을 클릭하면 방금 클릭 한 현재 개체로 부분보기를 업데이트하려고합니다. 어떻게해야합니까?

<table> 
    @foreach (var a in annotations) 
    { 
     <tr> 
      <td> 
       <label onclick="change stuff to new Annotation">@a.Title</label> 
      </td> 
     </tr> 
    } 
</table> 
<div id="stuff">@Html.RenderPartial("Go", "new annotation")"</div> 

Answer 1

클라이언트 측 코드와 서버 측 코드가 혼합되어 있습니다. 클릭 이벤트가 발생할 때까지 클라이언트에 있으며 서버 측 코드가 실행되고 완료되었습니다.

숨겨진 div에서 부분보기를 렌더링하고 클릭 이벤트에서 다시 숨김을 해제 할 수 있습니다. 아마 이와 비슷한 뭔가 :

<table> 
@foreach (var a in annotations) 
{ 
    <tr> 
     <td> 
      <label>@a.Title</label> 
      <div style="display:none;">@Html.RenderPartial("Go", a)</div> 
     </td> 
    </tr> 
} 
</table> 

<script type="text/javascript"> 
    $(function() { 
     $('table tr td label').click(function() { 
      $(this).closest('td').find('div').show(); 
     }); 
    }); 
</script> 

청소기를 만들기 위해 필요에 따라 아마도 DOM 요소에 클래스와 ID를 추가 할 수 있습니다, JQuery와 선택기에서 올바른 div을 찾을 수있는 더 우아한 방법이있을 수 있습니다. 이러한 테이블 행이 많으면 jQuery .on() 함수를 사용하여 클릭 이벤트를보다 잘 수행 할 수 있도록 바인딩하는 것이 좋습니다. 이런 식으로 뭔가가 :

<script type="text/javascript"> 
    $(function() { 
     $('body').on('click', 'table tr td label', function() { 
      $(this).closest('td').find('div').show(); 
     }); 
    }); 
</script> 

이 바인딩이 발생 후 동적으로 추가 행이 여전히 이벤트를 처리 할 추가 보너스로, 많은 대신 DOM에 한 번의 클릭 이벤트를 바인딩합니다.

Answer 2

여기에 클라이언트 측 코드와 서버 측 코드가 섞여 있습니다.

@Html.RenderPartial("Go", a) 

은 일부 HTML을 반환하는 서버 측 메서드입니다.

<label onclick= 

클라이언트 측 코드입니다. 그래서 그 때까지는 당신의 클라이언트는 다음과 같습니다 데이터를 가져옵니다

<label onclick="The text returned from html.render partial"> 

나는 당신이 당신이 근본적으로 여기에 잘못된 경로를 추락으로 원하는 것을 달성하기 위해 MVC 좀 더 위로 읽을 필요가 있다고 생각합니다.