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="删除" οnclick="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" οnclick="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"
οnclick="styleToSelect = 'sampleStyleA';" />
可以在客户端事件里直接给客户端变量赋值,前提是该客户端变量是全局变量
<label for="RadioA" class="sampleStyleA"
style="padding: 3px;">Sample paragraph text</label>
</p>
<p>
<input type="radio" name="Radio" id="RadioB"
οnclick="styleToSelect = 'sampleStyleB';" />
<label for="RadioB" class="sampleStyleB"
style="padding: 3px;">Sample paragraph text</label>
</p>
<p>
<input type="radio" name="Radio" id="RadioC"
οnclick="styleToSelect = 'sampleStyleC';" />
<label for="RadioC" class="sampleStyleC"
style="padding: 3px;">Sample paragraph text</label>
</p>
<p>
<input type="radio" name="Radio" id="RadioD"
οnclick="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>