_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>은 어떻게 오른쪽으로 렌더링 될까?
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" ));
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.Ad d(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 [궁디의 호기심]
