javascript를 통한 @ Html.ActionLink의 MVC와 동일합니다.

Question

javascript 코드를 통해 @ Html.ActionLink와 동일한 코드를 작성할 수 있습니까? 즉, MVC 작업을 호출하면 호출 뷰로 돌아 가지 않고 새 뷰가 생성됩니다.

Answer 1

javascript은 사용중인 서버 측 언어에 대해 알지 못하는 클라이언트 측 언어입니다. 따라서 서버 측 경로 정의를 사용하여 URL을 생성하는 서버 측 도우미의 javascript에는 해당 사항이 없음이 일반적입니다.

이 아니다 당신이 달성하려고하지만 일부 URL을 전화를 사용하려면 자바 스크립트를 통해 사용자가 서버 측 도우미 사용하여이 URL을 생성 할 수있는 것을 아주 명확 : 당신이 사용하려는 경우

<script type="text/javascript"> 
    var url = '@Url.Action("SomeAction", "SomeController")'; 
    // do something with the url client side variable, for example redirect 
    window.location.href = url; 
</script> 

을 별도의 javascript 파일에있는 URL로, 상황에 따라 일부 DOM 요소에이 URL을 포함 할 수있는 서버 측 도우미에 대한 액세스 권한이 없습니다. 예를 들어

:

<div id="foo" data-url="@Url.Action("SomeAction", "SomeController")">Click me</div> 

공지 사항 우리가 DOM에 내장하고 생성 된 URL은 항상 우리의 라우팅 정의를 기반으로 올바른 될 수 있도록하기 위해 서버 측 도우미를 사용한 data-url HTML5 속성. 이제 우리는 별도의 자바 스크립트 파일에 겸손이 사업부의 클릭 이벤트에 등록하고 URL을 검색 할 수 있습니다 :

$('#foo').click(function() { 
    var url = $(this).data('url'); 
    // do something with the url client side variable, for example redirect 
    window.location.href = url; 
}); 

다른 예는 분명히 다음 서버 측 HTML 헬퍼 등을 사용하여 생성해야한다 표준 <a> 및 <form> 요소를 포함을 별도의 javascript 파일에서 수행해야하는 작업은 해당 URL 인 href 또는 action 속성을 가져와 실제 URL을 검색하고 그 URL로 무언가를 수행하는 것입니다.

Answer 2

또 다른 옵션은 URL을 페이지의 어딘가에 숨겨진 <div>에 저장하고 나중에 자바 스크립트를 통해 호출하는 것입니다. 그 결과는 다음과 같습니다

Index.cshtml :

<div style="display: none;" id="url"> 
    @Url.Action("SomeAction", "SomeController") 
</div> 

그런 다음 당신은 당신이 원하는 링크를 구축하기 위해 Script.js 파일에 이것을 사용할 수 있습니다.

var url = $("#url").text(); 

의 URL 변수는 다음 /SomeController/SomeAction에 웹 적합 링크를 포함 할 것이다.