MVC Asp.net에서 부분 뷰를 렌더링 한 후에 자바 스크립트 기능을 시작할 수 있습니까?

Question

MVC를 처음 접했을 때이 질문을 앞에 두겠습니다.

나는 부분보기에서 드 벡스프 그리드를 렌더링하는 인스턴스가 있습니다.

@Html.Partial("MyGridPartial", Model) 

이 부분 뷰 렌더링을 통해 모델이 채워지는 순간에 자바 스크립트 기능을 시작해야합니다. 나는 이것을 통해 이것을 시도했다. :

settings.ClientSideEvents.EndCallback 

나는이 점에 도달 할 수 있지만, 그 시간에 나는 그것이 좋은하지 않습니다 그래서 모델 자체가 채워 없습니다. 어떤 클라이언트 측 javascript 코드로 점프하기 위해 렌더링을 부분 뷰에 연결하는 일반적인 방법을 알고 있는지 궁금합니다.

Answer 1

렌더링 할 뷰의 정상적인 흐름의 일부로이 부분을 렌더링하는 경우 대답은 NO입니다.

부모보기가 렌더링되기 전에 Partial이 문자열로 변환됩니다. 이 시점에서 브라우저에서 마크 업을 전혀 발견하지 못했고 jscript가 읽히지 않았습니다.

는 만약, 다른 한편으로는, 당신은 당신의 JQuery와 준비 기능에 부분 렌더링 : 나는 당신이 (액션 ​​메소드에 의해 불려 가도록 부분) 부분 액션을 사용해야 할 것이라고 생각

$(document).ready(function() {

. 액션 부분 지문은 (평안) URL을 참조하여 JQuery와 준비 함수 내에서 호출 할 수 있습니다

$('#divMyGridPartial').load('/Grids/MyGridPartial/{id}'); 

하고는 JScript를/JQuery와 기능이 준비 시리즈 내에서 호출 할 수 있습니다 후속.

Action Partial의 또 다른 장점 인 Model은 액션 메소드 내에서 형성되며 필요에 따라 컨텍스트로 생성 될 수 있습니다.

Answer 2

PartialView의 경우 서버의 뷰에서 렌더링하면 Dave의 방법이 가장 잘 작동합니다. 코드를 DOM 준비 이벤트에 연결하기 만하면됩니다.

$(document).ready(function(){ 
    //Javascript logic to fire goes here 
}); 

하거나 속기 버전을 prever 경우 ...

그런 다음 같은 방법이 작동 아약스를 통해로드되는 부분 뷰를 렌더링하는 경우

$(function(){ 
    //Javascript logic to fire goes here 
}); 

. jQuery는 Ajax를 통해 클라이언트에 전달 된 HTML에서 javascript를 실행합니다. 일단 올바르게 호출 되었다면 DOM에 연결됩니다 (이 테스트를 자유롭게하면 DOM에 연결되면서 메모리가 실행됩니다. load() 메서드의 기능입니다.) 실행하려는 javascript가 응답에 있다고 가정합니다. 부모 페이지에서 Ajax 요청을 보내는 경우 가장 좋은 방법은 전체 이벤트에 연결하는 것입니다.

$("#wrapperAwaitingContent").load("/Grids/MyGridPartial", {id: null /*parameters*/}, function(text, status, xhr){ 
    //Javascript logic to fire goes here 
}); 

나를 위해 .load() 호출에 사용 된 URL은 또한 수있는 옵션이

$("#wrapperAwaitingContent").load("@Url.Action("MyGridPartial", "Grids")", {id: null /*parameters*/}, function(text, status, xhr){ 
    //Javascript logic to fire goes here 
}); 

서버에 UrlHelper를 사용하여 해결 될 때 (내가 여기 클라이언트 측에서 매개 변수를 채우는거야) Unobtrusive Ajax를 사용하여 이와 비슷한 작업을 수행합니다. (내가 여기에 서버 측에서 매개 변수를 채우는거야)

@Ajax.ActionLink("Load Data", "MyGridPartial", "Grids", new { id = null/*parameters*/ }, new AjaxOptions() { UpdateTargetId = "wrapperAwaitingContent", OnComplete="onCompleteMethodName" }) 

이이 완료 때 당신은 HTML과 호출하는 방법을 수신 할 요소 이외의 AjaxOptions에 대해 설정할 수있는 이상의 속성이 있지만 찾을 I 공유 자바 스크립트 파일에 정의 된 함수를 재사용하여 다음과 같이 입력하면 채워집니다.

$("a[data-ajax='true']").each(function() { 
    var ajaxUpdate = $(this).closest("data-ajax-container"); 
    $(this).attr("data-ajax-update", $(this).attr("data-ajax-update") ? $(this).attr("data-ajax-update") : ajaxUpdate); 
    $(this).attr("data-ajax-mode", $(this).attr("data-ajax-mode") ? $(this).attr("data-ajax-mode") : "replace"); 
    $(this).attr("data-ajax-success", $(this).attr("data-ajax-success") ? $(this).attr("data-ajax-success") : "AjaxSuccess"); 
    $(this).attr("data-ajax-complete", $(this).attr("data-ajax-complete") ? $(this).attr("data-ajax-complete") : "AjaxComplete"); 
    $(this).attr("data-ajax-failure", $(this).attr("data-ajax-error") ? $(this).attr("data-ajax-error") : "AjaxError"); 
});