控件篇
Input(Text)控件:
如图,分三类:设计,拆分,源
设计:可以直接拖拽控件
源:通过写代码来实现控件
拆分:两者都有
选择设计,从工具箱内拉出Input(Text)控件放入界面(div)内,并设置相关属性(Text,Id等)。
工具箱是通过右击属性出来的,不是双击!不是双击!不是双击!
双击后出来的代码设置,事件等。
我设计的界面:(吐槽,好丑!╮(╯▽╰)╭)
代码贴一下
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="InputText.aspx.cs" Inherits="InputText" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <title></title> 8 <style type="text/css"> 9 #Text1 10 { height: 22px; 11 width: 187px; 12 } 13 #Password1 14 { 15 height: 20px; 16 width: 185px; 17 } 18 </style> 19 <script language="javascript" type="text/javascript"> 20 // <![CDATA[ 21 function Submit_onclick() { 22 if (txtName.value == "meng" && txtPwd.value == "123456") { 23 divMassage.innerHTML = "用户名是:" + txtName.value + "<br>" + "密码是:" + txtPwd.value + 24 "<br>" + "附加信息是:<br>" + taContents.value; 25 } 26 else { 27 divMassage.innerHTML = "用户名密码输入错误!"; 28 } 29 } 30 31 // ]]> 32 </script> 33 </head> 34 <body style="background-color: #3366FF"> 35 <form id="form1" runat="server"> 36 <div runat="server" id="divMassage"> 37 38 <asp:Label runat="server" Text="用户名:"></asp:Label> 39 <input id="txtName" type="text" runat="server" /><br /> 40 <br /> 41 <asp:Label ID="Password" runat="server" Text="密 码:"></asp:Label> 42 43 <input id="txtPwd" type="password" runat="server" /><br /> 44 <br /> 45 <asp:Label ID="AddMassage" runat="server" Text="附加信息:"></asp:Label> 46 <br /> 47 </div> 48 <textarea id="taContents" cols="20" name="S1" rows="2" runat="server"></textarea></form> 49 <p> 50 51 <input id="btnSubmit" type="submit" value="提交" runat="server" 52 onclick="return Submit_onclick()" /> 53 <input id="btnReset" type="reset" value="重置" runat="server" /></p> 54 </body> 55 </html>
其中需要解释的是,(其他是通过拖拽自动生成的)
(当然,代码是可以双击按钮控件输入的,但不要傻傻的去写function,学习别学死了,活学活用嘛)
1 function Submit_onclick() { 2 if (txtName.value == "meng" && txtPwd.value == "123456") { 3 divMassage.innerHTML = "用户名是:" + txtName.value + "<br>" + "密码是:" + txtPwd.value + 4 "<br>" + "附加信息是:<br>" + taContents.value; 5 } 6 else { 7 divMassage.innerHTML = "用户名密码输入错误!"; //innerHTML是读入HTML 8 } 9 }
一个简单表单验证完成。2016-05-21
CheckBox和CheckBoxList控件
代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.UI; 6 using System.Web.UI.WebControls; 7 8 public partial class _Default : System.Web.UI.Page 9 { 10 protected void Page_Load(object sender, EventArgs e) 11 { 12 13 } 14 protected void btnSubmit_Click(object sender, EventArgs e) 15 { 16 int flag;//flag=1表示后一个被选择了 17 string str = "您的爱好是:"; 18 if (cbWenXue.Checked == true) { 19 flag = 1; 20 } 21 else { flag = 0; } 22 23 if (cbYunDong.Checked == true){ 24 if (flag == 1){ 25 str += cbYunDong.Text + "、"; 26 } 27 else { 28 str += cbYunDong.Text ; 29 } 30 } 31 if (cbWenXue.Checked == true) { 32 str += cbWenXue.Text; 33 } 34 Message.Text = str; 35 } 36 protected void btnSubmit1_Click(object sender, EventArgs e) 37 { 38 string str1 = "您的爱好是:"; 39 for (int i = 0; i < cblHobby.Items.Count; i++) { 40 if (cblHobby.Items[i].Selected == true) { 41 str1 += cblHobby.Items[i].Text + "、"; 42 } 43 } 44 Message1.Text = str1; 45 } 46 }
Check和Selected的区别:
RadioButton与RadioButtonLis控件:
代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.UI; 6 using System.Web.UI.WebControls; 7 8 public partial class SelectControls : System.Web.UI.Page 9 { 10 protected void Page_Load(object sender, EventArgs e) 11 { 12 13 } 14 protected void btnSubmit_Click(object sender, EventArgs e) 15 { 16 if (rbQH.Checked == true) { 17 lab.Text = "您选择了" + rbQH.Text + "作为您的第一志愿"; 18 } 19 20 if (rbND.Checked == true) 21 { 22 lab.Text = "您选择了" + rbND.Text + "作为您的第一志愿"; 23 } 24 if (rbBJ.Checked == true) 25 { 26 lab.Text = "您选择了" + rbBJ.Text + "作为您的第一志愿"; 27 } 28 } 29 protected void btnSubmit1_Click(object sender, EventArgs e) 30 { 31 lab1.Text = "您选择了" + labXX.SelectedItem.Text + "作为您的第一志愿"; 32 } 33 }
RadioButton与CheckBox区别:
转:http://blog.csdn.net/lvxiangan/article/details/17371489
ListBox控件
步骤:先点击编辑项,出现窗口,点击添加,并设置Text值,点击确定即可。
代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.UI; 6 using System.Web.UI.WebControls; 7 8 public partial class ListBoxControls : System.Web.UI.Page 9 { 10 protected void Page_Load(object sender, EventArgs e) 11 { 12 13 } 14 protected void btnSubmit_Click(object sender, EventArgs e) 15 { 16 Message.Text = "您喜欢的城市是:" + ibCity.SelectedItem.Text; 17 } 18 }
DropDownList控件
代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.UI; 6 using System.Web.UI.WebControls; 7 using System.Collections; 8 9 public partial class DropDownListControls : System.Web.UI.Page 10 { 11 protected void Page_Load(object sender, EventArgs e) 12 { 13 14 } 15 protected void ddlHobby_SelectedIndexChanged(object sender, EventArgs e) 16 { 17 if (ddlHobby.SelectedItem.Text == "运动") { 18 ArrayList listHobby = new ArrayList(); 19 listHobby.Add("足球"); 20 listHobby.Add("篮球"); 21 listHobby.Add("游泳"); 22 listHobby.Add("爬山"); 23 listHobby.Add("跳水"); 24 //获取对象,数据绑定 25 lbHobby.DataSource = listHobby; 26 //将数据源绑定到服务器控件及其子控件上 27 lbHobby.DataBind(); 28 } 29 if (ddlHobby.SelectedItem.Text == "舞蹈") { 30 ArrayList listHobby = new ArrayList(); 31 listHobby.Add("拉丁舞"); 32 listHobby.Add("民族舞"); 33 listHobby.Add("交谊舞"); 34 lbHobby.DataSource = listHobby; 35 lbHobby.DataBind(); 36 } 37 } 38 }
myGitgub https://github.com/mfx55
希望我的博客能帮到你