>  기사  >  웹 프론트엔드  >  동적 기능을 위해 Razor와 JavaScript 코드를 원활하게 통합하는 방법은 무엇입니까?

동적 기능을 위해 Razor와 JavaScript 코드를 원활하게 통합하는 방법은 무엇입니까?

Susan Sarandon
Susan Sarandon원래의
2024-10-27 03:53:29610검색

How to Seamlessly Integrate Razor and JavaScript Code for Dynamic Functionality?

Razor와 JavaScript 코드 혼합

Razor 뷰로 작업할 때 동적 기능을 위해 JavaScript 코드를 통합해야 하는 경우가 많습니다. 그러나 한 가지 일반적인 과제는 Razor와 JavaScript 코드를 효과적으로 혼합하는 것입니다.

코드 예

다음 코드 조각을 고려하세요.

<code class="csharp"><script type="text/javascript">
        var data = [];

        @foreach (var r in Model.rows)
        {
                data.push([ @r.UnixTime * 1000, @r.Value ]);
        }
</script></code>

이 예의 목표는 다음과 같습니다. C# 모델에서 JavaScript 데이터를 동적으로 생성합니다. 그러나 이 코드는 Razor가 코드 블록을 해석하는 방식으로 인해 예상대로 작동하지 않을 수 있습니다.

해결책: 사용

이를 달성하려면 Razor 코드 블록 내의 요소:

<code class="csharp"><script type="text/javascript">
   var data = [];

   @foreach (var r in Model.rows)
   {
      <text>
            data.push([ @r.UnixTime * 1000, @r.Value ]);
      </text>
   }
</script></code>

요소를 사용하면 Razor 블록 내에 리터럴 JavaScript 코드를 포함할 수 있습니다. 이렇게 하면 JavaScript 코드가 텍스트로 처리되며 Razor에서 실행되지 않습니다.

이 코드가 렌더링되면 다음 JavaScript가 생성됩니다.

<code class="javascript">var data = [];

data.push([ @r.UnixTime * 1000, @r.Value ]);
data.push([ @r.UnixTime * 1000, @r.Value ]);
...</code>

이 솔루션은 Razor와 Razor를 효과적으로 혼합합니다. JavaScript 코드를 사용하면 C# 모델에서 동적 JavaScript 데이터를 생성할 수 있습니다.

위 내용은 동적 기능을 위해 Razor와 JavaScript 코드를 원활하게 통합하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.