在進行ASP.NET開發時,我們需要用越來越多的Ajax技術,以豐富使用者互動介面,不斷提高使用者體驗。
第一種方式是我們親自手動編寫Javascript代碼實現,關於這個方式我前面有一篇博文 《跟我一起創 建一個簡單的javascript ajax對象》介紹過了。具體實現在此不再贅述。那麼使用這樣的方式的一大好處是 使用靈活,便於我們自己把握整個非同步通訊的過程,但是要求開發人員具備較好的Javascript基礎,另外一點 就是要建立編寫新的Handler.ashx檔案或者一個ASPX檔案。
微軟向來都是喜歡降低開發入門門檻,因 而在.NET2.0之後就發布了他們的ASP.NET AJAX架構,該架構使得我們可以像開發webform一樣簡單的拖放一些 控制項就能實現AJAX,下面引出一個例子說明。ASPX頁面代碼如下
<form id="form1" runat="server"><div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <p> <asp:Label ID="lblNonAjax" runat="server" Text="No Ajax"></asp:Label> </p> <hr /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="lblText" runat="server"></asp:Label> <p> <asp:Button ID="btnAjax" runat="server" Text="Ajax Event" onclick="btnAjax_Click"/> <asp:Button ID="btnNonAjax" runat="server" Text="Post Black Event" onclick="btnNonAjax_Click"/> </p> </ContentTemplate> <Triggers> <asp:PostBackTrigger ControlID="btnNonAjax"/> </Triggers> </asp:UpdatePanel> </div></form>
雖然我們對ScriptManager控制項未做任何改動,該控制項也不顯示任何資訊,但是我們 要使用ajax架構就必須將該控制項拖放到其他ajax控制項之前。然後我們用得最多的莫過於UpdatePanel控制項了, 該控制項也確實非常令人振奮。我們可以在該控制項裡面指定那些事件需要局部重新整理與整頁重新整理,預設是非同步局 部重新整理。如果要想實現整頁重新整理提交,像平時不用ajax控制項的效果,只需要在<Triggers>標籤裡面指定 <asp:PostBackTrigger ControlID="btnNonAjax" />,ControlID就是不需要非同步提交的控 件,如此指定後該控制項的任何事件都是整頁重新整理提交。
接下來看cs代碼如下
public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (IsPostBack) { //因為以下控制項不在Update內,所以觸發Ajax事件時無法對其進行更新 lblNonAjax.Text = "觸發了回傳事件!"; } } protected void btnAjax_Click(object sender, EventArgs e) { this.lblText.Text = "這是一個Ajax事件的觸發"; //Response.Write("<script>alert('這是一個Ajax事件的觸發')</script>"); //觸發AJAX事件,不能使用該方式或其他方式向頁面輸出,除非使用下面的方式 //觸發的是UpdatePanel裡的控制項的事件,輸出指令碼必須使用以下方式 ScriptManager.RegisterStartupScript(this.UpdatePanel1, this.GetType(), "ajaxScript", "alert('這是一個Ajax事件的觸發');", true); } protected void btnNonAjax_Click(object sender, EventArgs e) { this.lblText.Text = "這是一個頁面回傳重新整理事件的觸發"; Response.Write("<script>alert('這是一個頁面回傳重新整理事件的觸發')</script>"); } }