ASP.NET MVC에서 jQuery를 사용하여 부분 뷰를 동적으로 렌더링하는 방법은 무엇입니까?

ASP.NET MVC에서 jQuery를 사용하여 부분 뷰 렌더링

부분 뷰는 복잡한 뷰를 더 작은 크기로 분할하여 ASP.NET MVC 애플리케이션을 모듈화하는 편리한 방법입니다. , 재사용 가능한 구성 요소. 상위 뷰에서 직접 렌더링하는 것이 일반적이지만 jQuery를 사용하여 동적으로 렌더링해야 하는 시나리오가 있을 수 있습니다.

jQuery로 부분 뷰를 렌더링하는 방법

오해와는 달리 jQuery만으로는 부분 뷰를 직접 렌더링할 수 없습니다. 그러나 부분 보기를 응답으로 반환하는 작업 메서드를 호출한 다음 jQuery를 사용하여 결과를 페이지에 삽입할 수 있습니다.

다음 코드 샘플은 이를 달성하는 방법을 보여줍니다.

<code class="javascript">$('.js-reload-details').on('click', function(evt) {
    evt.preventDefault();
    evt.stopPropagation();

    var $detailDiv = $('#detailsDiv'),
        url = $(this).data('url');

    $.get(url, function(data) {
        $detailDiv.replaceWith(data);         
    });
});</code>

이 코드는 다음을 가정합니다.

• js-reload-details 클래스와 data-url이라는 데이터 속성이 있는 버튼. data-url 속성에는 부분 보기를 렌더링하는 작업 메서드의 URL이 포함되어야 합니다.
• ID 속성이 DetailsDiv인 부분 보기.
• User 컨트롤러에 Details라는 이름의 작업 메서드 . 세부 정보 작업은 정수 매개 변수를 사용하고 "UserDetails"라는 부분 보기를 반환합니다.

예제 코드

상위 보기에는 버튼을 포함해야 합니다. 적절한 data-url 속성 사용:

<code class="html"><button data-url='@Url.Action("details","user", new { id = Model.ID } )'
        class="js-reload-details">Reload</button></code>

UserDetails 부분 보기에는 원하는 HTML이 포함되어야 합니다.

<code class="html"><div id="detailsDiv">
    <!-- ...content... -->
</div></code>

이러한 요소를 결합하면 다음을 사용하여 부분 보기를 동적으로 로드하고 표시할 수 있습니다. ASP.NET MVC의 jQuery

위 내용은 ASP.NET MVC에서 jQuery를 사용하여 부분 뷰를 동적으로 렌더링하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!