ASP.NET MVC 에서 Bundle 을 사용 하 는 방법

ASP.NET MVC 에서 Bundle 은 자원 을 묶 는 데 사 용 됩 니 다(일반적으로 css 와 js).전역 파일 인 Global.asax.cs 에 Bundle 을 등록 합 니 다.등 록 된 구체 적 인 실현 은 기본적으로 App 입 니 다.Start 폴 더 의 BundleConfig.cs 에서


public class MvcApplication : System.Web.HttpApplication
{
 protected void Application_Start()
 {
  AreaRegistration.RegisterAllAreas();
  FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
  RouteConfig.RegisterRoutes(RouteTable.Routes);
  BundleConfig.RegisterBundles(BundleTable.Bundles);
 }
}

BundleConfig.RegisterBundles(BundleTable.Bundles); 프로그램 사용 시 Bundle 등록


public class BundleConfig
{
 //          ，    http://go.microsoft.com/fwlink/?LinkId=301862
 public static void RegisterBundles(BundleCollection bundles)
 {
  bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
     "~/Scripts/jquery-{version}.js"));

  bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
     "~/Scripts/jquery.validate*"));

  //             Modernizr      。  ，    
  //      ，    http://modernizr.com                。
  bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
     "~/Scripts/modernizr-*"));

  bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
     "~/Scripts/bootstrap.js",
     "~/Scripts/respond.js"));

  bundles.Add(new StyleBundle("~/Content/css").Include(
     "~/Content/bootstrap.css",
     "~/Content/site.css"));
 }
}

설명 하기 편리 하도록 홈 컨트롤 러 아래 에 Action 을 새로 만 듭 니 다.다음 과 같 습 니 다.


public ActionResult BundleTest()
{
 return View();
}

Bootstrap 을 사용 하 는 경우 보기 에서@Styles.Render()와@Scripts.Render()를 사용 하여 css 와 js 를 도입 합 니 다.인 자 는 BundleConfig 에 등 록 된 이름 입 니 다.


@{
 Layout = null;
}
<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>BundleTest</title>
 @Styles.Render("~/Content/css")
</head>
<body>
 
 @Scripts.Render("~/bundles/jquery", "~/bundles/bootstrap")
</body>
</html>

페이지 를 탐색 하고 소스 코드 를 보면 다음 을 볼 수 있 습 니 다.


bundles.Add(new StyleBundle("~/Content/css").Include(
      "~/Content/bootstrap.css",
      "~/Content/site.css"));

BundleConfig.cs 에 위 에 있 는 Bundle,@Styles.Render("~/content/css")렌 더 링 을 등록 할 때~/content/bootstrap.css 와~/content/site.css,js 렌 더 링 을 도입 합 니 다.
BootStrap 의 css 와 js 자원 을 진정 으로 도 입 했 는 지 검증 하기 위해 간단 한 BootStrap 예시 코드 를 추 가 했 습 니 다.다음 과 같 습 니 다.


@{
 Layout = null;
}
<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>BundleTest</title>
 @Styles.Render("~/Content/css")
</head>
<body>
 <div class="container">
  <div class="header clearfix">
   <nav>
    <ul class="nav nav-pills pull-right">
     <li role="presentation" class="active"><a href="#">  </a></li>
     <li role="presentation"><a href="#">    </a></li>
     <li role="presentation"><a href="#">    </a></li>
    </ul>
   </nav>
  </div>
  <form class="form-horizontal">
   <div class="form-group">
    <label for="username" class="col-sm-2 control-label">   </label>
    <div class="col-sm-10">
     <input type="text" class="form-control" id="username" placeholder="   ">
    </div>
   </div>
   <div class="form-group">
    <label for="password" class="col-sm-2 control-label">  </label>
    <div class="col-sm-10">
     <input type="password" class="form-control" id="password" placeholder="  ">
    </div>
   </div>
   <div class="form-group">
    <label for="code" class="col-sm-2 control-label">   </label>
    <div class="col-sm-10">
     <input type="text" class="form-control" id="code" placeholder="   ">
    </div>
   </div>
   <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
     <div class="checkbox">
      <label>
       <input type="checkbox">    
      </label>
     </div>
    </div>
   </div>
   <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
     <button type="submit" class="btn btn-default">  </button>
    </div>
   </div>
  </form>
  <footer class="footer">
   <p>&copy; 2017 Zhong.</p>
  </footer>

 </div> <!-- /container -->
 @Scripts.Render("~/bundles/jquery", "~/bundles/bootstrap")
</body>
</html>

프론트 데스크 톱 탐색 효과(브 라 우 저 가 충분 할 때 가로 평평 하 게 깔 고 브 라 우 저 를 축소 하면 수직 평평 하 게 깔 고 예제 의 폼 부분 이 가장 잘 나타 납 니 다):

개선 하 다.
위의 Bundle 은 압축 되 지 않 은 css 와 js 자원 을 도 입 했 지만 실제 응용 에 서 는 서버 부하 감소 등 을 위해 압축 판 자원 을 도입 해 야 합 니 다.
그래서 BundleConfig.cs 를 수정 합 니 다.

다시 컴 파일 하고 아까 페이지 를 다시 훑 어 보 니 압축 판 자원(css/js)이 도입 되 었 습 니 다.
주:예제 시 ASP.NET MVC 5(.Net Framework 4.5)를 사 용 했 기 때문에.net framework 4 의 asp.net 뮤 직 비디오 4 는 다음 과 같은 상황 이 있 을 수 있 습 니 다.
페이지 에서 원본 코드 를 볼 때 스 크 립 트 도입 이 부족 합 니 다~/script/bootstrap.min.js.asp.net mvc 4 에서 사용 하 는 System.Web.Optimization.dll 은 기본적으로 무시 규칙*.min.js 를 사 용 했 습 니 다.이 때 BundleConfig.cs 의 RegisterBundles 에서 무시 규칙 을 제거 할 수 있 습 니 다.

이 해결 방법 은 첫째,System.Web.Optimization.dll 을 역 컴 파일 하고 역 컴 파일 된 코드 를 결합 하여 얻 은 것 이 며,또한 참고 할 수 있다이 링크
또한 생산 환경 을 배치 할 때 무효 임 을 발 견 했 습 니 다.생산 환경 이 더 이상 debug 모드 가 아니 기 때문에 설정 이 필요 합 니 다.

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

JSP| 💔MVC 패턴을 이용한 게시판

Model(대부분 java): DB에서 추출이나 수정하여 Controller View (대부분 JSP파일): 화면,UI Controller: 요청을 담당 시간이 없을 때, 만드는 게 급선무: 10년전, 요즘 잘 사용...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

ASP.NET MVC 에서 Bundle 을 사용 하 는 방법

좋은 웹페이지 즐겨찾기