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库里的
}
</script>
补:
pageLoad()也是微软js类库里的函数,相当于windows.onload()
分享到:
相关推荐
aspAJAX扩展控件,有时间控件,Menu控件,模态窗体...
Ajax扩展控件 Ajax扩展控件 Ajax扩展控件 Ajax扩展控件 Ajax扩展控件 Ajax扩展控件 Ajax扩展控件 Ajax扩展控件 Ajax扩展控件 Ajax扩展控件 Ajax扩展控件 Ajax扩展控件 Ajax扩展控件
Ajax扩展控件dll.....Ajax扩展控件dll.....Ajax扩展控件dll.....
包含asp.net AJAX控件的详细介绍及用法
TextBoxWatermark控件 为TextBox添加水印功能,可以在如下两方面提高用户体验。 1 节省页面空间。 2 给用户充分提示 声明语法及常用属性: TargetControlID="myTextBox" WatermarkText="要在TextBox中显示的...
Ajax扩展包控件应用实例Ajax扩展包控件应用实例Ajax扩展包控件应用实例Ajax扩展包控件应用实例Ajax扩展包控件应用实例Ajax扩展包控件应用实例Ajax扩展包控件应用实例
精心整理的AspAjax的安装与使用(内含安装文件和详细安装教程)-AJAX扩展控件,非常实用
ajax扩展控件,有个例子的
AjaxControlToolkit.dll,内置30多个Ajax控件。
Asp.net中安装Ajax扩展控件的程序集文件。
ASP.NET AJAX各种扩展控件集合网站和ASP.NET AJAX Control Toolkit安装文件下载,里面包含了34种控件的集合成的网站的示例。
是对vs2008中Ajax框架控件集合的补充,其中包含几十个控件。添加上后就可以直接拖出来使用。不过,在vs2005中使用可能存在问题,这也是因为2005本身对Ajax支持的问题。
实现动态菜单 实现等级评价功能 实现日历控件绑定TextBox
这个dll可在vs2008中使用,我曾经下了很多个版本的dll都不是特别好用,这个挺好,贴出来与大家分享。
Ajax 基础控件和扩展控件文档及例子 QQ:292258449
该控件 是asp.net 中的Ajax扩展控件 增加了许多实用性的强大功能
包含多种Ajax扩展控件,有的C#操作系统没有这种控件,使用这个可以更加轻松
VS2010第三方AJAX拓展控件。在工具箱,自定义选项卡,添加上去,就可以适用这些控件。
AJAX安装、AJAX扩展、AJAX必备、AJAX控件必须的。。。。。。。。。。。。。