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部落格