ASP.NET Webform 簡易活動報名系統(1) 新專案+建立報名頁面 | Visual Studio 2022

by | 2 月 26, 2025 | 程式 | 0 comments

Views: 4

這篇是作為入門，我們邊做邊學

設備

安裝好Windows 的電腦一台，記憶體至少16GB，建議32GB以上，作業系統建議Windows 11 專業版

軟體

  1. Visual Studio 2022，社群版、專業版、企業版都可以，建議使用社群版就好
  2. SQL SERVER DEVELOP開發版
  3. SSMS

任務需求說明

  1. 主旨：建立一個活動報名網站
  2. 角色：
    • 報名者，填寫報名表
    • 管理者，查看名單，修改報名單、刪除報名單。
  3. 活動報名流程
    • 填寫報名資料＞送出＞系統驗證是否已經報名過了
    • 已經報名：「顯示已經報名過了，請勿重複報名。」
    • 尚未報名：「顯示報名成功。」
  4. 報名單欄位
    • 姓名
    • 性別（男女其他）
    • 生日（西元年月日）
    • 身分證字號（10碼）
    • 信箱
    • 電話
    • 飲食（葷食、素食）
    • 活動場次（三個日期單選）：1月場次　2月場次　3月場次
  5. 隱藏欄位
    • 報名時間
    • 最後修改時間
    • 最後修改人
    • 已繳費註記
    • 管理者備註
    • 刪除標記

管理者流程

登入系統 > 報名者列表>

  1. 修改報名資料
  2. 檢視報名資料
  3. 刪除

報名者列表欄位

  1. 功能（編輯、檢視、刪除）
  2. 姓名
  3. 性別
  4. 報名時間
  5. 繳費

網站目錄規劃

  • \Admin\Admin.aspx 管理頁
  • \Admin\Login.aspx 登入頁
  • \Admin\Edit.aspx 編輯資料
  • \Admin\View.aspx檢視資料
  • Regist.aspx 報名頁面
  • Default.aspx 首頁：活動說明、介紹
  • \Image\ 圖片目錄：活動說明用到的圖片

Visual Studio 2022 新建專案

Visual Studio建立新專案

選擇專案

專案名稱

專案選項

專案目錄

網站的結構

方案 專案 網站目錄

（方案底下可已有很多個專案）

網站目錄說明

  1. App_Data 網站文件資料放這，實際發佈時候不會放上去
  2. App_Start 網站一啟動時要執行的背景程式寫在這，這堂課我們用不到
  3. Content 網站的CSS檔放這
  4. Script 網站的js檔放這
  5. About.aspx 關於我
  6. Contact.aspx 聯絡資訊
  7. Default.aspx 網站的首頁
  8. favicon.ico 網站的小圖示，可以換成自己喜歡得
  9. Global.asax 也是網站一起動要執行的程式，會先執行這邊，接著才執行App_Start內的
  10. Site.Master 網站的Master Page ，用於統一網站樣式（上方選單navbar/下方footer)
  11. SiteMobile.Master 網站的Master Page（行動版），這個練習用不到。
  12. ViewSwitcher.ascx 切換行動版跟電腦版，這個練習用不到
  13. web.config 網站設定、資料庫連線、站台設定

裡面比較重要的檔案有，MasterPage 、Web.config

新增報名頁面 Regist.aspx

我們先來寫報名頁面畫面的部分，首先先來新增一個Regist.aspx

新增register

點選在專案>按滑鼠右鍵>加入Add > 新增項目 Add New Item

顯示所有範本

點選「顯示所有範本(Show All Templates)」

加入Webform with Master Page

點選「使用主版頁面的Web Form」Webform with Master Page，名稱填入「Regist.aspx」 > 「新增」 Create

選擇MasterPage

選Site.Master 這個MasterPage，然後按下「確定」。

新增後的畫面

我們在Regest.aspx先來新增

  1. 頁面標題<h1>報名</h1>
  2. 姓名欄位名稱<asp:Label ID="lbName" runat="server" Text="Label">姓名</asp:Label>
  3. 姓名欄位<asp:TextBox ID="tbName" runat="server"></asp:TextBox>

注意要寫在<asp:Content></asp:Content>內，如下圖

新增姓名欄位

程式碼：

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Regist.aspx.cs" Inherits="PartyRegister.Regist" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <h1>報名</h1>
    <asp:Label ID="lbName" runat="server" Text="姓名"></asp:Label>
    <asp:TextBox ID="tbName" runat="server"></asp:TextBox>
</asp:Content>

頁面標題

頁面標題<h1>報名</h1>，會用<h1>～<h3>標籤為主

asp:Lable標籤

<asp:Label ID="lbName" runat="server" Text="姓名"></asp:Label>

  1. tag名稱 asp:Label 這是ASP Webform的Lable標準寫法
  2. ID屬性 ID="lbName"，每個ASP的元件都要給一個ID，[型別縮寫+名稱]命名方式算是早期程式設計留下的傳統，這種命名方式稱為匈牙利命名法，前面的lb表示label型別，Name是實際名稱，讓人一眼看出lbName是指姓名的Label元件。
  3. runat="server" 代表可以被伺服器端控制，多數情況這樣寫

asp:TextBox標籤

<asp:TextBox ID="tbName" runat="server"></asp:TextBox>

  1. tag名稱 asp:TextBox 這是ASP Webform的TextBox標準寫法
  2. ID="tbName" 每個ASP的元件都要給一個ID，傳統上常用tb或txt縮寫代表textbox，至於要用哪一種，看公司規定，公司沒規定就看自己習慣。
  3. runat="server" 代表可以被伺服器端控制，多數情況這樣寫就好

執行看看

執行

測試自己寫的結果就是按下最上面的按鈕(開始偵錯)，熱鍵是F5

開始偵錯

接著不用停止偵錯，我們先整理一下畫面上需要什麼

整理報名表單上的欄位

  • 姓名 TextBox　標籤lbName 輸入框tbName
  • 性別（男女其他）RadioButtonList 標籤lbGender 輸入框rbGender
  • 生日（西元年月日）TextBox 標籤lbBirthday 輸入框tbBirthday
  • 身分證字號（10碼）TextBox標籤lbROCID 輸入框tbROCID
  • 信箱 TextBox標籤lbEmail 輸入框tbEmail
  • 電話 TextBox標籤lbPhone 輸入框tbPhone
  • 飲食（葷食、素食）RadioButtonList 標籤lbFood 輸入框rbFood
  • 活動場次（三個日期單選）：1月場次　2月場次　3月場次 RadioButtonList 標籤lbEventId輸入框rbEventId
  • 送出按鈕Button btnSubmit

說明:

  1. 除了送出按鈕以外，每一個都需要一個欄位標籤
  2. 中華民國身分證字號欄位命名慣用ROCID
  3. 元件命名規則先訂這樣
    • 標籤lb開頭
    • 文字輸入tb開頭
    • 單選rd開頭
    • 按鈕btn開頭

接下來我們學習建立RadioButton

邊寫邊看成果

邊寫邊除錯

接下來寫的時候不需要停止偵錯，我們寫的節奏會變成

  1. 新增一組標籤
  2. 存檔
  3. 重新整理頁面

寫一點，就看一下成果

性別欄位 RadioButtonList

以前的性別欄位只有男女，現在的性別欄位選項多很多，不過在這個專案我們只用男/女/其他這三種就好

RadioButtonList這樣寫

加入RadioButtonList，之前講解過的部分我會直接省略

  • asp:RadioButtonList 代表寫的是一群RadioButton
  • RepeatDirection="Horizontal" 排列方向，Horizontal代表要水平排列
    • <asp:ListItem Text="選項顯示文字" value="選項的值"></asp:ListItem>

我有加上<br/> 讓標籤不會黏在上面

結果

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Regist.aspx.cs" Inherits="PartyRegister.Regist" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <h1>報名</h1>
    <asp:Label ID="lbName" runat="server" Text="姓名"></asp:Label>
    <asp:TextBox ID="tbName" runat="server"></asp:TextBox>
    <br/>
    <asp:Label runat="server" ID="lbGender" Text="性別"></asp:Label>
    <asp:RadioButtonList runat="server" ID="rbGender" RepeatDirection="Horizontal">
        <asp:ListItem Text="男" Value="1"></asp:ListItem>
        <asp:ListItem Text="女" Value="2"></asp:ListItem>
        <asp:ListItem Text="其他" Value="3"></asp:ListItem>
    </asp:RadioButtonList>
</asp:Content>

依樣畫葫蘆，補上剩下的報名欄位

程式需要用到的大部分我們都教了(?)，把其他的補上

  • 姓名 TextBox　標籤lbName 輸入框tbName　（已完成）
  • 性別（男女其他）RadioButtonList 標籤lbGender 輸入框rbGender（已完成）
  • 生日（西元年月日）TextBox 標籤lbBirthday 輸入框tbBirthday
  • 身分證字號（10碼）TextBox標籤lbROCID 輸入框tbROCID
  • 信箱 TextBox標籤lbEmail 輸入框tbEmail
  • 電話 TextBox標籤lbPhone 輸入框tbPhone
  • 飲食（葷食、素食）RadioButtonList 標籤lbFood 輸入框rbFood
  • 活動場次（三個日期單選）：1月場次　2月場次　3月場次 RadioButtonList 標籤lbEventId輸入框rbEventId
  • 送出按鈕Button btnSubmit
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Regist.aspx.cs" Inherits="PartyRegister.Regist" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <h1>報名</h1>
    <asp:Label ID="lbName" runat="server" Text="姓名"></asp:Label>
    <asp:TextBox ID="tbName" runat="server"></asp:TextBox>
    <br/>
    <br/>
    <asp:Label runat="server" ID="lbGender" Text="性別"></asp:Label>
    <asp:RadioButtonList runat="server" ID="rbGender" RepeatDirection="Horizontal">
        <asp:ListItem Text="男" Value="1"></asp:ListItem>
        <asp:ListItem Text="女" Value="2"></asp:ListItem>
        <asp:ListItem Text="其他" Value="3"></asp:ListItem>
    </asp:RadioButtonList>
    <br/>
    <asp:Label ID="Label1" runat="server" Text="姓名"></asp:Label>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <br/>
    <asp:Label ID="lbPhone" runat="server" Text="聯絡電話"></asp:Label>
    <asp:TextBox ID="tbPhone" runat="server"></asp:TextBox>
    <br/>
    <asp:Label ID="lbBirthday" runat="server" Text="生日"></asp:Label>
    <asp:TextBox ID="tbBirthday" runat="server"></asp:TextBox>
    <br/>
    <asp:Label ID="lbROCID" runat="server" Text="身分證字號"></asp:Label>
    <asp:TextBox ID="tbROCID" runat="server"></asp:TextBox>
    <br/>
    <asp:Label ID="lbEmail" runat="server" Text="信箱"></asp:Label>
    <asp:TextBox ID="tbEmail" runat="server"></asp:TextBox>
    <br/>
    <br/>
    <asp:Label runat="server" ID="lbFood" Text="飲食"></asp:Label>
    <asp:RadioButtonList runat="server" ID="rbFood" RepeatDirection="Horizontal">
        <asp:ListItem Text="葷" Value="1"></asp:ListItem>
        <asp:ListItem Text="素" Value="2"></asp:ListItem>
        <asp:ListItem Text="其他" Value="3"></asp:ListItem>
    </asp:RadioButtonList>
    <br/>
    <asp:Label runat="server" ID="lbEventId" Text="活動場次"></asp:Label>
    <asp:RadioButtonList runat="server" ID="rbEventId" RepeatDirection="Horizontal">
        <asp:ListItem Text="1月份" Value="1"></asp:ListItem>
        <asp:ListItem Text="2月份" Value="2"></asp:ListItem>
        <asp:ListItem Text="3月份" Value="3"></asp:ListItem>
    </asp:RadioButtonList>
</asp:Content>

小技巧，我會直接複製已有元素 label+textbox 然後貼上，再改id跟文字，這樣速度會快很多。

做好應該如圖，然後建議新手先自己key….不要直接複製貼上

畫面

我程式碼忘記放電話欄，後來補上，圖片我就沒更新了

加入送出按鈕

目前這個頁面的進度:

  • 姓名 TextBox　標籤lbName 輸入框tbName　（已完成）
  • 性別（男女其他）RadioButtonList 標籤lbGender 輸入框rbGender（已完成）
  • 生日（西元年月日）TextBox 標籤lbBirthday 輸入框tbBirthday（已完成）
  • 身分證字號（10碼）TextBox標籤lbROCID 輸入框tbROCID（已完成）
  • 信箱 TextBox標籤lbEmail 輸入框tbEmail（已完成）
  • 電話 TextBox標籤lbPhone 輸入框tbPhone（已完成）
  • 飲食（葷食、素食）RadioButtonList 標籤lbFood 輸入框rbFood（已完成）
  • 活動場次（三個日期單選）：1月場次　2月場次　3月場次 RadioButtonList 標籤lbEventId輸入框rbEventId（已完成）
  • 送出按鈕Button btnSubmit

送出按鈕長這樣

按鈕

程式碼:

<asp:Button ID="btnSubmit" CssClass="btn btn-primary" Text="送出報名" runat="server"/>

說明:

  1. 送出按鈕我們還沒有指定按下去要做什麼，所以按下去沒反應是正常的
  2. CssClass="btn btn-primary"　這個是指定html tag中的class，在asp語言上要寫成CssClass，而"btn btn-primary"是　bootstrap的按鈕樣式 參考資料

完整的程式碼:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Regist.aspx.cs" Inherits="PartyRegister.Regist" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <h1>報名</h1>
    <asp:Label ID="lbName" runat="server" Text="姓名"></asp:Label>
    <asp:TextBox ID="tbName" runat="server"></asp:TextBox>
    <br/>
    <br/>
    <asp:Label runat="server" ID="lbGender" Text="性別"></asp:Label>
    <asp:RadioButtonList runat="server" ID="rbGender" RepeatDirection="Horizontal">
        <asp:ListItem Text="男" Value="1"></asp:ListItem>
        <asp:ListItem Text="女" Value="2"></asp:ListItem>
        <asp:ListItem Text="其他" Value="3"></asp:ListItem>
    </asp:RadioButtonList>
    <br/>
    <asp:Label ID="Label1" runat="server" Text="姓名"></asp:Label>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <br/>
    <asp:Label ID="lbPhone" runat="server" Text="聯絡電話"></asp:Label>
    <asp:TextBox ID="tbPhone" runat="server"></asp:TextBox>
    <br/>
    <asp:Label ID="lbBirthday" runat="server" Text="生日"></asp:Label>
    <asp:TextBox ID="tbBirthday" runat="server"></asp:TextBox>
    <br/>
    <asp:Label ID="lbROCID" runat="server" Text="身分證字號"></asp:Label>
    <asp:TextBox ID="tbROCID" runat="server"></asp:TextBox>
    <br/>
    <asp:Label ID="lbEmail" runat="server" Text="信箱"></asp:Label>
    <asp:TextBox ID="tbEmail" runat="server"></asp:TextBox>
    <br/>
    <br/>
    <asp:Label runat="server" ID="lbFood" Text="飲食"></asp:Label>
    <asp:RadioButtonList runat="server" ID="rbFood" RepeatDirection="Horizontal">
        <asp:ListItem Text="葷" Value="1"></asp:ListItem>
        <asp:ListItem Text="素" Value="2"></asp:ListItem>
        <asp:ListItem Text="其他" Value="3"></asp:ListItem>
    </asp:RadioButtonList>
    <br/>
    <asp:Label runat="server" ID="lbEventId" Text="活動場次"></asp:Label>
    <asp:RadioButtonList runat="server" ID="rbEventId" RepeatDirection="Horizontal">
        <asp:ListItem Text="1月份" Value="1"></asp:ListItem>
        <asp:ListItem Text="2月份" Value="2"></asp:ListItem>
        <asp:ListItem Text="3月份" Value="3"></asp:ListItem>
    </asp:RadioButtonList>
    <asp:Button ID="btnSubmit" CssClass="btn btn-primary" Text="送出報名" runat="server"/>
</asp:Content>

完整頁面:

完整頁面

目前還醜醜的，不過我們這系列教學先以把功能做出來為主

0 Comments

Submit a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *