一、控件基礎
文本框、按鈕事件的使用
<%@ 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>
:一個鏈接,點擊后會重新加載當前頁面。
后端代碼
- 數據來源:用數組模擬從數據庫獲取的學生信息(學號、姓名、專業、成績)。
- 動態生成行和單元格:
- 循環數組中的每條數據,創建一個
TableRow
(表格行)。 - 為每行創建 4 個
TableCell
(單元格),分別存放學號、姓名、專業和成績。 - 成績列特殊處理:不直接顯示文本,而是添加一個
TextBox
(文本框)控件,允許用戶編輯成績。 - 組裝表格:將單元格添加到行,再將行添加到前端定義的
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>
結果顯示