ajax URL에 C # 함수 .csHtml를 사용하는 자바 스크립트 함수 가있는 -razor 파일이 @Url.Content있습니다.
해당 기능을 .js내보기에서 참조 하는 파일 로 이동하고 싶습니다 .
문제는 자바 스크립트가 @기호를 "알지" 못하고 C # 코드를 구문 분석하지 않는다는 것입니다. "@"기호가있는보기에서 파일
을 참조하는 방법이 .js있습니까?
답변:
HTML5 data-*속성을 사용할 수 있습니다 . div와 같은 일부 DOM 요소를 클릭 할 때 일부 작업을 수행하고 싶다고 가정 해 보겠습니다. 그래서:
<div id="foo" data-url="@Url.Content("~/foobar")">Click me</div>
그런 다음 별도의 javascript 파일에서 DOM으로 눈에 띄지 않게 작업 할 수 있습니다.
$('#foo').click(function() {
var url = $(this).data('url');
// do something with this url
});
이렇게하면 자바 스크립트 파일에 서버 측 태그가 필요하지 않고 마크 업과 스크립트를 완전히 분리 할 수 있습니다.
글쎄, 방금 그것을하는 너겟에서 면도기 엔진을 찾았습니다! 의미는 @구문을 해결 합니다!
이름은 RazorJS 입니다.
Nuget의 패키지
2016 업데이트 :
패키지가 5 년 동안 업데이트되지 않았고 프로젝트 사이트 링크가 끊어졌습니다. 더 이상 사람들이이 라이브러리를 사용하도록 권장하지 않습니다.
문제를 해결하는 한 가지 방법 은 다음과 같습니다.
자바 스크립트 함수가있는 부분보기를보기에 추가합니다.
이렇게하면 @기호를 사용할 수 있으며 모든 javascript기능이보기에서 분리됩니다.
두 가지 옵션이 있습니다.
예를 들면 :
var MyCompany =
{
MyProject: {
MyVariable:""
}
};
그런 다음보기에서 설정합니다.
MyCompany.MyProject.MyVariable = @....
커플 링 때문에 어떤 것도 좋지 않은지 궁금 할 수 있습니다. 사실입니다. js와 뷰를 결합하고 있습니다. 그렇기 때문에 스크립트는 실행중인 위치를 인식하지 못하므로 최적이 아닌 파일 구성의 증상입니다.
어쨌든 뷰 엔진을 만들고 면도기에 대해 js 파일을 실행하고 결과를 다시 보내는 세 번째 옵션이 있습니다. 이것은 깨끗하지만 훨씬 느리므로 권장하지 않습니다.
@변수를 .js 파일로 가져 오려면 전역 변수를 사용하고 해당 .js 파일을 사용하는 mvc보기에서 해당 변수의 값을 설정해야합니다.
JavaScript 파일 :
var myValue;
function myFunc() {
alert(myValue);
}
MVC보기 파일 :
<script language="text/javascript">
myValue = @myValueFromModel;
</script>
뷰에 의해 값이 설정된 후에 함수에 대한 호출이 발생하는지 확인하십시오.
아마도 이것은 올바른 접근 방식이 아닙니다. 관심사 분리 고려. 수업 data injector에 가 있어야하며 JavaScript대부분의 경우 데이터는 JSON.
script폴더에 JS 파일을 만들고이 참조를View
<script src="@Url.Content("~/Scripts/yourJsFile.js")" type="text/javascript"></script>
이제 JavaScript리터럴 클래스를 고려 하십시오 yourJsFile.js.
var contentSetter = {
allData: {},
loadData: function (data) {
contentSetter.allData = eval('(' + data + ')');
},
setContentA: function () {
$("#contentA").html(allData.contentAData);
},
setContentB: function () {
$("#contentB").html(allData.contentAData);
}
};
또한 클래스 선언
public class ContentData
{
public string ContentDataA { get; set }
public string ContentDataB { get; set }
}
이제 다음을 Action수행하십시오.
public ActionResult Index() {
var contentData = new ContentData();
contentData.ContentDataA = "Hello";
contentData.ContentDataB = "World";
ViewData.Add("contentData", contentData);
}
그리고 당신의 관점에서 :
<div id="contentA"></div>
<div id="contentB"></div>
<script type="text/javascript">
contentSetter.loadData('@Json.Encode((ContentData) ViewData["contentData"])');
contentSetter.setContentA();
contentSetter.setContentB();
</script>
최근에이 주제에 대해 블로그를 작성했습니다 . 부분 Razor 뷰를 사용하여 외부 JavaScript 파일 생성 .
내 솔루션은 ExternalJavaScriptFileAttribute부분 Razor 뷰를있는 그대로 렌더링 한 다음 주변 <script>태그 없이 반환 하는 사용자 지정 특성 ( ) 을 사용하는 것 입니다. 따라서 유효한 외부 JavaScript 파일이됩니다.
나는 일반적으로 모델 속성에 대한 액세스가 필요한 JS를 함수로 래핑 한 다음 뷰에서 @something을 전달합니다. 예를 들면
<script type="text/javascript">
function MyFunction(somethingPresentInTheView) {
alert(somethingPresentInTheView);
}
</script>
보기에서 다음을 통해 함수 호출을 추가합니다 (예제).
<input type='button' onclick="MyFunction('@Model.PropertyNeeded')" />