微软的Ajax控件

章昱

2023-12-01

微软的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" οnclick="CancelAsyncPostBack()" />
            </ProgressTemplate>
        </asp:UpdateProgress>
    </div>
    </form>
</body>
</html>

微软的Ajax控件

相关阅读

相关文章

相关问答

相关文档