2.3 與ASP.NET AJAX的初次接觸

安裝了ASP.NET AJAX后，Visual Studio 2005中的“New Web Site”向?qū)е袝嘁粋€ASP.NET AJAX的項(xiàng)目模板，如圖2-8所示。

請點(diǎn)擊“OK”按鈕來創(chuàng)建一個項(xiàng)目，由這個模板所創(chuàng)建出來的Web Site項(xiàng)目中包含了ASP.NET AJAX所需要的web.config配置設(shè)定，同時這個模板也會產(chǎn)生一個默認(rèn)網(wǎng)頁，里面放置了一個ScriptManager控件，每個欲使用ASP.NET AJAX技術(shù)的網(wǎng)頁里都需要放置這個控件，如圖2-9所示。

接著請?jiān)贒efault.aspx頁面中放置一個UpdatePanel控件，此控件外觀與Panel控件無異，設(shè)計(jì)師可于其內(nèi)放入大多數(shù)的ASP.NET控件，如圖2-10所示。

接著請?jiān)赨pdatePanel控件外面放入一個SqlDataSource控件，并配置其鏈接至Northwind數(shù)據(jù)庫的Customers數(shù)據(jù)表。完成后再放一個GridView控件至UpdatePanel控件外面，將其DataSourceID設(shè)為剛放入的SqlDataSoruce控件。此時請不要啟動GridView控件的分頁功能，讓這個GridView控件一次列出Customers數(shù)據(jù)表中的所有數(shù)據(jù)，如圖2-11所示。

接著再放一個Button控件至UpdatePanel里面，如圖2-12所示。

用鼠標(biāo)雙擊頁面上的Button控件來添加Click事件，并鍵入程序2-1的代碼。

程序2-1

    Samples\2\FirstAjax\Default.aspx.cs
    protected void Button1_Click(object sender, EventArgs e)
    {
        Button1.Text = DateTime.Now.ToString();
    }

接著再放一個Button控件至UpdatePanel控件外面，如圖2-13所示，同樣于Click事件鍵入程序2-2的代碼。

程序2-2

    Samples\2\FirstAjax\Default.aspx.cs
    protected void Button2_Click(object sender, EventArgs e)
    {
      Button2.Text = DateTime.Now.ToString();
    }

完成后運(yùn)行程序，請分別點(diǎn)擊兩個按鈕來觀察網(wǎng)頁的刷新狀態(tài)，你會發(fā)現(xiàn)放置于UpdatePanel控件外面的Button（由上數(shù)來第二個Button）被點(diǎn)擊時，網(wǎng)頁有非常明顯的重新刷新動作，但點(diǎn)擊UpdatePanel控件里面的Button時，感覺上網(wǎng)頁并沒有刷新，而是直接顯示現(xiàn)在的時間，如圖2-14所示。

在用戶點(diǎn)擊UpdatePanel控件里面的Button時，網(wǎng)頁會進(jìn)行一次Postback動作，不同于傳統(tǒng)ASP.NET網(wǎng)頁的Postback動作，UpdatePanel中控件的Postback動作稱為Async-Postback，也就是非同步的Postback。這種類型的Postback動作不會導(dǎo)致整個網(wǎng)頁刷新，而僅僅是刷新此控件所在的 UpdatePanel 控件及網(wǎng)頁上的所有將UpdateMode屬性設(shè)為Always的UpdatePanel控件內(nèi)的內(nèi)容，相較于傳統(tǒng)的刷新整個網(wǎng)頁的動作，Async-Postback的動作不容易被用戶察覺。對用戶而言，如果畫面上的這些UpdatePanel控件所涵蓋的區(qū)域較大時，只會察覺到這些區(qū)域內(nèi)的網(wǎng)頁似乎有種停滯感，而不是如以往般，整個網(wǎng)頁會變成全白然后再顯示。接著請回到設(shè)計(jì)頁面，再放入一個UpdatePanel控件，并將原本位于外面的SqlDataSoruce及GridView控件移入此UpdatePanel控件中，重新配置SqlDataSource成可編輯的DataSource，接著點(diǎn)擊“Tasks”窗口中的“Refresh Schema”連結(jié)，這會重設(shè)GridView控件所顯示的字段，如圖2-15所示。

接著請點(diǎn)擊GridView控件，啟用其分頁功能后運(yùn)行程序，在點(diǎn)擊“Edit”連結(jié)后，你應(yīng)會察覺到每次點(diǎn)擊“Edit”連結(jié)時，似乎會稍微停滯一段時間才會顯示，不過并沒有原本的閃動情況發(fā)生，如圖2-16所示。

這個現(xiàn)象告訴我們，UpdatePanel控件所涵蓋區(qū)域在刷新時，不會如傳統(tǒng)網(wǎng)頁般發(fā)生閃動情況，而是顯現(xiàn)成略停滯狀態(tài)。看到這里，細(xì)心的讀者會察覺到這個行為模式有著一個可能會發(fā)生異常的情況，那就是當(dāng)Async-Postback動作發(fā)生時，若后端需要較多時間來處理這個動作，此時這些區(qū)域?qū)w現(xiàn)停滯狀態(tài)，如果用戶于此期間再點(diǎn)擊另一筆數(shù)據(jù)的編輯鏈接，就會有另一個Async-Postback動作再次送后端，那兩個Async-Postback的動作先后順序究竟是怎樣的呢？想知道答案的方法很簡單，請向擁有GridView控件的UpdatePanel中再放入一個Button控件，將Text屬性設(shè)為“Edit 4”，在其Click事件鍵入程序2-3的代碼即可。

程序2-3

    Samples\SecondAjax\Default.aspx.cs
    protected void Button3_Click(object sender, EventArgs e)
    {
            GridView1.EditIndex = 4;
            GridView1.DataBind();
    }

這段程序代碼的意思是，當(dāng)用戶點(diǎn)擊此Button后，令GridView控件進(jìn)入編輯第四行的狀態(tài)。請?jiān)儆贕ridView控件的RowEditing事件中鍵入程序2-4的代碼。

程序2-4

    Samples\SecondAjax\Default.aspx.cs
    protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
    {
            System.Threading.Thread.Sleep(5000);
    }

程序2-4 代碼的意思是，當(dāng)用戶點(diǎn)擊某行的Edit連結(jié)時，進(jìn)入編輯狀態(tài)前等待5 秒。請?zhí)貏e注意一點(diǎn)，RowEditing事件不會觸發(fā)于用程序來指定EditIndex時，因此Button3_Click函數(shù)中的程序代碼是不會觸發(fā)RowEditing事件的。修改完成后再次運(yùn)行程序，先點(diǎn)擊第一行的Edit聯(lián)結(jié)，此時網(wǎng)頁會因Async-Postback動作的關(guān)系，出現(xiàn)停滯狀態(tài)，請立刻點(diǎn)擊上方的Edit 4按鈕，此時會發(fā)現(xiàn)第四行立即進(jìn)入編輯狀態(tài)，但是等待了10秒后，早先點(diǎn)擊Edit連結(jié)的第一行依舊沒有進(jìn)入編輯狀態(tài)。這個現(xiàn)象已經(jīng)告訴我們答案，當(dāng)UpdatePanel控件中有一個Async-Postback發(fā)生，而后端需要較多時間來處理這個動作時，網(wǎng)頁會出現(xiàn)停滯狀態(tài)，但此時所有頁面上所有控件仍處于“可操作狀態(tài)”，若用戶于此期間操作網(wǎng)頁上的控件而觸發(fā)了另一個Async-Postback，雖然前一個Async-Postback動作仍會“正常地完成”，不過此Async-Postback后的動作將會被放棄，也就是原本第一次發(fā)生Async-Postback后所回傳的UpdatePanel控件之“更新信息會被放棄掉”！這有可能會引發(fā)一些問題，后面的章節(jié)將會再次討論如何調(diào)整這種行為模式。