ASP.NET 2.0 正式版中无刷新页面的开发(示例代码的补充)

王朝asp·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

原文请见Leon.Zhou的:http://pfzhou.cnblogs.com/archive/2006/03/31/363342.html

下载了示例代码,并转换成VB了,AJAX功能测试成功。但遇到些小问题:

Demo1很正常。

Demo2按Leon原来的写法testAJAX.aspx.vb中Line 22不成功。所以我直接在IDE环境中,修改button3的OnClientClick属性,见testAJAX.asp的Line 52。测试成功。

Demo3按原来的加入客户端属性无法成功,在testAJAX.aspx.vb中第20行并未起作用。不知道是什么原因。 因此我只有加上一个button3来引发客户端事件。

这是个很好的例子,值得学习,详细原理说明请见作者的原文。测试时,请在您项目的web.config中添加<add name="NorthWind" connectionString="...相应的数据库连接串...">

testAJAX.aspx

1<%@ Page Language="VB" AutoEventWireup="false" CodeFile="testAJAX.aspx.vb" Inherits="testAJAX" %>

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 id="Head1" runat="server">

7 <title>ASP.NET 2.0 页面提交无刷新演示</title>

8 <script type="text/javascript" language ="javascript">

9 Function CallServer1()function CallServer1(inputcontrol, context)

10 {

11 context.innerHTML = "<IMG SRC='images/pie.gif' />Loading";

12 arg = 'ServerMethod1|' + inputcontrol.value;

13 <%= ClientScript.GetCallbackEventReference(Me, "arg", "ReceiveServerData1", "context")%>;

14 }

15

16 Function ReceiveServerData1()function ReceiveServerData1(result, context)

17 {

18 context.innerHTML = context.id + ":" + result;

19 }

20

21 Function CallServer2()function CallServer2(obj)

22 {

23 context = gridspan;

24 context.innerHTML = "<IMG SRC='images/pie.gif' />数据加载中";

25 arg = "ServerMethod2|" + obj.value;

26 <%= ClientScript.GetCallbackEventReference(Me, "arg", "ReceiveServerData2", "context")%>;

27 }

28

29 Function ReceiveServerData2()function ReceiveServerData2(result, context)

30 {

31 context.innerHTML = result;

32 }

33

34 </script>

35</head>

36<body>

37 <form id="form1" runat="server">

38 <div>

39 <h1>Demo1:html按钮提交数据</h1><br />

40 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

41 <input id="Button1" type="button" value="提交到Label1" onclick="CallServer1(TextBox1, Label1)"/>&nbsp;

42 <input id="Button2" type="button" value="提交到Label2" onclick="CallServer1(TextBox1, Label2)"/>

43 <br />

44 <asp:Label ID="Label1" runat="server" Text="Label1:"></asp:Label>

45 <br />

46 <asp:Label ID="Label2" runat="server" Text="Label2:"></asp:Label>

47 </div>

48 <hr />

49 <div>

50 <h1>Demo2:服务器按钮提交数据</h1><br />

51 <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

52 <asp:Button ID="Button3" runat="server" Text="Button" OnClientClick="CallServer1(TextBox2, Label3);return false;" /><br />

53 <asp:Label ID="Label3" runat="server" Text="Label3:"></asp:Label></div>

54 <hr />

55 <div>

56 <h1>Demo3:下拉列表框和gridview绑定数据</h1><br />

57 <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ connectionStrings:NorthWind %>"

58 SelectCommand="select distinct(country) from customers"></asp:SqlDataSource>

59 <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ connectionStrings:NorthWind %>"

60 SelectCommand="select customerid, companyname, country from customers where country=@Country">

61 <SelectParameters>

62 <asp:ControlParameter Name="Country" ControlID="DropDownList1" PropertyName="SelectedValue" />

63 </SelectParameters>

64 </asp:SqlDataSource>

65 <div>

66 <asp:DropDownList ID="DropDownList1" runat="server" Width="239px"

67 DataSourceID="SqlDataSource1" DataTextField="Country" DataValueField="Country">

68 </asp:DropDownList>

69 <input id="Button4" type="button" value="刷新" onclick="CallServer2(DropDownList1)"/>

70 </div>

71 <br />

72 <span id="gridspan">

73 <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource2" CellPadding="4" ForeColor="#333333" GridLines="None">

74 <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />

75 <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />

76 &

[1] [2] 下一页

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航