Asp.net Core MVC 유효성 검사 스크립트를 별도의 파일로 처리

Question

유효성 검사 스크립트를 이동하려고 시도했을 때 javascript 파일을 site.js에 추가하는 과정에 있었지만 페이지에서 스크립트를 인식하고 있었지만 주름살이났습니다. site.js.

Site.js는

@{await Html.RenderPartialAsync("_ValidationScriptsPartial");} 

를 사용하는 대신 페이지에있는 페이지에 대한 검증 스크립트를 갖는 페이지에 추가 된 검증 스크립트 위에 표시 (또는이 대부분의 사람들이 그것을 할 방법입니다) 방법 위의 항목 아래에 추가 할 수있는 validation.js 페이지 추가 등을 추가합니다. 추가,

다른 페이지를 추가하면 어떻게 축소 (GULP에 추가)하고 프로덕션에 추가합니까? 스테이징 환경도 있습니다.

Answer 1

좋습니다

@section Scripts { 
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); } 
} 

다음과 같은 몸의 아래쪽에있는 _Layout.cshtml에서 그것을 참조 : 그럼 당신은 할 수

@RenderSection("scripts", required: false) 

이 같은 섹션으로 렌더링 검증 스크립트를 넣어해야한다고 종료 양식의 유효성을 검사하면 이러한 JS 파일은 사용자가 참조한보기에서만 나타납니다. 나는 그것 (이 꿀꺽 추가) 작게를 어떻게 다른 페이지를 추가 할뿐만 아니라 생산 준비 환경에 추가 할 경우

..

당신은 한 번 JS 파일을 작게를해야합니다

귀하의 모든보기 (페이지)에 대한 그들은 작동합니다.

Answer 2

스크립트는 페이지의 렌더링을 차단하여 사용자에게 느리게 표시되도록하기 때문에 모든 스크립트를 페이지 끝에로드하는 것이 이상적입니다. 이를 달성하는 방법은 레이아웃 파일의 섹션을 사용하는 것입니다. 레이아웃 파일에서

다음과 같은 코드를 추가 할 수 있습니다

이

@rendersection("scripts", required: false) 

그런 다음보기에 당신은 그들이 필요로 특정 스크립트를 추가 할 수 있습니다

@section scripts { 
    @Scripts.Render("~/Scripts/Validation.js") 
} 

스콧 구가 좋은 blog post있다을 그 좀 더 깊이있는 섹션을 설명 할 것입니다

축소에 관해서는 기본 제공 번들링 및 축소 도구 요즘 MVC 요? 이번에 또 다른 blog post이 있습니다. Rick Anderson이 말하길, 본질적으로 당신을 위해 스크립트를 자동으로 묶어서 축소하도록 설정할 수있는 다른 번들을 정의 할 수 있습니다. 번들을 정의하는 것만 큼 간단합니다 : 당신은 당신이 정의 번들 링크를 사용하는 대신 소스 파일에 대한 링크를 제외하고 위와 같이

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
      "~/Scripts/jquery-{version}.js")); 

그리고 페이지로하고 출력하기 것은 동일합니다. 위와 같이 출력하면 다음과 같이 출력됩니다.

@Scripts.Render("~/bundles/jquery")