ASP.NET Webform 簡易活動報名系統(8) 後台首頁Admin/Index.aspx

by wish | 3 月 31, 2025 | 程式 | 0 comments

這篇有關後台首頁的

Table of Contents

Site.Master

學過基礎Html的人，會知道網頁本身還有html標籤、head標籤跟body標籤，一定會疑惑Webform為什麼沒看到這些，這些都放在外層的Master檔，如果你打開Default.aspx，就能在第一行看到引用的Master檔是哪一個，MaterPageFile="~/Site.Master"

Default.asp Master檔

Default.aspx的外層是Site.Master

頁面對應

頁面對應如上圖，上面的網站標題(LOGO)跟選單(Navibar)與底部的Footer都是Site.Master負責的

整理 Site.Master

先打開Site.Master檔案，這個結構我簡單講解一下

Site.Master結構

我們要動的地方有

head >　title 把「我的 ASP.NET應用」改網站名，例如快樂網站課程
nav 網站上方選單改網站名稱跟連結
footer 改網站名稱

最後改完的結果如下

Site.Master修改後在瀏覽器上看

<%@ 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>&copy; <%: DateTime.Now.Year %> - 快樂網站課程</p>
            </footer>
        </div>
    </form>
    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/Scripts/bootstrap.js") %>
    </asp:PlaceHolder>
</body>
</html>

這邊我把登入改到靠右邊，跟網站連結區分出來

加入Admin/Admin.Master

加入Admin

在Admin資料夾>加入>新增項目

加入檔案

加入「使用主版面的 Web Form」＞檔名「Admin.Master」＞新增

方案總管的Admin

接著點方案總管中的 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>&copy; <%: 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>&copy; <%: 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按下右鍵加入

同樣在Admin資料夾按下滑鼠右鍵 >加入 > 使用主版頁面的Web Form

輸入名稱index.aspx

選擇主版頁面

選擇主版頁面 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上的登入
輸入錯誤的帳密看有沒有出現錯誤
輸入正確的帳密看有沒有跳轉到後台
看後台首頁

這邊我就留著給大家測試了，如果有些頁面不如預期的再回來看這篇教學。

ASP.NET Webform 簡易活動報名系統(8) 後台首頁Admin/Index.aspx

Site.Master

整理 Site.Master

加入Admin/Admin.Master

導覽列按鈕

登入按鈕改為加上Hello 使用者跟登出

後台的網站標題

Admin.Master.cs 加上登入判斷

加入後台首頁 Admin/Index.aspx

測試

0 Comments

Submit a Comment 取消回覆

ASP.NET Webform 簡易活動報名系統(8) 後台首頁Admin/Index.aspx

Site.Master

整理 Site.Master

加入Admin/Admin.Master

導覽列按鈕

登入按鈕改為加上Hello 使用者 跟登出

後台的網站標題

Admin.Master.cs 加上登入判斷

加入後台首頁 Admin/Index.aspx

測試

0 Comments

Submit a Comment 取消回覆

登入按鈕改為加上Hello 使用者跟登出