ASP.NET MVC 관리 홈페이지의 신속한 구축에 대한 자세한 소개

이 글은 주로 ASP.NET MVC 관리 홈페이지의 관련 정보를 자세하게 소개하며, 관심 있는 친구들은 참고할 수 있습니다.

서문

백엔드 개발자들은 일반적으로 그렇지 않습니다. 스타일을 조정하는 것을 좋아하지 않지만, 여전히 다양한 브라우저의 호환성을 고려해야 합니다. 다행스럽게도 인터넷 시대에는 리소스 공유가 많습니다. 이제 ASP.NET MVC 백그라운드 관리 관리 홈 페이지를 빠르게 구축하는 방법을 살펴보겠습니다. 먼저 최종 효과를 살펴보겠습니다.

1단계: 관리 템플릿 선택

인터넷 시대는 리소스 공유 시대입니다. 인터넷에는 다양한 프런트 엔드 템플릿이 있습니다. 여기서는 주로 템플릿을 우리의 템플릿에 통합하는 방법을 설명합니다. ASP.NETMVC 프로젝트는 원하는 것을 선택할 수 있습니다. 여기서는 AircraftAdmin의 새로운 버전을 선택합니다.

두 번째 단계: 간소화된 템플릿

일반적으로 템플릿을 다운로드하고 열면 많은 CSS 스타일 js플러그인이 혼합되어 있음을 알 수 있는데 그 중 대부분은 우리가 포함하지 않습니다. 필요해서 프로젝트에 바로 적용하면 되는데 불편한데 어떻게 해야 할까요? 단계별로.

1.Delete불필요한 html 요소

vs를 사용하여 페이지를 열고 전체 레이아웃을 분석한 후 단계별로 삭제하려면 아래와 같이 상단과 좌측을 유지해야 합니다. 메뉴 바, 메인 콘텐츠 영역에서 불필요한 HTML을 삭제합니다.

2. 단순화된 CSS 파일

분석을 통해 bootstrap.css(부트스트랩 스타일), font-awesome.css(아이콘 글꼴) 총 4개의 CSS 파일이 참조되었습니다. theme.css(테마), premium.css(알 수 없음) 마지막 것을 삭제하면 새로 고침 후 정상이 되므로 CSS 파일 3개가 남습니다.

3. js 파일 간소화 2단계와 동일하게 js에 익숙하지 않거나 페이지에 있는 일부 js의 기능을 모르는 경우에는 이러한 js를 유지하면 됩니다. 일시적으로 특정 js를 삭제하고 새로 고쳐서 효과를 확인하면 효과를 확인할 수 있습니다.

위 단계를 거쳐 페이지 파일과 참조 파일이 대폭 줄어들었고 기본 문서도 깔끔하게 정리되었습니다. 다음 단계는 MVC 프로젝트에 통합하는 것입니다.

3단계:

통합 관련 파일1. 다음으로 문서 구조 분석, MVC 프로젝트 설정 및 관련 파일 통합을 시작합니다. 전체 문서를 헤더 도구 정보 표시줄, 왼쪽 메뉴 표시줄, 기본 콘텐츠 영역의 세 부분으로 나눕니다. 헤더와 왼쪽은 상대적으로 변경되지 않았으며 각 페이지에 공통으로 포함됩니다.

MVC 프로젝트의 _

TopBarPartial.cshtml 및 _MenuPartial.cshtml. 여기서는 _MenuPartial.cshtml을 단순화하여 몇 가지 샘플 메뉴만 남겼습니다. 본체 하단 영역은 회사 및 저작권 정보를 추가할 수 있는 공개 부분 보기 _FooterPartial.cshtml로도 사용됩니다. _TopBarPartial.cshtml

<p class="navbar navbar-default" role="navigation">
  <p class="navbar-header">
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
   </button>
   <a class="" href="index.html"><span class="navbar-brand"><span class="fa fa-paper-plane"></span> Aircraft</span></a>
  </p>
 <p class="navbar-collapse collapse" style="height: 1px;">
  
  <ul id="main-menu" class="nav navbar-nav navbar-right">
   <li class="dropdown hidden-xs">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
     <span class=" padding-right-small" style="position:relative;top: 3px;"></span> <i class="fa fa-user"></i> Jack Smith
     <i class="fa fa-caret-down"></i>
    </a>
    <ul class="dropdown-menu">
     <li><a href="./">My Account</a></li>
     <li class="pider"></li>
     <li class="dropdown-header">Admin Panel</li>
     <li><a href="./">Users</a></li>
     <li><a href="./">Security</a></li>
     <li><a tabindex="-1" href="./">Payments</a></li>
     <li class="pider"></li>
     <li><a tabindex="-1" href="sign-in.html">Logout</a></li>
    </ul>
   </li>
  </ul>
   
  <ul class="nav navbar-nav navbar-right">
   <li class="dropdown hidden-xs">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
     <i class="fa fa-tachometer"></i>
    </a>
    <ul class="dropdown-menu theme-choose"> 
     <li>
      <a href="#" data-color="1"><p class="color theme-1"></p></a>
      <a href="#" data-color="2"><p class="color theme-2"></p></a>
      <a href="#" data-color="3"><p class="color theme-3"></p></a>
      <a href="#" data-color="4"><p class="color theme-4"></p></a>
     </li> 
     <li>
      <a href="#" data-color="5"><p class="color theme-5"></p></a>
      <a href="#" data-color="6"><p class="color theme-6"></p></a>
      <a href="#" data-color="7"><p class="color theme-7"></p></a>
      <a href="#" data-color="8"><p class="color theme-8"></p></a>
     </li>
    </ul>
   </li>
  </ul>
  
 </p>
</p>

_MenuPartial.cshtml

<p class="sidebar-nav">
 <ul>
  <li><a href="#" data-target=".accounts-menu" class="nav-header collapsed" data-toggle="collapse"><i class="fa fa-fw fa-briefcase"></i> Account <span class="label label-info">+3</span></a></li>
  <li>
   <ul class="accounts-menu nav nav-list collapse">
    <li><a href="#"><span class="fa fa-caret-right"></span> Sign In</a></li>
    <li><a href="#"><span class="fa fa-caret-right"></span> Sign Up</a></li>
    <li><a href="#"><span class="fa fa-caret-right"></span> Reset Password</a></li>
   </ul>
  </li>
  <li><a href="#" data-target=".legal-menu" class="nav-header collapsed" data-toggle="collapse"><i class="fa fa-fw fa-legal"></i> Legal<i class="fa fa-collapse"></i></a></li>
  <li>
   <ul class="legal-menu nav nav-list collapse">
    <li><a href="#"><span class="fa fa-caret-right"></span> Privacy Policy</a></li>
    <li><a href="#"><span class="fa fa-caret-right"></span> Terms and Conditions</a></li>
   </ul>
  </li>
  <li><a href="#" class="nav-header"><i class="fa fa-fw fa-question-circle"></i> Help</a></li>
  <li><a href="#" class="nav-header"><i class="fa fa-fw fa-comment"></i> Faq</a></li>
 </ul>
</p>

_FooterPartial.cshtml

<footer>
 <hr>
 <!-- Purchase a site license to remove this link from the footer: http://www.portnine.com/bootstrap-themes -->
 <p class="pull-right">A <a href="http://www.portnine.com/bootstrap-themes" target="_blank">Free Bootstrap Theme</a> by <a href="http://www.portnine.com" target="_blank">Portnine</a></p>
 <p>© 2014 <a href="http://www.portnine.com" target="_blank">Portnine</a></p>
</footer>

2. NUGET
을 통해

font-awesome 글꼴 아이콘을 설치하세요. Font-awesome은 훌륭한 글꼴 아이콘 라이브러리입니다. 더 알고 싶습니다. 자세한 내용은 공식 홈페이지(http://fontawesome.dashgame.com/)를 참고하세요.

3. 프로젝트의 Bundl

eConfig 파일에 관련 CSS 및 js 파일을 추가합니다.

// 有关绑定的详细信息，请访问 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" ,
   "~/Content/theme.css", 
   "~/Content/css/font-awesome.min.css"
   ));
 }

4. LayoutAdmin 마스터 페이지를 추가하고 Index 홈페이지 콘텐츠를 수정하여 Index 마스터 페이지를 LayoutAdmin

으로 지정합니다.

@{
 Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
 ViewBag.Title = "Home Page"; 
}

<p class="header">
 <h1 id="Help">Help</h1>
 <ul class="breadcrumb">
  <li><a href="#">Home</a> </li>
  <li class="active">Help</li>
 </ul>
</p>

<p class="main-content">

 <p class="faq-content">

 </p>
 @Html.Partial("_FooterPartial")
</p>

　　这样，通过简单的几步就搭好了一个简洁大方的ASP.NETMVC后台管理模板页，半个小时就搞定了，怎么样，效率很高吧！这里我顺便把里面的主题样式加到首页顶部菜单，通过简单切换即可选择顶部样式，大家也可以在theme.css里面扩展你的主题。

위 내용은 ASP.NET MVC 관리 홈페이지의 신속한 구축에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!