레이아웃을 사용할 때보기 내에 스크립트 src를 추가하는 방법


101

다음과 같은 자바 스크립트 참조를 포함하고 싶습니다.

<script src="@Url.Content("~/Scripts/jqueryFoo.js")" type="text/javascript"></script>

Razor View가있는 경우 레이아웃에 추가하지 않고이를 포함하는 적절한 방법은 무엇입니까? (모두가 아닌 단일 특정보기에서만 필요합니다)

aspx에서는 콘텐츠 자리 표시자를 사용할 수 있습니다. mvc에서는 aspx를 사용하지만 Razor보기에서는 사용하지 않는 이전 예제를 찾았습니다.


1
보기에 스크립트 태그를 추가하기 만하면됩니다.
jrummell

1
내보기에 스크립트를 추가하고 싶지만 생성 된 페이지에서 소스를 볼 때 <head> 대신 html의 <body> 안에 스크립트 태그를 넣습니다.
dferraro

최근 브라우저 유형 = "텍스트 / 자바 스크립트"neede되지 않습니다
마크 Schultheiss

답변:


172

당신이 (당신이 스크립트를 원 특정 위치이 있다면) 당신이 구현할 수를 구현하는 방법을 따라 @section내에서 _Layout여전히 구조를 유지하면서, 뷰 자체에서 추가 스크립트를 추가 할 수 있도록합니다. 예 :

_나열한 것

<!DOCTYPE html>
<html>
  <head>
    <title>...</title>
    <script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
    @RenderSection("Scripts",false/*required*/)
  </head>
  <body>
    @RenderBody()
  </body>
</html>

전망

@model MyNamespace.ViewModels.WhateverViewModel
@section Scripts
{
  <script src="@Url.Content("~/Scripts/jqueryFoo.js")"></script>
}

그렇지 않으면 당신이 가진 것은 괜찮습니다. 출력 된 뷰와 "인라인"되어도 괜찮다면 뷰 <script>내에 선언을 배치 할 수 있습니다.


3
BTW, 섹션은 본질적으로 귀하가 언급 한 콘텐츠 자리 표시 자입니다. 기본 MVC 웹 프로젝트 및 페이지에 제목을 배치하는 방법을 참조하십시오.
Brad Christie

감사. 이것이 내가 찾던 것이지만 RenderSection 없이도 가능합니까? 당신은 '당신이 가진 것은 괜찮습니다'라고 말하지만 아직 아무것도 없습니다 ... 나는 스크립트 참조를 .cshtml의 맨 위에 놓았지만 결과는 참조가 <body>에 있지만 머리에
dferraro

3
@dferraro : 그런 다음 RenderSection("Scripts")레이아웃 에 추가 (자리 표시 자처럼) 한 다음 @section Scripts {}보기 내에서 를 정의 해야합니다. 어느 시점에서 "마스터"(_layout)에 대한 수정이 임박했습니다. 당신은 뷰 내에서 무엇인가를 정의하고 "사이에 배치 말할 수 없다 <head>(스크립트를 추가하는 스크립트에서 싶어하지 않는 한) 나를 위해"
브래드 크리스티

2
+1. 또한 @dferraro 더 나은 것은 jQuery 및 RenderSection에 대한 참조를 </ body> 앞에 두는 것이며 헤드에는 전혀 넣지 않는 것입니다. 오래 된 그러나 관련 독서 : developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5
MikeSmithDev

1
스크립트가 Scripts폴더에 없으면 액세스를 활성화해야 할 수도 있습니다. stackoverflow.com/questions/24763493/…
Homer

12

Razor보기 엔진을 사용하는 경우 _Layout.cshtml 파일을 편집합니다. 바닥 글에있는 @ Scripts.Render ( "~ / bundles / jquery")를 헤더 섹션으로 이동하고 원하는대로 javascript / jquery 코드를 작성합니다.

@Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
    $(document).ready(function () {
        var divLength = $('div').length;
        alert(divLength);
    });
</script>

0

아래와 같이 클라이언트 측 유효성 검사를 수행하면서 asp.net에서 사용하는 방식과 같은 스크립트 태그를 추가 할 수 있습니다.

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<script type="text/javascript" src="~/Scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $(function () {
       //Your code
    });
</script>

최근 브라우저가 type="text/javascript"필요하지 않습니다
마크 Schultheiss을
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.