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 }

posted @ 2012-11-25 20:24 0DENG0 阅读(246) 评论(0) 收藏举报

刷新页面返回顶部

Deng

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

公告