建立ASP.NET Ajax應用程式

最近這一年Ajax可以說是紅遍半邊天, 想為ASP.NET加上Ajax的功能嗎？只要安裝好ASP.NET Ajax Extensions和新增ASP.NET Ajax的Web網站, 我們就可以建立ASP.NET Ajax應用程式。

最簡單的ASP.NET Ajax範例程式

我們要建立一個非常簡單的範例程式, 當使用者按下按鈕, 程式只會更新Label控制項的部分網頁內容來顯示日期/時間資料, 而不會重新載入整頁的網頁內容。

請啟動VWD選取Web Form範本建立新專案。

新增ScriptManager控制項

在ASP.NET程式建立Ajax功能的第一步是新增ScriptManager控制項, 其步驟如下所示：

1. 請切換至【設計】標籤後, 在 「工具箱」 視窗的【AJAX Extensions】區段, 拖拉ScriptManager控制項至表單編輯區域, 如下圖所示：

上述圖例可以看到新增的ScriptManager控制項, 此控制項在執行時並不會顯示, 它是在幕後管理所有Ajax功能的執行。

新增UpdatePanel控制項

因為我們準備使用表格來編排控制項, 接下來就是將UpdatePanel控制項新增至表格的儲存格, 其步驟如下所示：

2. 在網頁新增2列2欄的表格, 在 「工具箱」 視窗的【HTML】區段, 請拖拉Table控制項來建立表格, 如下圖所示：

3. 直接拖拉框線可以調整儲存格尺寸, 在表格上執行右鍵快顯功能表的指令, 即可插入或刪除表格欄或列。

4. 請拖拉UpdatePanel控制項至表格第1列的第2的儲存格, 如下圖所示：

請切換至【原始檔】標籤, 可以看到UpdatePanel控制項的標籤, 如下所示：

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> </asp:UpdatePanel>

新增控制項至UpdatePanel控制項

現在, 我們就可以將控制項拖拉至UpdatePanel控制項, 換句話說, 這些就是需要部分更新的網頁內容, 其步驟如下所示：

5. 在 「工具箱」 的【標準】區段, 請拖拉Label控制項至UpdatePanel控制項中, 如下圖所示：

6. 然後再拖拉Button控制項至UpdatePanel控制項中的Label控制項下方。

請切換至【原始檔】標籤, 可以看到現在的UpdatePanel控制項標籤, 如下所示：

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="Label1" runat="server" BackColor="CornflowerBlue" ForeColor="White" Text="Label" Width="166px"></asp:Label> <asp:Button ID="Button1" runat="server" Text="Ajax更新時間" OnClick="Button1_Click" /> </ContentTemplate></asp:UpdatePanel>

上述Label和Button控制項是置於ContentTemplate控制項, 它是UpdatePanel控制項的子標籤。

新增其他控制項

對於不需要部分更新的控制項, 我們也是新增至表格的儲存格, 其步驟如下所示：

7. 接著拖拉另一個Label控制項至表格第1列第1欄, 另一個Button控制項至第2列第2欄, 在更改控制項色彩、尺寸和標題文字後, 可以看到最後的Web表單, 如下圖所示：

8. 請切換至【原始檔】標籤, 新增兩個Button按鈕控制項的事件處理程序, 如下所示：

void Button2_Click(object sender, EventArgs e) { Label2.Text = DateTime.Now.ToString();}void Button1_Click(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString();}

9. 請儲存ASP.NET程式Ch20-4-1.aspx後, 執行 「檔案/在瀏覽器中檢視」 指令, 可以看到建立的網頁內容, 如下圖所示：

按【更新時間】鈕, 可以看到整個網頁都重新載入來顯示上方Label控制項的日期/時間資料。如果按【Ajax更新時間】鈕, 就只有更新上方Label控制項的部分網頁內容, 而沒有重新載入整個網頁, 這就是Ajax技術的顯示效果, 如下圖所示：

這樣就建立了一個簡單的ASP.NET Ajax程式了。