[总结] 关于HTMLControl 和 WebControl 以及 HTMLControl 作为服务器端控件的使用(textbox)
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Summary.aspx.cs" Inherits="Summary" %>
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 <script language="javascript" type="text/javascript">
9 // <!CDATA[
10
11 //从这个例子，我们也可以看到，在服务器端控件上如果存在了客户端Js事件的话，那么先是执行客户端的Js事件，然后执行的是服务器端事件。
12
13 function CheckClientClick()
14 {
15 //服务器端控件要在客户端得到其中的输入值，好象只有使用document.getElementByID();
16 alert(document.getElementById("txtBox").value);
17 alert(document.getElementById('<%=txtBox.ClientID%>').value);
18 }
19
20 function CheckClick()
21 {
22 alert(form1.txtBox2.value);//这里要得到从HTML控件中转化过来的服务器端控件中的值，使用的是它的ID，而不是name。
23 alert(document.getElementById("txtBox2").value);//通过ID属性获得其中的值，应该没有什么好说的了。
24 alert(document.getElementById('<%=txtBox2.ClientID%>').value);//也可以使用服务器端控件的ClientID属性来获得这个值。
25 }
26
27 function btnConfrim3_onclick()
28 {
29 alert(form1.tBox3.value);//HTML控件在客户端可以通过控件的name属性来获得其中的值。
30 alert(document.getElementById("txtBox3").value);//当然也可以通过他们的ID属性来获得值。
31 }
32
33 function ddlRegionChange()
34 {
35 alert(document.getElementById("ddlRegion").value);
36 alert(document.getElementById('<%=ddlRegion.ClientID%>').value);
37 }
38
39 function selPlaceChange()
40 {
41 alert(document.getElementById("selPlace").value);
42 alert(document.getElementById('<%=selPlace.ClientID%>').value);
43 }
44
45 function selCityChange()
46 {
47 alert(form1.city.value);
48 alert(document.getElementById("selCity").value);
49 }
50
51 // ]]>
52 </script>
53 </head>
54 <body>
55 <form id="form1" runat="server">
56 <div>
57 <asp:TextBox ID="txtBox" runat="server"></asp:TextBox>
58 <asp:Button ID="btnConfirm" runat="server" Text=" 递 交 " OnClientClick="CheckClientClick();" OnClick="btnConfirm_Click" /><br />
59 <input id="txtBox2" type="text" runat="server" name="tBox2"/>
60 <input id="btnConfirm2" type="button" value=" 递 交 " runat="server" onclick="CheckClick();" onserverclick="btnConfirm2_ServerClick" /><br />
61 <input id="txtBox3" type="text" name="tBox3" />
62 <input id="btnConfrim3" type="button" value=" 递 交 " onclick="return btnConfrim3_onclick()" />
63 <br />
64 <asp:DropDownList ID="ddlRegion" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlRegion_SelectedIndexChanged" onchange="ddlRegionChange();">
65 </asp:DropDownList>
66 <br />
67 <select id="selPlace" runat="server" onchange="selPlaceChange();" onserverchange="selPlace_ServerChange">
68 <option selected="selected"></option>
69 </select>
70 <br />
71 <select id="selCity" onchange="selCityChange();" name="city">
72 <%=ddlCity%>
73 </select>
74 </div>
75 </form>
76 </body>
77
78 </html>
79
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 <script language="javascript" type="text/javascript">
9 // <!CDATA[
10
11 //从这个例子，我们也可以看到，在服务器端控件上如果存在了客户端Js事件的话，那么先是执行客户端的Js事件，然后执行的是服务器端事件。
12
13 function CheckClientClick()
14 {
15 //服务器端控件要在客户端得到其中的输入值，好象只有使用document.getElementByID();
16 alert(document.getElementById("txtBox").value);
17 alert(document.getElementById('<%=txtBox.ClientID%>').value);
18 }
19
20 function CheckClick()
21 {
22 alert(form1.txtBox2.value);//这里要得到从HTML控件中转化过来的服务器端控件中的值，使用的是它的ID，而不是name。
23 alert(document.getElementById("txtBox2").value);//通过ID属性获得其中的值，应该没有什么好说的了。
24 alert(document.getElementById('<%=txtBox2.ClientID%>').value);//也可以使用服务器端控件的ClientID属性来获得这个值。
25 }
26
27 function btnConfrim3_onclick()
28 {
29 alert(form1.tBox3.value);//HTML控件在客户端可以通过控件的name属性来获得其中的值。
30 alert(document.getElementById("txtBox3").value);//当然也可以通过他们的ID属性来获得值。
31 }
32
33 function ddlRegionChange()
34 {
35 alert(document.getElementById("ddlRegion").value);
36 alert(document.getElementById('<%=ddlRegion.ClientID%>').value);
37 }
38
39 function selPlaceChange()
40 {
41 alert(document.getElementById("selPlace").value);
42 alert(document.getElementById('<%=selPlace.ClientID%>').value);
43 }
44
45 function selCityChange()
46 {
47 alert(form1.city.value);
48 alert(document.getElementById("selCity").value);
49 }
50
51 // ]]>
52 </script>
53 </head>
54 <body>
55 <form id="form1" runat="server">
56 <div>
57 <asp:TextBox ID="txtBox" runat="server"></asp:TextBox>
58 <asp:Button ID="btnConfirm" runat="server" Text=" 递 交 " OnClientClick="CheckClientClick();" OnClick="btnConfirm_Click" /><br />
59 <input id="txtBox2" type="text" runat="server" name="tBox2"/>
60 <input id="btnConfirm2" type="button" value=" 递 交 " runat="server" onclick="CheckClick();" onserverclick="btnConfirm2_ServerClick" /><br />
61 <input id="txtBox3" type="text" name="tBox3" />
62 <input id="btnConfrim3" type="button" value=" 递 交 " onclick="return btnConfrim3_onclick()" />
63 <br />
64 <asp:DropDownList ID="ddlRegion" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlRegion_SelectedIndexChanged" onchange="ddlRegionChange();">
65 </asp:DropDownList>
66 <br />
67 <select id="selPlace" runat="server" onchange="selPlaceChange();" onserverchange="selPlace_ServerChange">
68 <option selected="selected"></option>
69 </select>
70 <br />
71 <select id="selCity" onchange="selCityChange();" name="city">
72 <%=ddlCity%>
73 </select>
74 </div>
75 </form>
76 </body>
77
78 </html>
79
1 using System;
2 using System.Data;
3 using System.Configuration;
4 using System.Collections;
5 using System.Web;
6 using System.Web.Security;
7 using System.Web.UI;
8 using System.Web.UI.WebControls;
9 using System.Web.UI.WebControls.WebParts;
10 using System.Web.UI.HtmlControls;
11
12 public partial class Summary : System.Web.UI.Page
13 {
14 protected string ddlCity = "";
15
16 protected void Page_Load(object sender, EventArgs e)
17 {
18 if (Page.IsPostBack)//如果是回传过来的，就是按下WebControl的Button的。
19 Response.Write(Request.Form["txtBox3"]);
20
21
22 //绑定服务器端DropDownList
23 if (!Page.IsPostBack)//如果第一次访问
24 BindWebControlDdl();
25
26 if (!Page.IsPostBack)
27 BindTTMLWebControlDdl();
28
29 //对于客户端的控件，在后台文件中好象没有什么好的绑定方法，如果非要在后台设置也是可以的。
30 //就是定义一个protected 或者 public 权限的变量 ，然后在前台文件中调用
31 if (!Page.IsPostBack)//还有这个事件也比较奇怪，当我们回传的时候，他没有被赋值，但是其他两个还是被赋值了。理论上来说，这也好象是对的，但是好象有点比较难理解。
32 BindHTMLControlDdl();
33 }
34 protected void btnConfirm_Click(object sender, EventArgs e)
35 {
36 //作为服务器端控件，我们是用.Text来获得其中的值。
37 Response.Write(txtBox.Text);
38 }
39 protected void btnConfirm2_ServerClick(object sender, EventArgs e)
40 {
41 //而作为由Html控件转化过来的服务器断控件，我们是使用.Value来获得其中的值。在产生的事件上也有所不同，是onserverclick事件。
42 Response.Write(txtBox2.Value);
43 }
44
45 public void BindWebControlDdl()
46 {
47 ddlRegion.Items.Clear();
48 ListItem li = new ListItem("江苏", "JS");
49 ddlRegion.Items.Insert(0,li);
50 li = new ListItem("上海", "SH");
51 ddlRegion.Items.Insert(1,li);
52 li = new ListItem("请选择", "");
53 ddlRegion.Items.Insert(0, li);
54 }
55
56
57 public void BindTTMLWebControlDdl()
58 {
59 selPlace.Items.Clear();//如果不加这行，会在下拉框最下面多出一个 ，如果我们在创建这个的时候多多了个
60 //一般由HtmlControl转化到WebControl 会有<option selected="selected"></option>，
61 //如果把这行去掉后也可以不调用Clear()方法，但是最好还是调用下
62 ListItem li = new ListItem("南通", "NT");
63 selPlace.Items.Insert(0, li);
64 li = new ListItem("苏州", "SZ");
65 selPlace.Items.Insert(1, li);
66 li = new ListItem("请选择", "");
67 selPlace.Items.Insert(0, li);
68 selPlace.SelectedIndex = 0;
69 }
70
71 public void BindHTMLControlDdl()
72 {
73 ddlCity = "<option value=\"QD\" selected=\"true\">启东</option>";
74 ddlCity += "<option value=\"HM\">海门</option>";
75 }
76 protected void ddlRegion_SelectedIndexChanged(object sender, EventArgs e)
77 {
78 //要使下面的语句输出，那么必须使用 AutoPostBack="True"
79 Response.Write(ddlRegion.SelectedItem.Text);
80 }
81 protected void selPlace_ServerChange(object sender, EventArgs e)
82 {
83 //对于有HTMLControl转化过来的WebControl 这个ServerChange事件好象没有办法触发的？？
84 //如果不能触发的话，那这个有什么意义呢？？
85 //调试了下，结果发现这个事件还是可以触发的，但是这个事件好象比较奇怪，当我调用上面ddlRegion_SelectedIndexChanged这个事件后
86 //如果这个selPlace的选择项改变的话，那么这个事件就会被触发，而如果这个selPlace的选择项没有改变的话，这个事件就不会被调用。
87 //那从这里我们可以看到我们可以使用ddlRegion_SelectedIndexChanged 来触发这个事件，两个事件是同步的。
88 //对于由HTMLControl转化过来的WebControl 没有AutoPostBack 事件
89 Response.Write(selPlace.Value);
90 }
91 }
92
2 using System.Data;
3 using System.Configuration;
4 using System.Collections;
5 using System.Web;
6 using System.Web.Security;
7 using System.Web.UI;
8 using System.Web.UI.WebControls;
9 using System.Web.UI.WebControls.WebParts;
10 using System.Web.UI.HtmlControls;
11
12 public partial class Summary : System.Web.UI.Page
13 {
14 protected string ddlCity = "";
15
16 protected void Page_Load(object sender, EventArgs e)
17 {
18 if (Page.IsPostBack)//如果是回传过来的，就是按下WebControl的Button的。
19 Response.Write(Request.Form["txtBox3"]);
20
21
22 //绑定服务器端DropDownList
23 if (!Page.IsPostBack)//如果第一次访问
24 BindWebControlDdl();
25
26 if (!Page.IsPostBack)
27 BindTTMLWebControlDdl();
28
29 //对于客户端的控件，在后台文件中好象没有什么好的绑定方法，如果非要在后台设置也是可以的。
30 //就是定义一个protected 或者 public 权限的变量 ，然后在前台文件中调用
31 if (!Page.IsPostBack)//还有这个事件也比较奇怪，当我们回传的时候，他没有被赋值，但是其他两个还是被赋值了。理论上来说，这也好象是对的，但是好象有点比较难理解。
32 BindHTMLControlDdl();
33 }
34 protected void btnConfirm_Click(object sender, EventArgs e)
35 {
36 //作为服务器端控件，我们是用.Text来获得其中的值。
37 Response.Write(txtBox.Text);
38 }
39 protected void btnConfirm2_ServerClick(object sender, EventArgs e)
40 {
41 //而作为由Html控件转化过来的服务器断控件，我们是使用.Value来获得其中的值。在产生的事件上也有所不同，是onserverclick事件。
42 Response.Write(txtBox2.Value);
43 }
44
45 public void BindWebControlDdl()
46 {
47 ddlRegion.Items.Clear();
48 ListItem li = new ListItem("江苏", "JS");
49 ddlRegion.Items.Insert(0,li);
50 li = new ListItem("上海", "SH");
51 ddlRegion.Items.Insert(1,li);
52 li = new ListItem("请选择", "");
53 ddlRegion.Items.Insert(0, li);
54 }
55
56
57 public void BindTTMLWebControlDdl()
58 {
59 selPlace.Items.Clear();//如果不加这行，会在下拉框最下面多出一个 ，如果我们在创建这个的时候多多了个
60 //一般由HtmlControl转化到WebControl 会有<option selected="selected"></option>，
61 //如果把这行去掉后也可以不调用Clear()方法，但是最好还是调用下
62 ListItem li = new ListItem("南通", "NT");
63 selPlace.Items.Insert(0, li);
64 li = new ListItem("苏州", "SZ");
65 selPlace.Items.Insert(1, li);
66 li = new ListItem("请选择", "");
67 selPlace.Items.Insert(0, li);
68 selPlace.SelectedIndex = 0;
69 }
70
71 public void BindHTMLControlDdl()
72 {
73 ddlCity = "<option value=\"QD\" selected=\"true\">启东</option>";
74 ddlCity += "<option value=\"HM\">海门</option>";
75 }
76 protected void ddlRegion_SelectedIndexChanged(object sender, EventArgs e)
77 {
78 //要使下面的语句输出，那么必须使用 AutoPostBack="True"
79 Response.Write(ddlRegion.SelectedItem.Text);
80 }
81 protected void selPlace_ServerChange(object sender, EventArgs e)
82 {
83 //对于有HTMLControl转化过来的WebControl 这个ServerChange事件好象没有办法触发的？？
84 //如果不能触发的话，那这个有什么意义呢？？
85 //调试了下，结果发现这个事件还是可以触发的，但是这个事件好象比较奇怪，当我调用上面ddlRegion_SelectedIndexChanged这个事件后
86 //如果这个selPlace的选择项改变的话，那么这个事件就会被触发，而如果这个selPlace的选择项没有改变的话，这个事件就不会被调用。
87 //那从这里我们可以看到我们可以使用ddlRegion_SelectedIndexChanged 来触发这个事件，两个事件是同步的。
88 //对于由HTMLControl转化过来的WebControl 没有AutoPostBack 事件
89 Response.Write(selPlace.Value);
90 }
91 }
92
浙公网安备 33010602011771号