從零開始學習 VB.NET 和 ASP.NET Web Forms:建立你的第一個 Web 應用程式

更新於 發佈於 閱讀時間約 5 分鐘

什麼是 VB.Net?

VB.Net(Visual Basic .NET)是 Microsoft 開發的物件導向程式語言,適用於 Windows 應用程式、Web 應用程式和資料庫開發。它簡單易學,適合初學者進入程式開發領域。

我們將從零開始,使用 VB.NetASP.NET Web Forms 建立你的第一個 Web 應用程式

目標

  • 安裝開發環境
  • 建立 ASP.NET Web Forms 專案
  • 撰寫簡單的 VB.Net 代碼處理 Web 表單輸入

安裝開發環境

下載與安裝 Visual Studio

  • 前往 Visual Studio 官方網站 下載 Visual Studio 社群版(免費)。
  • 在安裝選項中,勾選 .NET 桌面開發 和 ASP.NET 與 Web 開發。
raw-image
  • 完成安裝後,開啟 Visual Studio。

建立 ASP.NET Web Forms 專案

  • 開啟 Visual Studio,選擇 建立新專案。
raw-image
  • 搜尋並選擇 ASP.NET Web 應用程式 (.NET Framework)。
raw-image
  • 設定專案名稱,例如:WebApplication1,選擇 儲存位置,點擊 建立。
raw-image
  • 選擇 Web Forms 範本,並勾選 設定 HTTPS。
raw-image
  • 點擊 建立,Visual Studio 會自動產生一個基本的 Web Forms 專案。

撰寫你的第一個 VB.Net 程式

編輯 Default.aspx 頁面

這是你的首頁,打開 Default.aspx,並新增以下表單元件:

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<h2>歡迎來到我的第一個 ASP.NET Web 應用程式!</h2>
<div>
<asp:Label ID="Label1" runat="server" Text="請輸入您的名字:" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="送出" OnClick="Button1_Click" CssClass="btn btn-primary"/>
<br /><br />
<asp:Label ID="ResultLabel" runat="server" ForeColor="Blue" />
</div>
</asp:Content>

Web Forms 元件

  • <asp:TextBox> → 讓使用者輸入內容
  • <asp:Button> → 按鈕,點擊後觸發事件
  • <asp:Label> → 顯示訊息


編輯 Default.aspx.vb(後端程式碼)

打開 Default.aspx.vb,新增以下 VB.Net 程式碼來處理按鈕點擊事件:

Public Class _Default
Inherits System.Web.UI.Page

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
' 取得使用者輸入的名字
Dim userName As String = TextBox1.Text.Trim()

' 如果名字不為空則顯示歡迎訊息
If userName <> "" Then
ResultLabel.Text = "Hello, " & Server.HtmlEncode(userName) & "!歡迎來到 ASP.NET Web Forms!"
Else
ResultLabel.Text = "請輸入您的名字!"
End If
End Sub
End Class

說明

  • TextBox1.Text.Trim() 取得使用者輸入的內容,並去掉前後空白。
  • Server.HtmlEncode(userName) 可防止 XSS 攻擊(惡意 JavaScript 注入)。
  • ResultLabel.Text 會更新畫面上的文字,顯示歡迎訊息。

執行與測試

  1. 點擊 F5 執行專案。
  2. 在瀏覽器中開啟 http://localhost:XXXX/(XXXX 是你的開發埠)。
  3. 輸入你的名字,例如 Alice,然後點擊 送出。
  4. 頁面會顯示:Hello, Alice!歡迎來到 ASP.NET Web Forms!
  5. 若輸入空值,則會顯示 請輸入您的名字!
raw-image


如果你有興趣進一步學習,請留言告訴我或留言與我分享~~~~

留言
avatar-img
留言分享你的想法!
avatar-img
小猴工程師
1會員
23內容數
小猴工程師的其他內容
2025/04/15
這篇文章提供教學,如何使用 Python 和 Pandas 函式庫將 Elasticsearch 的 JSON 資料(透過 Elasticdump 匯出)轉換成 Excel 可讀取且支援繁體中文的 CSV 檔案,並解決常見的中文編碼問題。
2025/04/15
這篇文章提供教學,如何使用 Python 和 Pandas 函式庫將 Elasticsearch 的 JSON 資料(透過 Elasticdump 匯出)轉換成 Excel 可讀取且支援繁體中文的 CSV 檔案,並解決常見的中文編碼問題。
2025/03/25
演算法是解決問題的系統性流程,廣泛應用於各領域,如廚師的食譜、音樂家的樂譜和程式設計師的程式碼。河內塔問題是經典的遞迴演算法示例,透過觀察、數學建模與遞推關係,揭示演算法設計的核心思維。掌握這些技巧有助於拆解複雜問題並找到最佳解法。如果你對演算法有興趣,歡迎留言交流!
Thumbnail
2025/03/25
演算法是解決問題的系統性流程,廣泛應用於各領域,如廚師的食譜、音樂家的樂譜和程式設計師的程式碼。河內塔問題是經典的遞迴演算法示例,透過觀察、數學建模與遞推關係,揭示演算法設計的核心思維。掌握這些技巧有助於拆解複雜問題並找到最佳解法。如果你對演算法有興趣,歡迎留言交流!
Thumbnail
2025/03/21
本文介紹 VB.NET 的 If...Else 和 Select Case 條件判斷結構,包含語法、範例及適用情境。If...Else 適合多變數與複雜邏輯,Select Case 則適用於單一變數的多值判斷,語法簡潔且效能較佳。文章並比較其效能、靈活性與可讀性,幫助選擇最佳控制結構。
Thumbnail
2025/03/21
本文介紹 VB.NET 的 If...Else 和 Select Case 條件判斷結構,包含語法、範例及適用情境。If...Else 適合多變數與複雜邏輯,Select Case 則適用於單一變數的多值判斷,語法簡潔且效能較佳。文章並比較其效能、靈活性與可讀性,幫助選擇最佳控制結構。
Thumbnail
看更多
你可能也想看
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
這篇文章提供一個逐步指南,教導讀者如何使用VB.Net和ASP.NET Web Forms建立一個簡單的Web應用程式。從安裝開發環境到撰寫程式碼、執行與測試,步驟清晰易懂,適合初學者學習。
Thumbnail
這篇文章提供一個逐步指南,教導讀者如何使用VB.Net和ASP.NET Web Forms建立一個簡單的Web應用程式。從安裝開發環境到撰寫程式碼、執行與測試,步驟清晰易懂,適合初學者學習。
Thumbnail
歡迎來到我們的Windows教學!在這裡,你將學習如何有效使用Windows操作系統。我們將探索各種基本操作,如文件管理、桌面設置、程式安裝和系統設置。無論你是新手還是希望深入了解Windows的使用者,我們的教學內容都能夠幫助你提升操作技能,使你在日常使用和工作中更加流暢和高效。立即加入我們,開啟
Thumbnail
歡迎來到我們的Windows教學!在這裡,你將學習如何有效使用Windows操作系統。我們將探索各種基本操作,如文件管理、桌面設置、程式安裝和系統設置。無論你是新手還是希望深入了解Windows的使用者,我們的教學內容都能夠幫助你提升操作技能,使你在日常使用和工作中更加流暢和高效。立即加入我們,開啟
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
前面已經安裝好IIS後,並且也新建站台了,那麼接下來這篇就會分享如何使用它
Thumbnail
前面已經安裝好IIS後,並且也新建站台了,那麼接下來這篇就會分享如何使用它
Thumbnail
接續上一篇 Step2:VC#專案建立 Step3:IIS新建站台 Step4:VC#架設到IIS中
Thumbnail
接續上一篇 Step2:VC#專案建立 Step3:IIS新建站台 Step4:VC#架設到IIS中
Thumbnail
Visual Basic for Applications(VBA)是一種功能強大的程式語言,廣泛用於自動化 Microsoft Office 應用程式中的重複性任務。在這篇教學文章中,我們將介紹如何使用 VBA 來新增、刪除和移動檔案。
Thumbnail
Visual Basic for Applications(VBA)是一種功能強大的程式語言,廣泛用於自動化 Microsoft Office 應用程式中的重複性任務。在這篇教學文章中,我們將介紹如何使用 VBA 來新增、刪除和移動檔案。
Thumbnail
理解一個全新的操作環境有時候可能是一個挑戰,尤其對於那些剛開始接觸VS Code的開發者來說,即便具備一定的英文閱讀能力,可能也會對這個陌生的操作環境感到徬徨和不安。不過,沒有必要擔心,我們接下來就來一起用短短的一分鐘時間,將VS Code轉換成最熟悉的中文環境吧! 安裝繁體中文語言包 由於VS
Thumbnail
理解一個全新的操作環境有時候可能是一個挑戰,尤其對於那些剛開始接觸VS Code的開發者來說,即便具備一定的英文閱讀能力,可能也會對這個陌生的操作環境感到徬徨和不安。不過,沒有必要擔心,我們接下來就來一起用短短的一分鐘時間,將VS Code轉換成最熟悉的中文環境吧! 安裝繁體中文語言包 由於VS
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News