asp.net-mvc : js 파일의 면도기 '@'기호

asp.net-mvc : js 파일의 면도기 '@'기호

---

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기능이보기에서 분리됩니다.

---

두 가지 옵션이 있습니다.

• 함수에서 매개 변수 로 값을 사용하고 뷰에서 연결
• 네임 스페이스를 생성하고 (JS에서 나쁜 관행으로 간주되는 공용 레벨 변수 대신)이 값을 페이지 상단에 설정 한 다음 js에서 사용하십시오.

예를 들면 :

 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>

---

I recently blogged about this topic: Generating External JavaScript Files Using Partial Razor Views.

My solution is to use a custom attribute (ExternalJavaScriptFileAttribute) which renders a partial Razor view as is and then returns it without the surrounding <script> tags. That makes it a valid external JavaScript file.

---

I usually wrap JS needing access to model properties, in functions and then pass the @something in the view. For example

<script type="text/javascript">
function MyFunction(somethingPresentInTheView) {
  alert(somethingPresentInTheView);
}
</script>

in the view I add function invocation via (just an example):

<input type='button' onclick="MyFunction('@Model.PropertyNeeded')" />

---

I think you are stuck with having to put that JS code in the View. The Razor parser, as far as I know, won't look at .js files, thus anything you have which uses @ won't work. PLus, as you have spotted, Javascript itself does not like this @ character hanging around for no reason, other then, say, in a string.

참고URL : https://stackoverflow.com/questions/7902213/asp-net-mvc-razor-symbol-in-js-file