ASP.NET MVC 管理者ホームページの迅速な構築の詳細な紹介

この記事では主に ASP.NET MVC 管理者ホームページの関連情報を詳しく紹介します。興味のある方は参考にしてください。

はじめに

スタイルを調整するのは好きではありませんが、それでもさまざまなブラウザの互換性を考慮する必要があります。幸いなことに、インターネットの時代では、多くのリソースが共有されています。それでは、ASP.NET MVC バックグラウンド管理ホームページをすばやく構築する方法を見てみましょう。まず、最終的な効果を見てみましょう。

ステップ 1: 管理テンプレートを選択する

インターネットの時代は、インターネット上にさまざまな

フロントエンド テンプレート があります。ここでは主に、テンプレートを私たちのテンプレートに統合する方法について説明します。 ASP.NETMVC プロジェクトについては、好みのものを選択できます。ここでは、AircraftAdmin のこの最新バージョンを選択します。

第 2 ステップ: 合理化されたテンプレート

通常、テンプレートをダウンロードして開くと、多数の CSS スタイル

js プラグインが混在していることがわかりますが、その多くは私たちには含まれていませんそれらをプロジェクトに直接適用できますが、不便です。私の経験では、削除、削除、はい、テンプレートをダウンロードして開き、不要な HTML、CSS、JS を削除します。一歩ずつ。

1.不要なhtml要素を削除します。vsを使用してページを開き、全体のレイアウトを分析し、次に示すように段階的に削除します。上部と左側を維持する必要があります。メニューバー、メインコンテンツエリアの不要なhtmlを削除します。

2. 簡略化されたCSSファイル

分析により、bootstrap

.css (ブートストラップスタイル)、

font-awesome.css (アイコンフォント)、の合計4つのCSSファイルが参照されました。 theme.css (テーマ)、premium.css (不明)、最後のものを削除し、更新すると正常になるため、3 つの css ファイルが残ります。 3. js ファイルを整理します

ステップ 2 と同様に、js にあまり詳しくない場合や、ページ内の一部の js の機能がわからない場合は、これらの js を削除しておいてください。一時的に、特定の js を削除して更新して効果を確認します。 上記の手順を実行すると、ページ ファイルと参照ファイルが大幅に削減され、基本的なドキュメントも明確になります。次のステップは、MVC プロジェクトへの統合です。

ステップ 3:

関連ファイルを統合する

1. 次に、ドキュメント構造の分析を開始し、MVC プロジェクトを確立し、関連ファイルを統合します。文書全体を、ヘッダーツール情報バー、左側のメニューバー、メインコンテンツエリアの 3 つの部分に分割し、ヘッダーと左側は、各ページに共通のものを部分的に抽出します。 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は優れたフォントアイコンライブラリです。詳細を知りたい詳細については、公式 Web サイト http://fontawesome.dashgame.com/ を参照してください。

3. プロジェクトの BundleConfig ファイルに、関連する 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 中国語 Web サイトの他の関連記事を参照してください。