ASP.net 的無腦Ajax

雖然是老叩叩的Asp.net webform，還是有許多專案用著它，今天把以前發表過的內容重新炒一盤放上來給各邦友分享指教。

1.加入Ajax

ASP.Net的無腦Ajax很神奇地只要把內容包在 asp:UpdatePanel 裡的 ContentTemplate 標籤內即可，主要結構如下所示 唯一的 from +唯一的 asp:ScriptManager ，以上兩個都可以靠著主版頁面去加入比較省事，而底下的 Triggers 不是一定要有的，主要是要 指定控制項與事件的全頁更新 與 指定控制項同步更新 時才需要加入。

<form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        	<ContentTemplate>
        		<%-- Put Ajax Object Here --%>
                
        	</ContentTemplate>
        	<Triggers>
            	<asp:AsyncPostBackTrigger ControlID="" EventName="" />
                <asp:PostBackTrigger ControlID="" />
        	</Triggers>
		</asp:UpdatePanel>
</form>

2.Ajax過場 Loading 動畫

• CSS段，目前是滿版面用半透明白色全頁遮蔽畫面，中間留一點點動畫+文字的寫法。

.Loading_Ajax {
            text-align: center;
            left: -50%;
            float: left;
            position: fixed;
            z-index: 1200;
            height: 200%;
            width: 200%;
            padding: 50% 0 0 0%;
            top: -50%;
            background-color: white;
            opacity: 0.95;
}

.Loading_Ajax img {
            height: 1vw;
            width: 4vw;
}

• aspx內的寫法，用 UpdateProgress 物件來實踐，在AssociatedUpdatePanelID屬性內去指定對應的UpdatePanel的ID即可。

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
          <ProgressTemplate>
                <div id="DivLoading" align="center" class="Loading_Ajax">
                     <asp:Image ID="LoadingIcon1" CssClass="img" ImageUrl="~/images/ajax-loader.gif" ToolTip="indicator" runat="server" ImageAlign="Middle" />
                         <h4>請稍待，資料處理中...</h4>
                </div>
           </ProgressTemplate>
</asp:UpdateProgress>

• 實際使用的效果，如下圖：
  

3.JavaScript的Event重新綁定

重新載入的控制項，運用JavaScript重新Bind住前端事件。

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function () {
    // 寫成JavaScript 函數 重新放置於此綁定即可
    
});

Kw部落格