2012年11月-.Net学习笔记-表单-(更新中)

表单一:

利用后台控件实现的

包括姓名(文本),年龄(文本),生日(时间选择控件),性别(radio单选控件),爱好(复选控件)。将填写的这些信息传入到后台

前台代码
 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testForm.aspx.cs" Inherits="WebApplication1.testForm" %>
 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 </head>
 9 <body>
10     <form id="form1" runat="server">
11     <div>
12         <label for="txtname">姓名:</label><asp:TextBox ID="txtname" runat="server"></asp:TextBox><br />
13         <label for="txtage">年龄:</label><asp:TextBox ID="txtage" runat="server"></asp:TextBox><br />
14         <label>生日:</label>
15         <asp:Calendar ID="calbirth" runat="server"></asp:Calendar><br />
16         <label for="radlistsex">性别:</label>
17         <asp:RadioButtonList ID="radlistsex" runat="server" v>
18             <asp:ListItem Text="男" Selected="True" Value="男"></asp:ListItem>
19             <asp:ListItem Text="女" Value="女"></asp:ListItem>
20         </asp:RadioButtonList><br />
21         <label for="">爱好:</label><br />
22         <asp:CheckBoxList ID="cblhobby" runat="server">
23             <asp:ListItem Text="足球" Value="足球" />
24             <asp:ListItem Text="排球" Value="排球" />
25             <asp:ListItem Text="篮球" Value="篮球" />
26             <asp:ListItem Text="橄榄球" Value="橄榄球" />
27         </asp:CheckBoxList><br />
28         <asp:Button ID="subbuton" Text="提交" runat="server" onclick="subbuton_Click1" />
29     </div>
30     </form>
31 </body>
32 </html>
后台代码
 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 namespace WebApplication1
 9 {
10     public partial class testForm : System.Web.UI.Page
11     {
12         protected void Page_Load(object sender, EventArgs e)
13         {
14             
15             //subbuton.Click += new EventHandler(subbuton_Click);
16         }
17 
18         //void subbuton_Click(object sender, EventArgs e)
19         //{
20             
21         //}
22 
23         protected void subbuton_Click1(object sender, EventArgs e)
24         {
25             string name = "姓名:" + txtname.Text.Trim();
26             string age = "年龄:" + txtage.Text.Trim();
27             string birth = "生日:" + calbirth.SelectedDate.ToString();
28             string sex = "性别:" + radlistsex.SelectedValue;
29             string hobby = "爱好:";
30             for (int i = 0; i < cblhobby.Items.Count; i++)
31             {
32                 if (cblhobby.Items[i].Selected)
33                 {
34                         hobby += "," + cblhobby.Items[i].Value;                    
35                 }
36             }
37             //Response.Redirect("testSubmit.aspx?name=" + name + "&age=" + age + "&birth=" + birth + "&sex=" + sex + "&hobby=" + hobby);
38             Response.Write("<script>alert('"+name+"\\n"+age+"\\n"+birth+"\\n"+sex+"\\n"+hobby+"');</script>");
39         }
40     }
41 }

 

 

第二个表单 和第一个表单一样 不过除了提交按钮用后台空间外 其它都用html标记

日期选择 使用 js

前端代码
 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="WebApplicationTestForm.index" %>
 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     <!--实现日期联动的js-->
 9     <script type="text/javascript">
10         function load() {
11             var i = -1;
12             //添加年份,从1900年开始
13             var nowyear = new Date().getFullYear();
14             var nowmonth = new Date().getMonth() + 1;
15             //var nowday = new Date().getDate();
16             for (i = 1900; i <= nowyear; i++) {
17                 addOption(form1.Year, i, i - 0);
18                 //默认选中当前年份
19                 if (i == nowyear) {
20                     form1.Year.options[i - 1900].selected = true;
21                 }
22             }
23             //添加月份
24             for (i = 1; i <= 12; i++) {
25                 addOption(form1.Month, i, i);
26                 //默认选中当前月份
27                 if (i == nowmonth) {
28                     form1.Month.options[i - 1].selected = true;
29                 }
30             }
31             //添加日期
32             for (i = 1; i <= 31; i++) {
33                 addOption(form1.Day, i, i);
34             }
35         }
36 
37         //设置每个月份的天数
38         function setDays(year, month, day) {
39             var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
40             var yea = year.options[year.selectedIndex].text;
41             var mon = month.options[month.selectedIndex].text;
42             var num = monthDays[mon - 1];
43             if (mon == 2 && isLeapYear(yea)) {
44                 num++;
45             }
46             for (var i = day.options.length - 1; i >= num; i--) {
47                 day.remove(i);
48             }
49             for (var i = 1; i <= num; i++) {
50                 addOption(form1.Day, i, i);
51             }
52         }
53 
54         //判断是否闰年
55         function isLeapYear(year) {
56             return (year % 4 == 0 || (year % 100 == 0 && year % 400 == 0));
57         }
58 
59         //向select尾部添加option
60         function addOption(selectbox, text, value) {
61             var option = document.createElement("option");
62             option.text = text;
63             option.value = value;
64             selectbox.options.add(option);
65         }
66          </script>
67 </head>
68 <body onload="load()">
69     <form id="form1" runat="server">
70     <div>
71         <label>姓名:<input type="text" id="txtname" name="name" /></label><br />
72         <label>年龄:<input type="text" id="txtage" name="age" /></label><br />
73         出生:<select name="year" id="Year" 
74                  onchange="setDays(this,form1.Month,form1.Day)"></select>
75              <label></label>
76              <select name="month" id="Month" 
77                  onchange="setDays(form1.Year,this,form1.Day)" ></select>
78              <label></label> 
79              <select name="day" id="Day"></select>
80              <label></label><br />
81         性别:
82         <label><input type="radio" id="radsex1" name="sex" value="男" checked="checked"/></label>
83         <label><input type="radio" id="radsex2" name="sex" value="女"/></label><br />
84         爱好:<br />
85         <label><input type="checkbox" id="checkbox1" name="zuqiu" value="足球" />足球</label>
86         <label><input type="checkbox" id="checkbox2" name="paiqiu" value="排球" />排球</label>
87         <label><input type="checkbox" id="checkbox3" name="lanqiu" value="篮球" />篮球</label>
88         <label><input type="checkbox" id="checkbox4" name="bangqiu" value="棒球" />棒球</label><br />
89         <asp:Button ID="submit" Text="提交" runat="server" onclick="submit_Click" />
90         </div>
91     </form>
92 </body>
93 </html>
后台代码
 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 namespace WebApplicationTestForm
 9 {
10     public partial class index : System.Web.UI.Page
11     {
12         protected void Page_Load(object sender, EventArgs e)
13         {
14 
15         }
16 
17         protected void submit_Click(object sender, EventArgs e)
18         {
19             //Request["表单中元素的name至"].ToString;
20             string name ="姓名:"+ Request["name"].ToString();
21             string age ="年龄:" + Request["age"].ToString();
22             string birth = "出生日期:" + Request["year"].ToString() +
23                 "" + Request["month"].ToString() + "" + Request["day"].ToString();
24             string sex = "性别:" + Request["sex"].ToString();
25             string hobby = "爱好:" + Request["zuqiu"] + " " + Request["paiqiu"] + " " + Request["lanqiu"] + " " + Request["bangqiu"];
26             Response.Write("<script>alert('"+name+"\\n"+age+"\\n"+birth+"\\n"+sex+"\\n"+hobby+"');</script>");
27         }
28     }
29 
30     
31 }

转载于:https://www.cnblogs.com/DengYuWei/archive/2012/11/25/2787641.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值