_Layout.cshtml : 레이아웃 페이지 - 마스터 페이지라고 생각하면 됨
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
@RenderBody()
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>
프로젝트 실행 후 소스보기
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Make A Booking</title>
<link href="/Content/Site.css" rel="stylesheet"/>
<link href="/Content/testcss.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.5.3.js"></script>
</head>
|
@Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/jquery") |
<link href="/Content/Site.css" rel="stylesheet"/> <link href="/Content/testcss.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.5.3.js"></script> |
<코드1> <왼쪽코드가 렌데링 된 후>
왼쪽 <코드1>은 어떻게 오른쪽으로 렌더링 될까?
|
오른쪽 BundleConfig.cs를 보면
|
BundelConfig.cs
using System.Web;
using System.Web.Optimization;
namespace DataAnnotations
{
public class BundleConfig
{
// Bundling에 대한 자세한 정보는 http://go.microsoft.com/fwlink/?LinkId=254725를 방문하십시오.
public static void RegisterBundles(BundleCollection bundles)
{
/* @Scripts.Render("~/bundles/jquery") */
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
// Modernizr의 개발 버전을 사용하여 개발하고 배우십시오. 그런 다음
// 프로덕션할 준비가 되면 http://modernizr.com의 빌드 도구를 사용하여 필요한 테스트만 선택하십시오.
/* @Scripts.Render("~/bundles/modernizr") */
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
/* @Styles.Render("~/Content/css") */
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/*.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"));
}
}
}
BundelConfig 설정에 따라서 자동으로 스크립트와 스타일이 생성된다.
@Styles.Render("~/Content/css") ::
=> Content 폴더에 있는 *.css 모든 css링크가 생성됨 ( 파일명을 지정해주면 파일 단일로 링크됨
@Scripts.Render("~/bundles/modernizr")
=> Scripts/modernizr-로 시작하는 모든 js 파일을 링크함
@Scripts.Render("~/bundles/jquery")
=> Scripts/jquery-{version}.js 링크 {version} 버전 넘버가 치환됨.
MVC4 프레임 워크에서는 스타일과 스크립트 링크를 BundelConfig.cs 파일에서 관리
할 수 있다.
모든 스타일과 스크립트를 여기서 설정 해놓고 페이지 뷰에는 아주 간략한 코드만 작성하게 만들어 놓았다.
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/select2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-timepicker-addon.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-sliderAccess.js")" type="text/javascript"></script>
<link rel="stylesheet" media="all" type="text/css" href="@Url.Content("~/Content/Site.css")" />
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/select2.css")" />
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/ui_jquery_timepicker.css")" />
이런식으로 링크하던 복잡한 소스코드를
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
요렇게 간단하게 3줄로 끝내는 것이다.
아래 코드를 사용하시려면 Nuget 패키지중 WebGrease를 설치 하셔야 합니다.
솔루션 관리 참조에서 오른쪽 버튼 클릭후 NuGet 패키지 관리 선택
검색창에 webgrease 입력 후 설치 하시면 됩니다.
출처: https://knownewworld.tistory.com/11 [궁디의 호기심]
'ASP.NET' 카테고리의 다른 글
| [ASP.NET] 파일 형식 등 기본 사항 (0) | 2020.05.06 |
|---|---|
| Introducing .NET 5 번역 (0) | 2020.04.23 |
| .NET 5.0 시작하기 (0) | 2020.04.23 |
| How to return ActionResult with specific View? (not the controller name) / ASP.Net (0) | 2020.04.22 |
| [MVC4] JSON Problem - JsonRequestBehavior to AllowGet (0) | 2020.04.08 |