ASP.NET 动态加载控件 JavaScript 篇
今天 想DEMO 一下，使用 动态控件 来增加 JavaScript 的功能
平常 在做 互动网页时，JavaScript 跟 ASP.NET 的互动 一定会 很频繁
今天这个范例 一方面demo 如何动态增加 JavaScript 在我门的控件上，
一方面也示范 JavaScript 如何 跟 ASP.NET 互动中一个很基本的方式，下面 这范例 还蛮有趣的，
因为不想写太多程式码，但是要做互动效果一般都是要两个ASP.NET 程式 比较好，结果让我想了一下才搞出来。
以下程式延续 上一篇，加上 JavaScript 来另开一个网页呼叫自己本身并传递 input 控件所输入的值，在重新设定 button 所会触发的 JavaScript
让其可以回传 input 的值到原网页上。
简言之，本程式一人释二角，有递回使用的味道在里面了，该程式也诠释出一部份动态控件的精神和优势，也就是互动控制
，藉由外部使用者的设定、输入等，来动态设定网页的呈现与控制方式，这个在很多程式语言、网页程式中都可看到类似精神，但 ASP.NET 最吸引人的地方，
就是 可以用物件化的方式，来制作网页。
下面程式只是作一简单的示范，其中精神读者可以仔细了解祥加运用
JS_Demo.aspx
1 <%@ Page Language="C#" AutoEventWireup="True" %>
2
3 <script language="C#" runat=server>
4 public void Page_Init(object sender, System.EventArgs e)
5 {
6 string val = Request.QueryString.Get("val");
7
8 Label message = new Label();
9 message.ID = "请输入你要说的话";
10 sourceTag.Controls.Add(message);
11
12 TextBox input = new TextBox();
13 input.ID = "input";
14 input.Text = val;
15 sourceTag.Controls.Add(input);
16
17 Button btnSayHello = new Button();
18 btnSayHello.ID = "btnSayHello";
19 btnSayHello.Text = "SayHello";
20 if(val != "" && val != null)
21 btnSayHello.Attributes.Add("OnClick", "return SetValue(" + input.ClientID + ");");
22 else
23 btnSayHello.Attributes.Add("OnClick", "return GetOtherValue(" + input.ClientID + ");");
24 sourceTag.Controls.Add(btnSayHello);
25 }
26
27 void SubmitBtn_Click(Object sender, EventArgs e)
28 {
29 TextBox input = (TextBox)sourceTag.FindControl("input");
30 LiteralControl lc;
31 lc = new LiteralControl("<H3>" + input.Text + "</H3>");
32 sourceTag.Controls.Add(lc);
33 }
34
35 </script>
36 <html>
37 <head>
38 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
39 </head>
40 <body>
41 <script type = "text/javascript">
42 var myInput;
43 function GetOtherValue(ctrl) {
44 myInput = ctrl;
45 var hWnd = window.open("JS_Demo.aspx?val=" + ctrl.value, "_blank" );
46 if ((document.window != null) && (!hWnd.opener))
47 hWnd.opener = document.window;
48 return false;
49 }
50 function SetValue(ctrl) {
51 window.opener.myInput.value = "Re: " + ctrl.value;
52 return false;
53 }
54 </script>
55 <form runat="server">
56
57 <h3>动态增加控件 JavaScript 篇</h3>
58
59 <p/>
60 <div id="sourceTag" runat="server">
61 </div>
62 <p/>
63 一条小龙
64 </form>
65 </body>
66 </html>
