ASP.NET(九) -- WebForm AJAX简明教程

1
2
3
4
5
6
7
　<Scripts>

　　　　<asp:ScriptReference Path=""></asp:ScriptReference>

　　</Scripts>

1
2
3
4
5
6
　<Services>

　　　　<asp:ServiceReference Path=""></asp:ServiceReference>

　　<Services />

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
        //为什么要以这种方式调用Web Service的方法；
        function myButton1_onClick() {
            AjaxService.Greet(show);
        }

        function show(result) {
            alert(result);
        }
    </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div>
        <%--注册服务器端的ScriptManager控件；--%>
        <asp:ScriptManager ID="myScriptManager" runat="server" >
            <Services>
                <asp:ServiceReference Path="~/AjaxService.asmx" />
            </Services>
        </asp:ScriptManager>
    </div>

   <%-- 调用Web Service;--%>
    <div class="WebServiceDemo">
        <p>This is a example about the Web Service!</p>
        <input type="button" name="myButton1" value="获取Web服务" onclick="myButton1_onClick();"/>
    </div><br /><br /><br />

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
 [System.Web.Script.Services.ScriptService]
public class AjaxService : System.Web.Services.WebService {

    public AjaxService () {
    }

    [WebMethod]
    public string Greet()
    {
        return "Hello Ajax!";
    } 
}

1
2
3
4
5
6
7
8
　　<ContentTemplate>

　　　　在这里添加需要局部更新的ASP.NET服务器端控件；

　　　　注：如果希望UpdateProgress能够正常显示，该UpdatePanel绑定的触发器控件也要在这里定义！

　　</ContentTemplate>

1
2
3
4
5
6
7
　　<ProgressTemplate>

　　　　在这里添加显示状态信息的ASP.NET控件或者文本；

　　</ProgressTemplate>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="UpdatePanelandUpdateProgressDemo">
        <p>This is a example about the UpdatePanel and UpdateProgress!</p>
        <div>
           初始时间：<asp:Label ID="Label1" runat="server"></asp:Label><br />
        </div>

        <asp:UpdatePanel ID="myUpdatePanel" runat="server" UpdateMode="Conditional">
            <%--把需要局部跟新的控件内容添加到该区域；--%>
            <ContentTemplate>
                当前时间：<asp:Label ID="Label2" runat="server"></asp:Label><br />
                <%--当<asp:Button />控件在<ContentTemplate />外部时，<asp:UpdateProgress />控件无法正常显示，
                但是 <asp:UpdatePanel />可以正常使用；--%>
                <asp:Button ID="myButton2" Text="使用UpdatePanel局部更新页面" runat="server" OnClick="myButton2_OnClick"/>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="myButton2" EventName="Click"/>
            </Triggers>
        </asp:UpdatePanel>

         <asp:UpdateProgress ID="myUpdateProgress" AssociatedUpdatePanelID="myUpdatePanel" runat="server">
            <ProgressTemplate>
                <asp:Label ID="Label3" Text="正在更新数据，请等待……" runat="server"></asp:Label>
            </ProgressTemplate>
        </asp:UpdateProgress>
    </div><br /><br />

1
2
3
4
5
6
7
8
9
10
11
12
13
14
protected void Page_Load(object sender, EventArgs e)
    {
        Label1.Text = DateTime.Now.ToString();
        Label2.Text = DateTime.Now.ToString();
    }

    public void myButton2_OnClick(object sender, EventArgs e)
    {
        Label2.Text = DateTime.Now.ToString();
        System.Threading.Thread.Sleep(2000);
        //无法以下面的方式添加HTML标签；
        //Response.Write("<p>This is a example about the UpdatePanel!</p>");
    }

1
2
3
4
5
6
7
8
9
10
11
<div class="TimerDemo">
        <p>This is a example about the Timer!</p>
        <%--当添加两个或两个以上的UpdatePanel时通过设置UpdateMode属性来阻止UpdatePanel同时全部刷新；--%>
        <asp:UpdatePanel ID="myUpdatePanel2" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Image ID="myImage" runat="server" AlternateText="myImage" ImageAlign="Left" ImageUrl="images/image1.jpg"/>
                <asp:Timer ID="myTimer" runat="server" Interval="2000" OnTick="myTimer_OnTick"></asp:Timer>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

1
2
3
4
5
6
7
public void myTimer_OnTick(object sender, EventArgs e)
    {
        Random r = new Random();
        int i = r.Next(5) + 1;
        myImage.ImageUrl = "images/image" + i + ".jpg";
    }