AJAX筆記之一: 構建第一個AJAX網頁

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

首先準備環境, 從微軟下載ASP.NET AJAX 1.0 Extentions(網址:http://asp.net/ajax/downloads/default.aspx) , 當然,首先應該安裝VS2005, 在2003 上是否可行, 我不知道, 因為沒有試過.

安裝完成以後, 開啟VS2005, 建立一個網站, 會看到比原來多出來一項"ASP.NET AJAX-Enabled web site", 就選這一項, 確定, 會看到產生的default.aspx, 這個預設頁面的最上方, 有一個不可見控制項: ScriptManager, 這是每個頁面都要包含的一個控制項, 所以預設頁面直接把它添加進來了.

開啟工具箱, 會看到下面多了一個AJAX Extentions 選項卡, 裡面就是AJAX 專用控制項啦, 拖一個UpdatePanel 到頁面上, 然後往UpdatePanel 裡面拖一個按鈕和一個Label, 在按鈕的點擊事件裡, 寫 Label1.Text += "hi"; 大功告成, 可以編譯運行了, 先運行一下吧.

編譯運行, 不停地點擊按鈕, 會發現Label 上的hi 越來越多, 但是整個頁面完全沒有重新整理的痕迹, cool 吧. 呵呵 .

現在來看這個小程式: UpdatePanel 是最基本的控制項, 它是重新整理的單位, AJAX 網頁之所以可以做到不回傳, 就是因為每次只重新整理一個Updatepanel, 而它的重新整理是看不出來的, 當然, 這是藉助了DHTML 來實現的.

現在我們對這個小程式做一點修改.

把原來button1 的點擊事件函數刪掉, 並把button1 從updatepanel1 裡挪出來, 放在頁面頂端, 然後添加另一個button, 並在頁面上添加另外一個UpdatePanel, 並且裡面也label, (分別命名為Updatepanel2, button2, label2 , ) 然後在頁面的Load 函數裡寫上:
label1.text+="hi";
label2.text+="hi";這樣, default.aspx.cs 裡現在只有一個函數就是load 函數,

然後開始處理aspx 頁面: 把updatePanel1 和updatePanel2. 的ChildrenAsTriggers 屬性設定為false, UpdateMode 屬性設定為Conditional, 然後切換到XHTML 程式碼頁面, 在ContentTemplate 節點上面, 增加Triggers 節點, 例如, 我的updatePanel1 的代碼如下:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
                </Triggers>

                <ContentTemplate>
                    <asp:Label ID="Label1" runat="server"></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>

當然啦, 也可以直接在"設計" 視圖下編輯它的Triggers 屬性, 也是同樣的效果.
updatePanel2也如法炮製. 然後, 重新編譯運行: 點擊button1 3次, label1 上出現四個"hi", label2 仍然只有一個(第一次載入時寫上去的), 然後點擊一下button2, label2馬上變成五個hi了.

這兩個button 放在updatePanel 之外, 如果沒有"<Triggers>" 節, 點擊它們一定會引起全頁回傳, 但是加了<Triggers> 節以後, 點擊它們時, 就是非同步回傳了, 而且有趣的是, 由於實際上還是進行了回傳, 所以Page_Load 函數仍然會執行, 只不過, 執行以後, 頁面不會即時重新整理. 當點擊button1 時, updatePanel1 會重新整理, 但是2 不會, 所以儘管實際上兩個label 同時加了一個hi , 但是只會看到label1 的變化. --------這就是為什麼要把UpdateMode 設定為Conditional, 如果是預設的Always, 則兩個label 會同時更新顯示.

UpdateMode 控制的是, updatePanel 何時回傳, 如果是always , 則任何引起回傳的事件都會使其自動更新, 如果是conditional, 則除非顯示地使其回傳 ,或整個頁面回傳, 否則它會keep 當前的狀態不動.

而ChildrenAsTriggers 屬性在這裡實際上沒起到作用, 當這個屬性被設定為true 時 , 其子控制項可以引起panel 的更新, 但是置為false, 則不會.

以下粘貼完整的範例程式碼:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="System.Web.Extensions, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <br />
                    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
                    <asp:Button ID="Button2" runat="server" OnClick="Button1_Click" Text="Button" /><br />
        <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
                </Triggers>

                <ContentTemplate>
                    <asp:Label ID="Label1" runat="server"></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
                </Triggers>
                <ContentTemplate>
                     <br />
                    <asp:Label ID="Label2" runat="server"></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

protected void Page_Load(object sender, EventArgs e)
    {
        Label1.Text += "hi";
        Label2.Text += "hi";
    }

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More