Web程序設計

一、控件基礎

文本框、按鈕事件的使用

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="User_Login.aspx.cs" Inherits="User_Login" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title>
</head>
<body><form id="form1" runat="server"><div>用戶名:<asp:TextBox ID="txtName" runat="server"></asp:TextBox><br />密碼:<asp:TextBox ID="txtPwd" runat="server"></asp:TextBox><br /><asp:Button ID="btnSubmit" runat="server" Text="登錄" OnClick="btnSubmit_Click" /><asp:Button ID="btnEnter" runat="server" Text="注冊" OnClick="btnEnter_Click" /></div></form>
</body>
</html>

后端代碼略

表格控件使用

前端代碼

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tableControl.aspx.cs" Inherits="tableControl" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title>
</head>
<body><form id="form1" runat="server"><div>學生成績表:<br /><asp:Table ID="tabScore" runat="server" GridLines="Both"><asp:TableHeaderRow  runat="server"><asp:TableHeaderCell  runat="server">學號</asp:TableHeaderCell><asp:TableHeaderCell  runat="server">姓名</asp:TableHeaderCell><asp:TableHeaderCell  runat="server">專業</asp:TableHeaderCell><asp:TableHeaderCell  runat="server">成績</asp:TableHeaderCell></asp:TableHeaderRow></asp:Table><a href="tableControl.aspx">tableControl.aspx</a></div></form>
</body>
</html>
  • <asp:Table>:ASP.NET服務器端表格控件,GridLines="Both"表示顯示表格的邊框線。
  • <asp:TableHeaderRow>:表格的表頭行,包含 4 個表頭單元格(<asp:TableHeaderCell>),分別對應 “學號”“姓名”“專業”“成績” 列。
  • 此時表格只有表頭,具體數據行將通過后端代碼動態生成。
  • <a href="tableControl.aspx">tableControl.aspx</a>:一個鏈接,點擊后會重新加載當前頁面。

后端代碼

  1. 數據來源:用數組模擬從數據庫獲取的學生信息(學號、姓名、專業、成績)。
  2. 動態生成行和單元格:
  3. 循環數組中的每條數據,創建一個TableRow(表格行)。
  4. 為每行創建 4 個TableCell(單元格),分別存放學號、姓名、專業和成績。
  5. 成績列特殊處理:不直接顯示文本,而是添加一個TextBox(文本框)控件,允許用戶編輯成績。
  6. 組裝表格:將單元格添加到行,再將行添加到前端定義的tabScore表格中。
    protected void Page_Load(object sender, EventArgs e)
    {// 模擬從數據庫獲取的數據string[] strId = { "231060250111", "231060250112", "231060250113" };string[] strName = { "張三", "李四", "王五" };string[] strMajor = { "網工", "網工", "網工" };string[] stScore = { "97", "95", "92" };// 循環生成表格數據行for(int i = 1; i <= strName.Length; i++){// 創建新行TableRow row = new TableRow();// 創建單元格并賦值TableCell cellId = new TableCell();cellId.Text = strId[i - 1];  // 學號TableCell cellName = new TableCell();cellName.Text = strName[i - 1];  // 姓名TableCell cellMajor = new TableCell();cellMajor.Text = strMajor[i - 1];  // 專業// 成績單元格:包含一個文本框(可編輯)TableCell cellScore = new TableCell();TextBox txtScore = new TextBox();txtScore.ID = "txtScore";  // 文本框IDcellScore.Controls.Add(txtScore);  // 將文本框添加到單元格// 將單元格添加到行row.Cells.Add(cellId);row.Cells.Add(cellName);row.Cells.Add(cellMajor);row.Cells.Add(cellScore);// 將行添加到表格tabScore.Rows.Add(row);}
    }

    單選按鈕控件

前端代碼

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="radioControl.aspx.cs" Inherits="radioControl" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title>
</head>
<body><form id="form1" runat="server"><div>神父:你是否愿意娶張三為妻<br />李四:<asp:RadioButton ID="rbAgree" runat="server" />我愿意<br /><asp:Button ID="btnRs" runat="server" Text="結果" OnClick="btnRs_Click" /><br /><asp:Label ID="lblRs" runat="server"></asp:Label></div><div><asp:RadioButtonList ID="rbGrender" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow"><asp:ListItem Value="male">男</asp:ListItem><asp:ListItem Value="female">女</asp:ListItem><asp:ListItem Value="secret">保密</asp:ListItem></asp:RadioButtonList><br /><asp:Button ID="btnSelected" runat="server" Text="選好了" OnClick="btnSelected_Click" /><asp:Label ID="lblMsg" runat="server"></asp:Label></div></form>
</body>
</html>
  • <asp:RadioButtonList>:單選按鈕列表控件,用于創建一組互斥的單選按鈕
    • RepeatDirection="Horizontal":設置選項水平排列
    • RepeatLayout="Flow":使選項以流式布局顯示(不使用表格)
  • <asp:ListItem>:列表項,每個項代表一個單選按鈕,Value是后端獲取的值,標簽文本是顯示給用戶的內容
  • 第二個按鈕btnSelected點擊后觸發btnSelected_Click事件
  • lblmsg標簽用于顯示性別選擇結果

后端代碼

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;public partial class radioControl : System.Web.UI.Page
{protected void Page_Load(object sender, EventArgs e){}protected void btnRs_Click(object sender, EventArgs e){if (rbAgree.Checked){lblRs.Text = "張三和李四幸福的在一起了!";}else{lblRs.Text = "李四自由了";}}protected void btnSelected_Click(object sender, EventArgs e){lblMsg.Text = "你選擇的性別是:" + rbGrender.SelectedValue;}
}

最終效果

PlaceHoder控件

前端代碼

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="placeControl.aspx.cs" Inherits="placeControl" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title>
</head>
<body><form id="form1" runat="server"><div><asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder></div></form>
</body>
</html>
  • PlaceHolder作為一個 "容器",允許在后端代碼中動態創建控件并添加到頁面。
  • 頁面運行時,會自動在PlaceHolder1的位置顯示動態創建的 "確定" 按鈕和文本框。
  • 點擊 "確定" 按鈕后,會觸發后端的事件處理方法,在頁面上輸出提示文本。

后端代碼

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;public partial class placeControl : System.Web.UI.Page
{protected void Page_Load(object sender, EventArgs e){Button btnSubmit = new Button();btnSubmit.ID = "btnSubmit";btnSubmit.Text = "確定";btnSubmit.Click += new EventHandler(BtnSubmit_Click);TextBox txtInput = new TextBox();txtInput.ID = "txtInput";PlaceHolder1.Controls.Add(btnSubmit);PlaceHolder1.Controls.Add(txtInput);}protected void BtnSubmit_Click(object sender,EventHandler e){Response.Write("我點擊了這個[確定]按鈕");}}

效果展示

ListBox控件

前端代碼

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="lstboxControl.aspx.cs" Inherits="lstboxControl" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title>
</head>
<body><form id="form1" runat="server"><div><asp:ListBox ID="lstCourse" runat="server" Rows="5" SelectionMode="Multiple"><asp:ListItem>計算機網絡</asp:ListItem><asp:ListItem>C語言</asp:ListItem><asp:ListItem>Web程序設計</asp:ListItem><asp:ListItem>Python課程</asp:ListItem><asp:ListItem>Java語言</asp:ListItem></asp:ListBox><asp:Button ID="btnToRight" runat="server" Text="== >" OnClick="btnToRight_Click" /><asp:Button ID="btnToLeft" runat="server" Text="< ==" OnClick="btnToLeft_Click" /><asp:ListBox ID="lstSelected" runat="server" Rows="5" SelectionMode="Multiple"></asp:ListBox><asp:Button ID="btnSubmit" runat="server" Text="提交" OnClick="btnSubmit_Click" /><asp:Label ID="lblMsg" runat="server" Text="你選中的有:"></asp:Label></div></form>
</body>
</html>

后端代碼

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;public partial class lstboxControl : System.Web.UI.Page
{protected void Page_Load(object sender, EventArgs e){if(lstSelected.Items.Count == 0){btnToLeft.Enabled = false;}}private void Btn_state(){if(lstCourse.Items.Count == 0){btnToRight.Enabled = false;}else{btnToRight.Enabled = true;}if(lstSelected.Items.Count == 0){btnToLeft.Enabled = false;}else{btnToLeft.Enabled = true;}}protected void btnToRight_Click(object sender, EventArgs e){for(int i = 0; i < lstCourse.Items.Count; i++){if (lstCourse.Items[i].Selected == true){lstCourse.Items.Remove(lstCourse.Items[i]);lstSelected.Items.Add(lstCourse.Items[i]);i--;}}Btn_state();}protected void btnToLeft_Click(object sender, EventArgs e){for(int i = 0; i < lstSelected.Items.Count; i++){if (lstSelected.Items[i].Selected == true){lstSelected.Items.Remove(lstSelected.Items[i]);lstCourse.Items.Add(lstSelected.Items[i]);i--;}}Btn_state();}protected void btnSubmit_Click(object sender, EventArgs e){lblMsg.Text = "你選中的有:";for (int i = 0; i < lstSelected.Items.Count; i++){lblMsg.Text += lstSelected.Items[i].Text + ",";}}
}

最終效果

Panel控件

  • 初始狀態下面板(pnlStep)是可見的(因為ASP.NET控件的Visible屬性默認值為true
  • 點擊 "隱藏" 按鈕后,面板會被隱藏(不在頁面上顯示)
  • 點擊 "顯示" 按鈕后,面板會重新顯示
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="lblPanel.aspx.cs" Inherits="lblPanel" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title>
</head>
<body><form id="form1" runat="server"><div><asp:Panel ID="pnlStep" runat="server"><asp:Button ID="btnShow" runat="server" Text="顯示" OnClick="btnShow_Click"/><asp:Button ID="btnHidden" runat="server" Text="隱藏" OnClick="btnHidden_Click" /></asp:Panel></div></form>
</body>
</html>

后端代碼

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;public partial class lblPanel : System.Web.UI.Page
{protected void Page_Load(object sender, EventArgs e){}protected void btnShow_Click(object sender, EventArgs e){pnlStep.Visible = true;}protected void btnHidden_Click(object sender, EventArgs e){pnlStep.Visible = false;}
}

Image控件

前端代碼

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="imgControl.aspx.cs" Inherits="imgControl" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title>
</head>
<body><form id="form1" runat="server"><div><asp:RadioButtonList ID="rblGender" runat="server" AutoPostBack="true" OnSelectedIndexChanged="rblGender_SelectedIndexChanged"><asp:ListItem Value="male">男</asp:ListItem><asp:ListItem Value="female">女</asp:ListItem><asp:ListItem></asp:ListItem></asp:RadioButtonList><br /><asp:Image ID="imgHouse" runat="server" ImageUrl="~/imgaes/imageHouse.png" Width="280px"/><asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/images/bd.png"><asp:CircleHotSpot X="205" Y="65" Radius="65" NavigateUrl="http://www.baidu.com/" /></asp:ImageMap><asp:HyperLink ID="hylBaidu" runat="server" NavigateUrl="http://www.baidu.com/">百度</asp:HyperLink></div></form>
</body>
</html>

快捷鍵設置

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title>
</head>
<body><form id="form1" runat="server"><div><asp:Label ID="lhlName" runat="server" Text="用戶名(N): "AssociateControlID="textName" AccessKey="N"></asp:Label><asp:TextBox ID="textName" runat="server"></asp:TextBox><br /><asp:Label ID="lblPwd" runat="server" Text="密碼:"  AssociateControlID="txtPwd" AccessKey="M"></asp:Label><asp:TextBox ID="txtPwd" TextMode="Password" runat="server"></asp:TextBox><br /><asp:Label ID="lblDate" runat="server" Text="生日" AssociatedControlID="txtDate" AccessKey="D"></asp:Label><asp:TextBox ID="txtDate" runat="server" TextMode="Date"></asp:TextBox><br /><asp:Label ID="Label3" runat="server" Text="Label"></asp:Label><asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton></div></form>
</body>
</html>

結果顯示

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/94477.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/94477.shtml
英文地址,請注明出處:http://en.pswp.cn/web/94477.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

復合設計模式

復合設計模式復合設計模式是一種結構模式&#xff0c;可讓您統一處理單個對象和對象的組合。它允許您構建樹狀結構&#xff08;例如&#xff0c;文件系統、UI 層次結構、組織結構&#xff09;&#xff0c;客戶端可以使用同一界面處理單個元素和元素組。它在以下情況下特別有用&…

使用 Prometheus 監控服務器節點:Node Exporter 詳解與配置

前言 在上一篇文章中&#xff0c;我們介紹了如何在 CentOS 上部署 Prometheus 并使用 systemd 進行管理。本文將繼續深入&#xff0c;講解如何使用 Prometheus 監控服務器節點&#xff0c;重點介紹 Node Exporter 的作用、安裝和配置方法。 Node Exporter 是 Prometheus 生態…

C# 編寫一個XmlToDota的轉換工具

以下代碼可以將Labelme標注的旋轉框Xml格式文件轉換為Yolo標注格式的txt文件&#xff0c;以便用Yolo OBB訓練自己的數據集&#xff1a;using System; using System.Collections.Generic; using System.IO; using System.Xml; using System.Linq; using System.Globalization;na…

[Android] 人體細胞模擬器1.5

[Android] 人體細胞模擬器1.5 鏈接&#xff1a;https://pan.xunlei.com/s/VOYVUieTpjNVJq-bMys4EEDGA1?pwdm7m6# 省流:這個軟件的開發者有點逆天&#xff0c;一個模擬人體器官的軟件&#xff0c;細致到有血液報告&#xff0c;還縫合了生理學和病理學&#xff0c;甚至還能做切…

【Linux基礎知識系列】第一百一十篇 - 使用Nmap進行網絡安全掃描

在網絡安全管理中&#xff0c;了解網絡中的設備、開放的端口以及運行的服務是至關重要的。Nmap&#xff08;Network Mapper&#xff09;是一個功能強大的開源工具&#xff0c;用于網絡發現和安全審計。它可以掃描網絡中的設備&#xff0c;識別開放的端口和運行的服務&#xff0…

【Linux倉庫】進程的“奪舍”與“飛升”:exec 驅動的應用現代化部署流水線

&#x1f31f; 各位看官好&#xff0c;我是egoist2023&#xff01; &#x1f30d; Linux Linux is not Unix &#xff01; &#x1f680; 今天來學習exec系列的進程程序替換,從"fork"的"克隆"到"exec"的"重生"。 &#x1f44d; 如果覺…

Reachability Query

題目分析 該代碼實現了一個動態集合管理系統&#xff0c;支持三種操作&#xff1a;合并集合、切換元素狀態、查詢集合中是否- 存在活躍元素。核心數據結構為并查集&#xff0c;結合狀態標記數組和計數器。關鍵數據結構與函數 初始化 fa[N]&#xff1a;并查集父節點數組&#xf…

SSL移動接入方案和移動資源發布

一、SSL VPN概述SSL VPN是一種基于SSL/TLS協議的遠程安全接入技術&#xff0c;因其廣泛兼容Web瀏覽器&#xff0c;支持“無客戶端”部署&#xff0c;具備易于使用和維護的特點。它通過插件系統支持非Web類TCP/UDP應用&#xff0c;并且支持對用戶的訪問可以做出限制&#xff0c;…

C++STL---count() 統計容器中特定元素出現次數

在 C 標準庫中&#xff0c;count 是一個用于統計容器中特定元素出現次數的函數&#xff0c;定義在 <algorithm> 頭文件中。它可以快速計算某個值在容器&#xff08;如數組、vector、list 等&#xff09;中出現的次數&#xff0c;避免手動編寫循環計數的麻煩。 一、函數原…

Tesla自動駕駛域控制器(AutoPilot HW)的系統化梳理

目前網絡上對Tesla自動駕駛硬件&#xff08;AP1-AP4、HW1.0-HW4.0&#xff09;迭代的相關介紹比較混亂&#xff0c;本文這里進行系統化梳理并澄清&#xff0c;并對一些錯誤進行更正。1、AutoPilot HW迭代圖圖1 AutoPilot HWMCU迭代圖圖2 AutoPilot HW 散熱設計迭代圖&#xff0…

C 語言:第 20 天筆記:typedef(類型重命名規則、應用場景與實戰案例)

C語言&#xff1a;第20天筆記 內容提要 構造類型枚舉類型typedef綜合案例:斗地主預處理 構造類型&#xff1a;枚舉類型 使用建議 如果定義不相干的常量&#xff0c;使用宏定義&#xff08;符號常量&#xff09;&#xff1b;如果需要定義一組相關聯的常量&#xff08;如月份011、…

在 vue3 和 vue2 中,v-for 和 v-if 可以一起用嗎,區別是什么

在 Vue 2 和 Vue 3 中&#xff0c;v-for 和 v-if 可以一起使用&#xff0c;但兩者在處理順序和推薦用法上存在明顯區別&#xff0c;主要體現在優先級和最佳實踐上&#xff1a; 1. Vue 2 中的 v-for 與 v-if優先級&#xff1a;v-for 的優先級高于 v-if。 這意味著 Vue 會先循環渲…

Linux-進程相關函數

文章目錄Linux-進程相關函數父子進程關系父子進程地址空間getpid函數 獲取本進程號getppid函數 獲取當前進程的進程的父進程號getpgid函數 獲取進程組號示例fork函數 創建進程區分父子進程exit函數 進程退出wait函數 等待子進程退出waitpid函數Linux-進程相關函數 每個進程都由…

數據挖掘 6.1 其他降維方法(不是很重要)

6.1 Other dimensionality reduction methods 6.1 其他降維方法 其他降維方法前言問題答案流形3 降維大綱3.1 線性方法3.2 非線性方法3.2.1 流形學習方法&#xff08;Manifold Learning&#xff09;3.2.2 概率方法&#xff08;Probabilistic Approaches&#xff09;3.2.3 拓撲數…

Unity中的特殊文件夾

一.工程路徑獲取print(Application.dataPath);只用于游戲開發編輯器模式下&#xff0c;游戲發布后此路徑就不存在了二.Resources 資源文件夾//路徑獲取: //一般不獲取 //只能使用Resources相關API進行加載 //如果硬要獲取 可以用工程路徑拼接print(Application.dataPath "…

Seaborn數據可視化實戰:Seaborn高級使用與性能優化教程

Seaborn最佳實踐與技巧 學習目標 本課程將深入探討Seaborn庫的高級使用技巧&#xff0c;包括性能優化、常見問題解決方法等&#xff0c;旨在幫助學員掌握如何高效地使用Seaborn進行數據可視化&#xff0c;提升圖表的美觀度和信息傳達效率。 相關知識點 Seaborn最佳實踐與技巧 學…

分布式系統與單機系統的優劣勢對比

近期有遇到一個本地部署的需求&#xff0c;他們希望用主備方案&#xff0c;這就涉及到了備用系統怎么收費的問題。我們是單機系統&#xff0c;其他友商是分布式系統&#xff0c;那20坐席的手撥需求到底是選單機系統好&#xff0c;還是選分布式系統好呢&#xff1f;了解了兩者的…

深度學習:從手寫數字識別案例認識pytorch框架

目錄 一、PyTorch 核心優勢與框架定位 二、實戰基礎&#xff1a;核心庫與數據準備 1. 關鍵庫導入與功能說明 2. MNIST 數據集加載與可視化 &#xff08;1&#xff09;數據集下載與封裝 &#xff08;2&#xff09;數據集可視化&#xff08;可選&#xff09; 3. DataLoade…

二分|組合|旋轉數組

lc1976dijk min_pathpq. min_wlcr187同lc1823.約瑟夫環class Solution { public:int iceBreakingGame(int num, int target) {int x0;for(int i2;i<num;i){x(xtarget)%i;} return x;} };lc2972計算數組中可移除的子數組數量先找最長遞增前綴&#xff0c;再結合遞增后綴…

【C語言16天強化訓練】從基礎入門到進階:Day 10

&#x1f525;個人主頁&#xff1a;艾莉絲努力練劍 ?專欄傳送門&#xff1a;《C語言》、《數據結構與算法》、C語言刷題12天IO強訓、LeetCode代碼強化刷題、洛谷刷題、C/C基礎知識知識強化補充、C/C干貨分享&學習過程記錄 &#x1f349;學習方向&#xff1a;C/C方向學習者…