MVC 애플리케이션에서 Jquery_jquery를 사용하는 방법

서문: 눈 깜짝할 사이에 벌써 11월 중순이 되었고, 오늘부터 ASP.NET MVC의 자세한 사용법을 계속해서 공부할 예정이어서 이 독서 노트와 개인적인 경험을 한 권의 책으로 적어보겠습니다. 모든 사람이 뭔가를 배울 수 있도록 블로그에서 제가 읽은 책은 ASP.NET MVC 고급 프로그래밍입니다. 아래에서는 MVC에서 JavaScript와 Jquery를 사용하는 방법에 대해 설명하겠습니다. 지금 우리가 자주 사용하는 Ajax도 있습니다.

1. Ajax 기본 소개

　(1) 현재 우리가 만드는 거의 모든 웹 애플리케이션은 Ajax 기술을 사용합니다. 기술적으로 말하면 Ajax는 Ajax(Asynchronous JavaScript and XML)를 나타냅니다. 실제로 이는 좋은 사용자 경험을 갖춘 반응형 웹 애플리케이션을 구축하는 데 사용되는 모든 기술을 나타냅니다.

　(2) ASP.NET MVC4는 최신 웹 프레임워크이며 다른 최신 웹 프레임워크와 마찬가지로 처음부터 Ajax 기술을 지원합니다. Ajax 지원의 핵심은 오픈 소스 JavaScript 라이브러리 Jquery에서 비롯됩니다.

　(3) MVC에서 Ajax를 사용하려면 Jquery를 배워야 합니다. Jquery는 이 블로그의 주요 초점이 아니므로 이전에 배우지 않았다면 동일한 초기 학습부터 시작하는 것이 좋습니다. 내 Jquery 학습은 "Sharp Jquery"에서 비롯됩니다.

2. MVC 애플리케이션에서 Jquery를 사용하는 방법

　(1) Visual Studio 프로젝트 템플릿을 사용하여 새 ASP.NET MVC 프로젝트를 만들면 기본적으로 Jquery를 사용하는 데 필요한 모든 콘텐츠가 생성됩니다. 각 새 프로젝트에는 많은 .js 파일이 포함된 Scripts 폴더가 포함됩니다. 그림과 같이 새로운 mvc 프로젝트를 생성하여 살펴볼 수 있습니다.

　

　(2) JQuery 코어 라이브러리는 Jquery-.js라는 파일입니다. 저는 VS 2012를 사용하고 있기 때문에 Jquery 버전은 1.7.1입니다. 이 파일에는 JQuery 소스 코드가 포함되어 있습니다. Jquery-.min.js 파일도 있습니다. 압축된 JavaScript 파일에는 이름에 ".min"이 포함되어 있으며 해당하는 비압축 파일보다 공간을 덜 차지합니다(보통 절반 정도). 여기에는 불필요한 공백 문자나 주석이 포함되어 있지 않으며 모든 지역 변수 이름은 한 문자 길이입니다. 축소된 파일을 열면 읽을 수 없는 JavaScript 코드가 많이 표시됩니다. 사진과 같이:

　　

　(2) 클라이언트에서 압축된 JavaScript 스크립트 파일의 동작 및 기능은 비압축 파일과 동일합니다. 그러나 압축된 파일이 더 작기 때문에 일반적으로 압축된 파일을 클라이언트로 보내는 것이 가능합니다. 클라이언트를 최대한 많이 사용합니다(다운로드되는 데이터 바이트 수를 줄여 로드 및 실행 속도를 높일 수 있기 때문입니다).

(3) ASP.NET MVC 애플리케이션의 기본 레이아웃 뷰(_Layout.cshtml)는 일반적으로 다음 스크립트 태그를 사용하여 Jquery의 단순화된 버전을 참조합니다.

　

참고: MVC에서 Jquery를 사용하려면 레이아웃 보기를 통해 HTML 태그에 위의 스크립트 태그를 배치해야 합니다.

3. 노드에 스크립트를 배치합니다

　(1) 스크립트를 출력에 삽입하는 또 다른 방법은 Razor 섹션을 정의하여 스크립트를 방지하는 것입니다. 예를 들어 레이아웃 보기(_Layout.cshtml)에서 Scripts라는 노드를 렌더링하고 이를 선택 사항으로 추가할 수 있습니다. . 코드는 다음과 같습니다.

　

　

　

　

@RenderSection("스크립트", 필수: false);

　

(2) 이제 레이아웃을 참조하는 모든 뷰에 스크립트를 추가하여 뷰 헤드에 특정 스크립트를 삽입할 수 있습니다: Index.cshtml

　@{

　　ViewBag.Title = "홈페이지";

　}

　@섹션 스크립트{

　

　}

　(3) 이때 F5를 눌러 웹사이트를 실행하고 웹사이트 홈페이지 http://localhost:34147/home/index를 열면 jquery.validate가 있는 것을 볼 수 있습니다. 우리가 추가한 js 파일이 JS 인용문 하단에 표시됩니다. 사진과 같이:

　

　(4) 위에 소개된 방법은 스크립트 태그의 정확한 위치를 설정하여 필요한 스크립트가 적절한 순서로 표시되도록 할 수 있습니다.

4. Scripts 디렉터리의 기타 파일

　(1) MVC 애플리케이션을 만들 때 시스템이 기본적으로 많은 JavaScript 파일이 포함된 Scripts 폴더를 추가했다는 점을 논의해 보겠습니다. 그러면 이 파일은 무엇에 사용됩니까? 그건 따로 얘기해보자

　(2) Jquery 핵심 라이브러리 외에도 Scripts 디렉터리에는 Jquery UI 및 Jquery 유효성 검사라는 두 가지 Jquery 플러그인도 포함되어 있습니다. 이러한 확장은 Jquery 핵심 라이브러리의 기능을 향상시킵니다.

(3) 일부 사람들은 스크립트 이름에 "vsdoc"가 포함된 파일이 있다는 것을 발견했을 수도 있습니다. 이러한 파일은 Visual Studio에서 더 나은 지능형 감지 기능 서비스를 제공하도록 특별히 설계되었습니다. 프로그램에 있는 이러한 파일은 클라이언트에 보낼 필요가 없으며 Visual Studio는 스크립트에서 참조되는 사용자 지정 스크립트 파일을 사용할 때 자동으로 이러한 파일을 검색합니다.

(4) 이름에 "unobtrusive"라는 단어가 포함된 디렉터리의 파일은 Microsoft에서 작성한 것입니다. 이러한 비침해적 스크립트는 Jquery 및 ASP.NET MVC 프레임워크를 통합하여 위에서 언급한 비침해적 JavaScript 기능을 제공합니다. . ASP.NET MVC 프레임워크의 Ajax 기능을 구현하려면 이러한 파일을 사용해야 합니다.

　(5) 디렉터리에는 Microsoft Ajax 라이브러리를 포함하거나 Microsoft Ajax 라이브러리 위에 ASP.NET MVC3 애플리케이션으로 구축된 이름이 Microsoft라는 단어로 시작하는 일부 파일(예: MicrosoftAjax.js)도 포함되어 있습니다. 기본 종속성은 Jquery에 있으므로 ASP.NET MVC3 프레임워크에서 생성된 프로그램에는 이러한 파일이 필요하지 않으므로 응용 프로그램에서 안전하게 제거할 수 있습니다. 이러한 파일이 여기에 포함된 이유는 주로 이전 버전과의 호환성을 위한 것입니다.

오늘은 여기서 끝내겠습니다. MVC에서 jQuery를 사용하는 방법은 나중에 자세히 알아보겠습니다.