Views: 3
這篇有關後台首頁的
Site.Master
學過基礎Html的人,會知道網頁本身還有html標籤、head標籤跟body標籤,一定會疑惑Webform為什麼沒看到這些,這些都放在外層的Master檔,如果你打開Default.aspx
,就能在第一行看到引用的Master檔是哪一個,MaterPageFile="~/Site.Master"
Default.aspx
的外層是Site.Master
頁面對應如上圖,上面的網站標題(LOGO)跟選單(Navibar)與底部的Footer都是Site.Master
負責的
整理 Site.Master
先打開Site.Master檔案,這個結構我簡單講解一下
我們要動的地方有
head
>title
把「我的 ASP.NET應用
」改網站名,例如快樂網站課程nav
網站上方選單改網站名稱跟連結footer
改網站名稱
最後改完的結果如下
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="PartyRegister.SiteMaster" %>
<!DOCTYPE html>
<html lang="zh">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - 快樂網站課程</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" runat="server" href="~/">快樂網站課程</a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" title="切換導覽" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- 左側選單 -->
<div class="collapse navbar-collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item"><a class="nav-link" runat="server" href="~/">首頁</a></li>
<li class="nav-item"><a class="nav-link" runat="server" href="~/Regist.aspx">活動報名</a></li>
</ul>
</div>
<!-- 右側登入按鈕 -->
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" runat="server" href="~/Admin/Login.aspx">後台登入</a>
</li>
</ul>
</div>
</nav>
<div class="container body-content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<hr />
<footer>
<p>© <%: DateTime.Now.Year %> - 快樂網站課程</p>
</footer>
</div>
</form>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/Scripts/bootstrap.js") %>
</asp:PlaceHolder>
</body>
</html>
這邊我把登入改到靠右邊,跟網站連結區分出來
加入Admin/Admin.Master
在Admin
資料夾>加入>新增項目
加入「使用主版面的 Web Form」> 檔名「Admin.Master
」>新增
接著點方案總管中的 Admin.Master
,同時開Admin.Master
跟Site.Master
,用左右並排的方式
我們要把Site.Master
除了第一行的程式碼搬到Admin.Master
搬過去後對Admin.Master
做幾項修改
- 選單改成 後台首頁 / 學員資料管理 / 活動場次管理 / 登出
- 加入 Hello [使用者名稱]
- 網站名稱改成網站名稱 + 後台登入判斷
改好後程式碼如下
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Admin.master.cs" Inherits="PartyRegister.Admin.Admin" %>
<!DOCTYPE html>
<html lang="zh">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - 快樂網站課程-後台</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" runat="server" href="~/">快樂網站課程後臺管理</a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" title="切換導覽" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- 左上選單 -->
<div class="collapse navbar-collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item"><a class="nav-link" runat="server" href="~/Admin/Index.aspx">後台首頁</a></li>
<li class="nav-item"><a class="nav-link" runat="server" href="~/Admin/Member/Manage.aspx">學員管理</a></li>
<li class="nav-item"><a class="nav-link" runat="server" href="~/Admin/Event/Manage.aspx">活動場次管理</a></li>
</ul>
</div>
<!-- 右上登出按鈕 -->
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<span class="nav-link text-white">Hello, <%:Session["User"] %></span>
</li>
<li class="nav-item">
<a class="nav-link" runat="server" href="~/Admin/Logout.aspx">登出</a>
</li>
</ul>
</div>
</nav>
<div class="container body-content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<hr />
<footer>
<p>© <%: DateTime.Now.Year %> - 快樂網站課程後台管理</p>
</footer>
</div>
</form>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/Scripts/bootstrap.js") %>
</asp:PlaceHolder>
</body>
</html>
主要改幾個地方
導覽列按鈕
<div class="collapse navbar-collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item"><a class="nav-link" runat="server" href="~/Admin/Index.aspx">後台首頁</a></li>
<li class="nav-item"><a class="nav-link" runat="server" href="~/Admin/Member/Manage.aspx">學員管理</a></li>
<li class="nav-item"><a class="nav-link" runat="server" href="~/Admin/Event/Manage.aspx">活動場次管理</a></li>
</ul>
</div>
登入按鈕改為加上Hello 使用者 跟登出
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<span class="nav-link text-white">Hello, <%:Session["User"] %></span>
</li>
<li class="nav-item">
<a class="nav-link" runat="server" href="~/Admin/Logout.aspx">登出</a>
</li>
</ul>
先把連結寫上去,之後再補對應的頁面
後台的網站標題
導覽列改這樣
<a class="navbar-brand" runat="server" href="~/">快樂網站課程後臺管理</a>
Footer改這樣
<footer>
<p>© <%: DateTime.Now.Year %> - 快樂網站課程後台管理</p>
</footer>
Admin.Master.cs 加上登入判斷
做法:在Page_Load
裡面加入判斷Session["User"]
有沒有值,如果沒有的話就是已經登出或沒登入,如果沒登入就將使用者導向登入頁。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace PartyRegister.Admin
{
public partial class Admin : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
//檢查是否登入
if (Session["User"] == null)
{
//導向登入頁(或導向首頁)
Response.Redirect("~/Admin/Login.aspx");
}
}
}
}
這樣所有引用到Admin.Master
的頁面都能套用登入判斷。,這邊網址的~/
是告訴伺服器連結要從網站跟目錄開始找
這樣Admin.Master
的修改告一段落,接著要來寫Admin/Index.aspx
加入後台首頁 Admin/Index.aspx
同樣在Admin資料夾按下滑鼠右鍵 >加入 > 使用主版頁面的Web Form
選擇主版頁面 Admin
> Admin.Master
之後打開 Index.aspx
這邊只要加入一個網頁標題就好,加入後如下
<%@ Page Title="" Language="C#" MasterPageFile="~/Admin/Admin.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="PartyRegister.Admin.Index" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<h1>後台首頁</h1>
</asp:Content>
一般來說,後台首頁會放一些統計圖表相關的功能,這類功能稱為Dashboard( 儀錶板),Dashboard設計通常是放在比較後期,多數後台功能完成後才會加進去,所以我們這邊只留下一個後台首頁的頁面標題就好
測試
現在我們要來啟動專案測試登入到後台,步驟大概如下
- 執行偵錯進入首頁
- 檢查
Navbar
跟footer
的選單跟文字
- 檢查
- 按下
Navbar
上的登入 - 輸入錯誤的帳密 看有沒有出現錯誤
- 輸入正確的帳密 看有沒有跳轉到後台
- 看後台首頁
這邊我就留著給大家測試了,如果有些頁面不如預期的再回來看這篇教學。
0 Comments