MVC 5 프로젝트에서 jQueryUI 라이브러리를 추가하는 방법은 무엇입니까?

MVC 5 프로젝트에서 jQueryUI 라이브러리를 추가하는 방법은 무엇입니까?

---

방금 Visual Studio 2013을 설치하고 새로운 MVC 5 프로젝트를 시작했습니다. 저는 MVC 개발에 익숙하지 않아 프로젝트에 라이브러리를 추가하는 방법을 알 수 없습니다.

비슷한 부분이 보입니다. 예를 들어, _Layout.cshtml다음 코드가 있습니다.

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

그런 다음 packages.config파일에서 :

<packages>
  <package id="Antlr" version="3.4.1.9004" targetFramework="net45" />
  <package id="bootstrap" version="3.0.0" targetFramework="net45" />
  <package id="EntityFramework" version="6.0.0" targetFramework="net45" />
  <package id="jQuery" version="1.10.2" targetFramework="net45" />
  <package id="jQuery.Validation" version="1.11.1" targetFramework="net45" />
</packages>

그런 다음 내가 아는 한 어떤 일이 발생합니다. Global.asax

그래서 .js 및 css 파일이있는 jQuery UI 라이브러리를 다운로드했습니다. 내 질문은 : 기본 라이브러리 (bootstrap 또는 jquery)와 같은 모든 곳 에서이 라이브러리를 사용한다는 측면에서 어디에 무엇을 추가해야합니까? 그리고 jQuery UI에는 콘텐츠가있는 3 개의 폴더가 있습니다. 모든 콘텐츠가 포함 된이 폴더를 프로젝트에 추가했습니다. 참조 만 추가하면됩니다.

---

_Layout.cshtml페이지 에서 CSS와 스크립트를 렌더링하는 코드 (즉 @Scripts.Render("~/bundles/modernizr"))를 번들링 이라고 합니다. 여기에서 몇 가지 정보를 확인하십시오. http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

따라서 jQueryUI를 추가하려면 다음을 수행합니다.

Global.asax.cs 파일에 여러 등록이 표시되어야합니다.

BundleConfig.RegisterBundles(BundleTable.Bundles);

BundleConfig번들을 등록 하는 클래스 로 이동합니다 . jQueryUI의 경우 다음을 수행 할 수 있습니다.

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

이것은라는 새 스크립트 번들을 생성하는 것 ~/bundles/jqueryui입니다.

그런 다음 다음을 수행하여 레이아웃 페이지에 추가 할 수 있습니다.

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

그런 다음 CSS에 대해 동일한 작업을 수행합니다.

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
              "~/Content/themes/base/jquery.ui.core.css",
              "~/Content/themes/base/jquery.ui.resizable.css",
              "~/Content/themes/base/jquery.ui.selectable.css",
              "~/Content/themes/base/jquery.ui.accordion.css",
              "~/Content/themes/base/jquery.ui.autocomplete.css",
              "~/Content/themes/base/jquery.ui.button.css",
              "~/Content/themes/base/jquery.ui.dialog.css",
              "~/Content/themes/base/jquery.ui.slider.css",
              "~/Content/themes/base/jquery.ui.tabs.css",
              "~/Content/themes/base/jquery.ui.datepicker.css",
              "~/Content/themes/base/jquery.ui.progressbar.css",
              "~/Content/themes/base/jquery.ui.theme.css"));

그리고 그것을 추가하십시오

@Styles.Render("~/Content/themes/base/css")

노트 :

• MVC4에서 비어 있지 않은 프로젝트에는 이미 jQuery가 설정되어 있습니다. 빈 프로젝트의 경우 직접 추가해야합니다. 새로운 MVC 5에 대해 100 % 확신하지 못합니다.
• NuGet에서 jQueryUi를 설치할 수 있지만 공식 패키지는이 번들링 항목을 추가하지 않습니다.
• css 및 js 파일에 대한 구식 참조를 수행 할 수 있습니다 (예 : <script language="JavaScript" src="~/Scripts/jQuery.ui.1.8.2.js" />

---

css 번들은 이제 1.11.1 버전에 대해 다음과 같이 보일 것입니다.

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
        "~/Content/themes/base/accordion.css",
        "~/Content/themes/base/all.css",
        "~/Content/themes/base/autocomplete.css",
        "~/Content/themes/base/base.css",
        "~/Content/themes/base/button.css",
        "~/Content/themes/base/core.css",
        "~/Content/themes/base/datepicker.css",
        "~/Content/themes/base/dialog.css",
        "~/Content/themes/base/draggable.css",
        "~/Content/themes/base/menu.css",
        "~/Content/themes/base/progressbar.css",
        "~/Content/themes/base/resizable.css",
        "~/Content/themes/base/selectable.css",
        "~/Content/themes/base/selectmenu.css",
        "~/Content/themes/base/slider.css",
        "~/Content/themes/base/sortable.css",
        "~/Content/themes/base/spinner.css",
        "~/Content/themes/base/tabs.css",
        "~/Content/themes/base/theme.css",
        "~/Content/themes/base/tooltip.css"));

`

---

jQueryUI + 최신 버전의 jQuery를 설치하려면 NuGet을 사용할 수 있습니다.

Install-Package jQuery.UI.Combined

이렇게하면 기존 jQuery 라이브러리가 최신 버전으로 업데이트 됩니다.

그런 다음 들어가서 다음을 App_Start/BundleConfig.cs추가 하여 참조 할 수 있습니다.

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

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
            "~/Content/themes/base/all.css"));

그런 다음 개별 페이지에서 사용하거나 _Layout.cshtml

@Styles.Render("~/Content/themes/base/css") // Add to <head> tags
@Scripts.Render("~/bundles/jqueryui") // Add above </body>

---

NuGet을 사용하여 JQuery UI를 설치 한 후 아래와 같이 BundleConfig.cs에 다음 코드 조각을 추가합니다.

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

또한

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
        "~/Content/themes/base/jquery.ui.core.css",
        "~/Content/themes/base/jquery.ui.autocomplete.css",
        "~/Content/themes/base/jquery.ui.theme.css"));

이제 아래와 같이 _Layout.cshtml에 다음 스 니펫을 추가하십시오.

 @Styles.Render("~/Content/themes/base/css")

과

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

조금 명확하게 말하고 싶습니다. 도움이 되길 바랍니다. 감사

참고 URL : https://stackoverflow.com/questions/20081328/how-to-add-jqueryui-library-in-mvc-5-project