Vs 內建AjAx控制項–局部更新

 

這篇部落格簡單介紹下vs的AjAx內建的兩個外掛程式

ScripManager  與 UpdatePanel

這兩個控制項是vs sap.net 中使用最大的幾個控制項之一.主要作用是對網頁的內容,進行局部的更新的

下面進行局部的講解

ScripManager

1  它是指令碼控制器,是asp.net.Ajax存在的基礎,是所有的ajax的控制項的的基礎

2  一個頁面只允許有一個ScriptManager,並且放在其他的ajax的控制項的前面

3  ScriptManager掌管著用戶端Ajax頁的多個指令碼,並在頁面中註冊ajax類庫, 用來實現頁面的局部更新和對Web服務的調用 

它的基本屬性有以下幾種

 

AllowCustomError :是否要使用錯誤處理

AsyncPostBackErrorMessage:非同步返回錯誤的時候是否返回錯誤洗洗腦

AsypostBackTimeOut:非同步返回事件顯示:預設為90秒

EnablePartialZRendering:是否支援頁面的局部重新整理

ScriptMode:指定發送到用戶端的指令碼模式:有四種:

Auto,Inherit,Debug,Release,預設為Aurto的

ScripPath:設定所有的指令碼快的根目錄,作為全域屬性

 

UpdatePanel控制項

也是Ajax裡使用的最多的控制項之一,updatePanel控制項是用來局部更新網頁上的內容.網頁上要局部更新的內容必須

放在updatepanel控制項裡.它必須和上面說的ScriptManager控制項放在一起使用.下面看看一些屬性

屬性	說明
Children                           As   Triggers	當UpdateMode屬性為Conditional時，UpdatePanel中的子控制項的非同步回送是否會引發UpdatePanle的更新。
RenderMode	表示UpdatePanel最終呈現的HTML元素。Block（預設）表示<div>，Inline表示<span>
UpdateMode	表示UpdatePanel的更新模式，有兩個選項：Always和Conditional。Always是不管有沒有Trigger，其他控制項都將更新該UpdatePanel，Conditional表示只有當前UpdatePanel的Trigger， 或ChildrenAsTriggers屬性為true時當前UpdatePanel中控制項引發的非同步回送或者整頁回送，或 是伺服器端調用Update()方法才會引發更新該UpdatePanel。
Contente Template	用來定義UpdatePanel的內容
Triggers	分別為AsyncPostBackTrigger和PostBackTrigger

 

上面的基本屬性介紹完後,下面就解決一個小問題 .將整個介面的重新整理改為局部的重新整理

 ======================================================================

隔開以上都是為了這個問題做鋪墊的

現在的問題是: 在網頁中有刪除的新聞的一個功能

 

當刪除新聞的時候卻進行了真箇頁面的重新整理,這個是我們不想要的,重新整理帶來的不必要的時間和資源.那有什麼辦法能直

接刪除而不重新整理麼

這個就用到了我們上面說到的aso.net.Ajax的控制項了

用到基礎控制項ScriptManager 和局部重新整理控制項UpdatePanel

那代碼又是怎樣寫的呢.

首先需要明白, 是要將內容放在 UpdatePanel的內容裡

而內容是不同的. 就需要不同的模板了

運用的是table表格式資料

所以這裡就用UpdatePanel 的ContentTemplate的屬性了

將table 的資料放在 ContentTemplate的下面

這樣小問題就迎刃而解了

執行個體代碼如下

<div class="fontcolor">提示：點擊新聞標題後可進行對該新聞評論的刪除！</div>            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>            <asp:UpdatePanel ID="UpdatePanel1" runat="server">                <ContentTemplate>                    <table class="m_table">                        <tr>                            <th class="xuhao">序號</th>                            <th>標題</th>                            <th class="del">修改</th>                            <th class="del">刪除</th>                        </tr>                        <asp:Repeater ID="repNews" runat="server">                            <ItemTemplate>                                <tr>                                    <td><%#Eval("id")%></td>                                    <td><a href='../NewsContent.aspx?newsid=<%#Eval("id") %>' target="_blank"><%# Eval("title") %></a></td>                                    <td><a href="#">修改</a>                                    </td>                                    <td>                                        <asp:LinkButton ID="lbtnDel" OnClientClick="returnconfirm('刪除新聞會將其評論一起刪除,是否刪除')" OnClick="lbtnDel_Click" CommandArgument='<%#Eval("id") %>' runat="server">刪除</asp:LinkButton></td>                                </tr>                            </ItemTemplate>                        </asp:Repeater>                    </table>                </ContentTemplate>            </asp:UpdatePanel>

到這裡控制項的基本屬性就說完了,但是執行個體幾乎還沒有說明,待續詳細講解.