微軟的Ajax控制項

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

微軟的Ajax控制項功能還是蠻大的。

--後台動態註冊
ScriptManager1.RegisterAsyncPostBackControl(Slider1);

--頁面中使用控制項
<asp:UpdatePanel   ID="UpdatePanelMsg"runat="server">
        <Triggers>
//讓UpdatePanel裡面的控制項回傳，就是不局部重新整理
          <asp:PostBackTrigger ControlID="btDown"/>
        </Triggers>
<Triggers >
//讓UpdatePanel外的控制項有局部重新整理的功能
     <asp:AsyncPostBackTrigger
ControlID="btnChangeTime"//實現局面重新整理控制項的Id
EventName="Click"   />
//實現局面重新整理的事件名,注意不是方法名

</Triggers>
</asp:UpdatePanel>

就這簡單的兩句設定，就完成了很大的功能，實在是太好用了，下面再給個執行Ajax時調用自訂js函數的例子。

<%@ Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server">    protected void Button1_Click(object sender, EventArgs e)    {        System.Threading.Thread.Sleep(1000);        Label1.Text = DateTime.Now.ToString();    }    protected void Panel1Trigger_Click(object sender, EventArgs e)    {        System.Threading.Thread.Sleep(1000);        Label1.Text = DateTime.Now.ToString() + " - trigger";    }</script><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server">    <title>UpdateProgress Tutorial</title>    <style type="text/css">        #UpdatePanel1        {            width: 300px;            height: 100px;            border: 1px solid gray;        }        #UpdateProgress1        {            width: 200px;            background-color: #FFC080;        }    </style></head><body>    <form id="form1" runat="server">    <div>        <asp:ScriptManager ID="ScriptManager1" runat="server" />        <script language="javascript" type="text/javascript">        <!--            var prm = Sys.WebForms.PageRequestManager.getInstance();            function CancelAsyncPostBack() {                if (prm.get_isInAsyncPostBack()) {                    prm.abortPostBack();                }            }            prm.add_initializeRequest(InitializeRequest);            prm.add_endRequest(EndRequest);            var postBackElement;            //開始            function InitializeRequest(sender, args) {                if (prm.get_isInAsyncPostBack()) {                    args.set_cancel(true);                }                postBackElement = args.get_postBackElement();                if (postBackElement.id == 'Panel1Trigger') {                    $get('UpdateProgress1').style.display = 'block';                }                //調用自訂的函數                beginFun();            }            //結束            function EndRequest(sender, args) {                if (postBackElement.id == 'Panel1Trigger') {                    $get('UpdateProgress1').style.display = 'none';                    endFun();                }            }            //執行時調用的自訂的函數            function beginFun() {                $get("Label1").style.color = "red";            }            //結束時調用的自訂函數            function endFun() {                $get("Label1").style.color = "#000";            }        // -->        </script>        <asp:UpdatePanel ID="UpdatePanel1" runat="server">            <ContentTemplate>                <asp:Label ID="Label1" runat="server" Text="Panel rendered."></asp:Label><br />                <asp:Button ID="Button1" runat="server" Text="refresh" OnClick="Button1_Click" />            </ContentTemplate>            <Triggers>                <asp:AsyncPostBackTrigger ControlID="Panel1Trigger" />            </Triggers>        </asp:UpdatePanel>        <asp:Button ID="Panel1Trigger" runat="server" Text="Trigger" OnClick="Panel1Trigger_Click" />        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">            <ProgressTemplate>                Processing...                <input id="Button2" type="button" value="cancel" onclick="CancelAsyncPostBack()" />            </ProgressTemplate>        </asp:UpdateProgress>    </div>    </form></body></html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

微軟的Ajax控制項

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support