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 篇 www.2cto.com</h3>
58
59 <p/>
60 <div id="sourceTag" runat="server">
61 </div>
62 <p/>
63 一条小龙
64 </form>
65 </body>
66 </html>
~~~ 一条小龙(babydragoner) ~~~
相关新闻>>
- 发表评论
-
- 最新评论 更多>>
