Ajax扩展控件

 

9.ConfirmButtonExtender(确定按钮控件)

 

该控件的效果跟http://kendezhu.iteye.com/admin/blogs/755237的补的效果差不多。

 

<script type="text/javascript">

function cancel()

{

  document.getElementById("<%=Label1.ClientID%>").innerHTML="你取消了删除!";

}

</script>

<asp:Button ID="Button1" runat="server" Text="删除" onclick="Button1_Click" />

<ajax:ConfirmButtonExtender ID="Button1_ConfirmButtonExtender" runat="server" 

ConfirmText="确定要删除吗？" Enabled="True" TargetControlID="Button1" OnClientCancel="cancel">

</ajax:ConfirmButtonExtender>

各个属性很好理解,不过与我们那个补不同的是,该Ajax控件还可以在取消后执行一个js函数,相关属性是OnClientCancel。

 

另外还可以与ModalPopupExtender(弹出模态窗口控件)结合,美化一下弹出框：

http://www.cnblogs.com/msnadair/archive/2010/05/17/1737084.html

 

<asp:Button ID="Button2" runat="server" Text="删除2" onclick="Button2_Click" />

<ajax:ConfirmButtonExtender ID="Button2_ConfirmButtonExtender" runat="server"  Enabled="True" 

TargetControlID="Button2" OnClientCancel="cancel" DisplayModalPopupID="Button2_ModalPopupExtender">

</ajax:ConfirmButtonExtender>

与前面不同之处就是多了一个指定弹出模态窗口控件ID的DisplayModalPopupID属性,这样就把弹出窗口任务交给了

ModalPopupExtender,一旦设置了此属性就意味着确定事件与取消事件都已确定,在后面ModalPopupExtender的属性里不能设置OnOkScript与OnCancelScript来设置新的js确定与取消事件了,但单独使用ModalPopupExtender时则没有这个限制了。

<ajax:ModalPopupExtender ID="Button2_ModalPopupExtender" runat="server"  TargetControlID="Button2" PopupControlID="PNL" OkControlID="OK" CancelControlID="Cancel" BackgroundCssClass="modalBackground">

</ajax:ModalPopupExtender>

ModalPopupExtender里的TargetControlID指定哪个控件来控制弹出模态窗口(一般是button和linkbutton,事实上你在设计界面给服务端控件加Ajax扩展控件时会发现不同的服务端控件会有不同的Ajax扩展控件);PopupControlID指定弹出的模态窗口的ID,最好将该控件的display设为none;OkControlID指定一个按钮控件ID,该按钮会触发TargetControlID里的服务端事件;CancelControlID指定一个按钮控件ID,该按钮会触发ConfirmButtonExtender里的OnClientCancel指定的js事件;BackgroundCssClass指定弹出的模态窗口以外的地方的样式,类似与遮罩的功能。

<asp:Panel ID="PNL" runat="server" style="display:none; width:200px; background-color:White; border-width:2px; border-color:Black; border-style:solid; padding:20px;">

          确定要删除吗?

          <br /><br />

    <div style="text-align:center;">

     <asp:Button ID="Ok" runat="server" Text="OK" />

     <asp:Button ID="Cancel" runat="server" Text="Cancel" />

    </div>

</asp:Panel>

这就是弹出的模态窗口

.modalBackground {

background-color:Gray;

filter:alpha(opacity=70);

opacity:0.7;

}

 

 

10.ModalPopupExtender(弹出模态窗口控件)

 

在ConfirmButtonExtender(确定按钮控件)中,我们使用过该控件来弹出模态窗口(我们使用了ConfirmButtonExtender的 DisplayModalPopupID属性,这就意味着模态窗口里的确定按钮与取消按钮所触发的事件(上面粉红色)已经确定,这时不能添加OnOkScript与OnCancelScript再来给确认和取消按钮添加客户端事件了,但我们单独使用时是可以这样的)

 

<script type="text/javascript">

        var styleToSelect;

        function onOk() {

           // $get('Paragraph1').className = styleToSelect; 使用微软的js脚本库

           document.getElementById("Paragraph1").setAttribute("class",styleToSelect);

        }

</script>

 

 

           <p id="Paragraph1">

            The ModalPopup extender allows a page to display content to the user in a "modal"

            manner which prevents the user from interacting with the rest of the page. The modal

            content can be any hierarchy of controls and is displayed above a background that

            can have a custom style applied to it. </p><br />

 

<asp:LinkButton ID="LinkButton1" runat="server"  Text="点击这里来改变以上文本的风格"/>

          <ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server"     TargetControlID="LinkButton1"

            PopupControlID="Panel1" 

            BackgroundCssClass="modalBackground" 

            OkControlID="OkButton"

            OnOkScript="onOk()" 

            CancelControlID="CancelButton"

            DropShadow="true"

            PopupDragHandleControlID="Panel3">

    </ajax:ModalPopupExtender>

大部分属性我们之前见过,这里DropShadow是设置弹出的模态窗口是否有阴影,我们看到单独使用ModalPopupExtender时我们可以设置OnOkScript和OnCancelScript来设置单击确认和取消时触发客户端事件,而触发他们的控件ID由 OkControlID和CancelControlID设置。值得一提的是被 OkControlID和CancelControlID指定的控件无论是不是服务端控件都将不会触发服务端事件,也就是说只能执行OnOkScript和OnCancelScript指定的客户端事件。PopupDragHandleControlID指定可以被拖动的控件ID，一般位于 PopupControlID内部。

 

 <asp:Panel ID="Panel1" runat="server" Style="display:none" CssClass="modalPopup">

            <asp:Panel ID="Panel3" runat="server" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black">

                <div>

                    <p>Choose the paragraph style you would like:</p>

                </div>

            </asp:Panel>

                <div>

                    <p>

                        <input type="radio" name="Radio" id="RadioA" checked="checked"

                            onclick="styleToSelect = 'sampleStyleA';" />

                            可以在客户端事件里直接给客户端变量赋值,前提是该客户端变量是全局变量

                        <label for="RadioA" class="sampleStyleA"

                            style="padding: 3px;">Sample paragraph text</label>

                    </p>

                    <p>

                        <input type="radio" name="Radio" id="RadioB"

                            onclick="styleToSelect = 'sampleStyleB';" />

                        <label for="RadioB" class="sampleStyleB"

                            style="padding: 3px;">Sample paragraph text</label>

                    </p>

                    <p>

                        <input type="radio" name="Radio" id="RadioC"

                            onclick="styleToSelect = 'sampleStyleC';" />

                        <label for="RadioC" class="sampleStyleC"

                            style="padding: 3px;">Sample paragraph text</label>

                    </p>

                    <p>

                        <input type="radio" name="Radio" id="RadioD"

                            onclick="styleToSelect = 'sampleStyleD';" />

                        <label for="RadioD" class="sampleStyleD"

                            style="padding: 3px;">Sample paragraph text</label>

                    </p>

                    <p style="text-align: center;">

                        <asp:Button ID="OkButton" runat="server" Text="OK" />

                        <asp:Button ID="CancelButton" runat="server" Text="Cancel" />

                    </p>

                </div>

        </asp:Panel>

 

.sampleStyleA {

background-color:#FFF;

}

.sampleStyleB {

background-color:#FFF;

font-family:monospace;

font-size:10pt;

font-weight:bold;

}

.sampleStyleC {

background-color:#ddffdd;

font-family:sans-serif;

font-size:10pt;

font-style:italic;

}

.sampleStyleD {

background-color:Blue;

color:White;

font-family:Arial;

font-size:10pt;

}

.modalPopup {

background-color:#ffffdd;

border-width:3px;

border-style:solid;

border-color:Gray;

padding:3px;

width:250px;

}

上面说到的不能执行服务端事件会令人很不爽,解决方法很简单,我们可以直接在模态窗口里拖入服务端控件来触发服务器端事件

<script runat="server">

    protected void showModalPopupViaServer_Click(object sender, EventArgs e)

    {

        this.ahiddenControl.Text = "触发了服务端事件显示模态窗口";

        this.programmaticModalPopup.Show();

    }

    protected void hideModalPopupViaServer_Click(object sender, EventArgs e)

    {

        this.ahiddenControl.Text = "触发了服务端事件隐藏模态窗口";

        this.programmaticModalPopup.Hide(); 

    }

</script>

<asp:Button runat="server" ID="ahiddenControl"/>

  <asp:LinkButton ID="LinkButton2" runat="server" Text="弹出模态窗口时执行服务端事件" OnClick="showModalPopupViaServer_Click"/>

<ajax:ModalPopupExtender runat="server" ID="programmaticModalPopup"

            BehaviorID="programmaticModalPopupBehavior"

            TargetControlID="ahiddenControl"

            PopupControlID="programmaticPopup" 

            BackgroundCssClass="modalBackground"

            DropShadow="True"

            PopupDragHandleControlID="programmaticPopupDragHandle"

            RepositionMode="RepositionOnWindowScroll" >

        </ajax:ModalPopupExtender>

            <asp:Panel runat="server" CssClass="modalPopup" ID="programmaticPopup" style="display:none;width:350px;padding:10px">

            <asp:Panel runat="Server" ID="programmaticPopupDragHandle" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black;text-align:center;">

                ModalPopup shown and hidden in code

            </asp:Panel>

                You can now use this sample to see how to use ModalPopup with an invisible TargetControl.                 The ModalPopupExtender

                this popup is attached to has a hidden target control. The popup is hidden 

                <asp:LinkButton runat="server" ID="hideModalPopupViaServer" Text="on the server side in code behind" OnClick="hideModalPopupViaServer_Click" /> and 

                <a id="hideModalPopupViaClientButton" href="#">on the client in script</a>.

           <br />

        </asp:Panel>

TargetControlID指定的控件用于弹出模态窗口,其与OkControlID和CancelControlID指定的控件一样,也不能触发服务端事件,如果我们想在弹出模态窗口时执行服务端事件,我们可以把TargetControlID指定的控件的display设置为none,然后再将给某个控件的服务端事件内加上代码: ModalPopupExtender的ID.Show();  所以在服务器端控制模态窗口的现实与隐藏靠的就是ModalPopupExtender的Show()与Hide()。所以在服务器端处理完相应的事件(如确定取消)后别忘了后面加上Hide()使其隐藏。

有时我们也想在弹出模态窗口时执行客户端事件,但TargetControlID指定的控件只是起到弹出模态窗口的作用,并不能执行客户端事件。而OkControlID和CancelControlID只能指定的一个控件来执行客户端事件。我们也可以在客户端控件上指定客户端代码来控制模态窗口的显示与隐藏的同时执行我们想执行的客户端代码(同理在模态窗口里的客户端控件我们也可以为其任意指定客户端事件):

<a id="aaa" href="#" onclick="clientevent()">弹出模态窗口时执行客户端代码</a>

<script type="text/javascript">

    function clientevent()

    {

       $find("programmaticModalPopupBehavior").show();  这个show()不知是哪里的,好像也不是微软js库里的

       //关于$find()前面说过,一般在js里找Ajax拓展控件都是用$find  http://kendezhu.iteye.com/blog/773496

    }

</script>

补:

    微软js类库里的$addHandler()方法 http://msdn.microsoft.com/zh-cn/library/bb311019.aspx

    pageLoad()也是微软js类库里的函数,相当于windows.onload()