.NET Core第34天_ASP.NET Core MVC前後台搭建_Area使用
開發環境使用vs2022 + .net6
新增好一個全新的MVC專案後
針對專案右鍵->加入->新增Scaffold項目->選擇MVC區域
命名為Admin
Area部分在每一個 MVC 專案只允許有一層 Areas 目錄不可以有多層
在此做Home控制器及相應view的生成
之後若直接貿然運行就會看到錯誤
An unhandled exception occurred while processing the request.
AmbiguousMatchException: The request matched multiple endpoints. Matches:
....
這邊因為同時存在兩個Home控制器導致有模玲兩可狀況
可以避免 Area 中使用相同的 Controller 名稱
或者進行Area的路由設定做區分
因此需要
在 Controller 加入 Area 屬性
~\Areas\Admin\Controllers\HomeController.cs
1 2 3 4 5 6 7 8 9 10 11 12 13 | using Microsoft.AspNetCore.Mvc; namespace BingoSys.Areas.Admin.Controllers { [Area("Admin")] public class HomeController : Controller { public IActionResult Index() { return View(); } } } |
加入 Area 路由設定
開啟 Program.cs 檔案，在既有的 MapControllerRoute 設定多擴充一組 Area 的路由設定
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | var builder = WebApplication.CreateBuilder(args); // Add services to the container. builder.Services.AddControllersWithViews(); var app = builder.Build(); // Configure the HTTP request pipeline. if (!app.Environment.IsDevelopment()) { app.UseExceptionHandler("/Home/Error"); // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseRouting(); app.UseAuthorization(); app.MapAreaControllerRoute( name: "Admin", areaName: "Admin", pattern: "Admin/{controller=Home}/{action=Index}/{id?}" ); app.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); app.Run(); |
下載一個免費後台CSS模板來套用
Google 搜尋一下admin panel template free from freecss
https://www.free-css.com/
第一個就是我們可以利用的網站資源
https://www.free-css.com/template-categories/control-panel
https://www.free-css.com/free-css-templates/page210/adminlte
點選Download下載並解壓到專案目錄
複製貼上存放到wwwroot下剛分門別列的admin目錄下
設定 Area 的 View 預設 Layout 路徑
Step1.產生一個給admin後台用的共用版面
於專案根目錄下此folder之中
~\Views\Shared\
產生一個新的razor版面配置頁_Layout_admin.cshtml
~\Views\Shared\_Layout_admin.cshtml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> </head> <body> <div style="height:50px; width:100%; background-color:blue;color:white;"> <span>Admin Layout測試版面配置</span> </div> <div style="height:200px;"> @RenderBody() </div> <div style="height: 30px; width: 100%; background-color: red; color: white;"> 底部 </div> </body> </html> |
Step2.進行admin area的預設版面配置設定
於 ~\Areas\Admin\Views\
下新增一個_ViewStart.cshtml
加入以下code
~\Areas\Admin\Views\_ViewStart.cshtml
1 2 3 | @{
Layout = "~/Views/Shared/_Layout_admin.cshtml";
}
|
如此一來就能有一個版面布局區隔
OK不然一開始都沒捨麼感覺
離題了
接下來就是引入模板
我們要來調整引入人家設計的admin後台模板相關css,js
開啟範例提供的首頁index將其複製粘貼到_Layout_admin.cshtml
之後再來看哪裡要來挖洞洞填入子頁(@RenderBody()要放置何處)
~/Views/Shared/_Layout_admin.cshtml
OK 那就可清楚看到 原先顯示的p段落內文呈現有成功套用版面佈局
要記得將引入的CSS和JS的路徑前面多一個
~/admin/
接下來就是將多餘範本程式碼清除
~\Views\Shared\_Layout_admin.cshtml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>後台管理介面</title> <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'> <!-- Bootstrap 3.3.2 --> <link href="~/admin/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <!-- FontAwesome 4.3.0 --> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <!-- Ionicons 2.0.0 --> <link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" /> <!-- Theme style --> <link href="~/admin/dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" /> <!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. --> <link href="~/admin/dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" /> <!-- iCheck --> <link href="~/admin/plugins/iCheck/flat/blue.css" rel="stylesheet" type="text/css" /> <!-- Morris chart --> <link href="~/admin/plugins/morris/morris.css" rel="stylesheet" type="text/css" /> <!-- jvectormap --> <link href="~/admin/plugins/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" /> <!-- Date Picker --> <link href="~/admin/plugins/datepicker/datepicker3.css" rel="stylesheet" type="text/css" /> <!-- Daterange picker --> <link href="~/admin/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" /> <!-- bootstrap wysihtml5 - text editor --> <link href="~/admin/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" /> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body class="skin-blue"> <div class="wrapper"> <header class="main-header"> <!-- Logo --> <a href="index2.html" class="logo">後台管理介面</a> <!-- Header Navbar: style can be found in header.less --> <nav class="navbar navbar-static-top" role="navigation"> <!-- Sidebar toggle button--> <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button"> <span class="sr-only">Toggle navigation</span> </a> </nav> </header> <!-- Left side column. contains the logo and sidebar --> <aside class="main-sidebar"> <!-- sidebar: style can be found in sidebar.less --> <section class="sidebar"> <!-- sidebar menu: : style can be found in sidebar.less --> <ul class="sidebar-menu"> <li class="header">MAIN NAVIGATION</li> <li class="active treeview"> <a href="#"> <i class="fa fa-dashboard"></i> <span>Dashboard</span> <i class="fa fa-angle-left pull-right"></i> </a> <ul class="treeview-menu"> <li class="active"><a href="index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li> <li><a href="index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li> </ul> </li> </ul> </section> <!-- /.sidebar --> </aside> <!-- Right side column. Contains the navbar and content of the page --> <div class="content-wrapper"> @RenderBody() </div><!-- /.content-wrapper --> <footer class="main-footer"> </footer> </div><!-- ./wrapper --> <!-- jQuery 2.1.3 --> <script src="~/admin/plugins/jQuery/jQuery-2.1.3.min.js"></script> <!-- jQuery UI 1.11.2 --> <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js" type="text/javascript"></script> <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip --> <script> $.widget.bridge('uibutton', $.ui.button); </script> <!-- Bootstrap 3.3.2 JS --> <script src="~/admin/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <!-- Morris.js charts --> <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> <script src="~/admin/plugins/morris/morris.min.js" type="text/javascript"></script> <!-- Sparkline --> <script src="~/admin/plugins/sparkline/jquery.sparkline.min.js" type="text/javascript"></script> <!-- jvectormap --> <script src="~/admin/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js" type="text/javascript"></script> <script src="~/admin/plugins/jvectormap/jquery-jvectormap-world-mill-en.js" type="text/javascript"></script> <!-- jQuery Knob Chart --> <script src="~/admin/plugins/knob/jquery.knob.js" type="text/javascript"></script> <!-- daterangepicker --> <script src="~/admin/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script> <!-- datepicker --> <script src="~/admin/plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script> <!-- Bootstrap WYSIHTML5 --> <script src="~/admin/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script> <!-- iCheck --> <script src="~/admin/plugins/iCheck/icheck.min.js" type="text/javascript"></script> <!-- Slimscroll --> <script src="~/admin/plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script> <!-- FastClick --> <script src='~/admin/plugins/fastclick/fastclick.min.js'></script> <!-- AdminLTE App --> <script src="~/admin/dist/js/app.min.js" type="text/javascript"></script> <!-- AdminLTE dashboard demo (This is only for demo purposes) --> <script src="~/admin/dist/js/pages/dashboard.js" type="text/javascript"></script> <!-- AdminLTE for demo purposes --> <script src="~/admin/dist/js/demo.js" type="text/javascript"></script> </body> </html> |
留言
張貼留言