当前位置： 首页 > ds >正文

Web程序设计

ds 2025/8/26 13:08:13

一、控件基础

文本框、按钮事件的使用

<%@ 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.xdnf.cn/news/18921.html

相关文章：

  • 《 nmcli网络管理学习》
  • 28 FlashAttention
  • sudo 升级
  • 牛客周赛 Round 106（小苯的方格覆盖/小苯的数字折叠/ 小苯的波浪加密器/小苯的数字变换/小苯的洞数组构造/ 小苯的数组计数）
  • “华生科技杯”2025年全国青少年龙舟锦标赛在海宁举行
  • Linux网络套接字
  • 0825 http梳理作业
  • 自由学习记录（88）
  • springboot中操作redis的步骤
  • 将盾CDN：高防CDN和游戏盾有什么区别？
  • 【数据结构】LeetCode160.相交链表 138.随即链表复制 牛客——链表回文问题
  • SQL每日一练
  • 盲盒经济新风口：盲盒抽谷机小程序系统开发全解析
  • 深度学习-----《PyTorch神经网络高效训练与测试：优化器对比、激活函数优化及实战技巧》
  • Telematics Control Unit（TCU）的系统化梳理
  • 数据结构：红黑树（Red-Black Tree）
  • git开发基础流程
  • Springboot应用如何与SkyWalking集成，并使用Docker进行发布
  • Python爬虫实战：研究amazon-scrapy，构建亚马逊电商数据采集和分析系统
  • 扣子智能体商业化卡在哪？井云系统自动化交易+私域管理，闭环成交全流程拆解
  • 小程序开发指南（四）（UI 框架整合）
  • 机器视觉的3C玻璃盖板丝印应用
  • three.js+WebGL踩坑经验合集(8.3):合理设置camera.near和camera.far缓解实际场景中的z-fighting叠面问题
  • 如何在IDEA中使用Git
  • MyBatis-Plus 快速入门 -常用注解
  • 使用阿里云实现短信注册
  • SAVITECH盛微先进SAVIAUDIO音频解码芯片方案与应用
  • ValueTask 实战指南：解锁 .NET 异步编程的性能秘密
  • window显示驱动开发—混合系统 DDI 和 dList DLL 支持
  • 【P2P】P2P主要技术及RELAY服务实现