AjaxControlToolKit--ModalPopup控件的介绍

1. introduction:
ModalPopup控件允许一个asp页面的部分内容以对话框的模式显示给用户,同时会限制用户于页面的其他部分交互。对话框显示的内容可以是一个层级,这个层级的背景可以使用户自定义的格式,简单的理解好比是一个对话框弹出来后,主页面会显示灰色,且不可操作。 当用户对这个弹出框内容进行操作后,需要点击一个OK/Cancel的按钮来运行某些客户端脚本. 客户端脚本会执行一些改变页面内容的功能。如果需要在Ok/Cancel的按钮点击时发生Postback,可以通过设置ModalPopup属性实现。默认的弹出框是在页面中间,你可以通过设置X,Y坐标改变对话框的水平或垂直位置。
2. Properties:
下面给出了一个ModalPopupExtender控件的属性例子:

<ajaxToolkit:ModalPopupExtender ID="MPE" runat="server"
TargetControlID="LinkButton1"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
DropShadow="true"
OkControlID="OkButton"
OnOkScript="onOk()"
CancelControlID="CancelButton"
PopupDragHandleControlID="Panel3" />

其中斜体属性为可选属性。
a. TargetControlID: 用来使弹出框出现的控件ID。
b. PopupContraolID: 作为Modal Popup控件的内容显示的控件ID。
c. BackgroundCssClass: 当Modal Popup显示的时候,控件Modal背景颜色等的Css样式。
d. okControlID: 用来解除当前弹出框的控件ID。
e. OnOkScript: 当点击OK控件时执行的脚本。
f. CancelControlID: 用来取消当前Popup Modal的控件ID。
g. OnCancelScript: 当点击Cancel控件时执行的脚本。
h. DropShadow: 当拖动Popup Modal时是否有阴影显示。只是个效果问题。没什么大的作用。
i. PopupDragHandleConrolID: 作为Popup Modal可拖动的表头部分的控件的ID。
j. X: 用来设置Modal Popup控件的行坐标的。
k. Y: 用来设置Modal Popup控件的纵坐标的。
l. RepositonMode: 通过设置它来决定当窗口resized或是scrolled时发生Postback动作。
上面的属性可能比较多。下面的例子中会指出每个属性对应的部分。
3. Example:
这里假设你已经安装了ajaxtoolkit。没有安装的话可以到MS官网下载。
这里会提供两个例子。
第一个是微软的例子。第二个是使用Modal Popup控件实现删除时警告对话框的例子。
第一步: 创建一个ajaxtoolkit模板:



起个项目名字叫做AjaxControlToolKit_ModalPopup。
第二步: 编辑default.aspx页面。
和前面的例子一样，加入两个div, <div class=”demoarea”>和<div class=”demoheading”>。
然后需要加入几个panel最后需要个ModalPopupExtender控件。控件和属性的对应如下图：





当点击OK按钮的时候执行下面这个脚本:
<script type="text/javascript">
var styleToSelect;
function onOk() {
$get('Paragraph1').className = styleToSelect;
}
</script>
也就是把ID为Paragraph1的控件的class设置为styleToSelect.
而styleToSelect会通过onclick事件而改变:



第三步就是为这个页面添加css样式:
<style type="text/css">
.demoarea {
padding:20px;
background:#FFF url(images/demotop.png) no-repeat left top;
}

.demoarea p
{
padding:5px;
}

.demoheading {
padding-bottom:20px;
color:#5377A9;
font-family:Arial, Sans-Serif;
font-weight:bold;
font-size:1.5em;
}
.modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}

/*Modal Popup*/
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}

.modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}

.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;
}
.sampleStyleE {
background-color:yellow;
color:White;
font-family:Times New Roman;
font-size:10pt;
}

/*Popup Control*/
.popupControl{
background-color:White;
position:absolute;
visibility:hidden;
}
</style>

第二个例子: 实现删除记录时的警告功能:
第一步: 在这个web站点添加一个default2.aspx文件,然后向页面中添加一个Scriptmanager控件。
第二步:
在页面中添加一个UpdatePanel,然后在它下面添加个DataGrid,如下图:



使用的ModalPopup控件的属性设置:
<ajaxToolKit:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mdlPopup" runat="server"
TargetControlID="div" PopupControlID="div"
OkControlID="btnOk" OnOkScript="okClick();"
CancelControlID="btnNo" OnCancelScript="cancelClick();" BackgroundCssClass="modalBackground" />
大致的工作原理如下:
当点击某条记录后的delete按钮时,会执行下面这段javascript,和BtnDelete_Click事件,



然后当点击OK按钮的时候,会执行postback，也就相当于删除了一条记录。
4. SourceCode:
http://dujingjing1230.download.csdn.net/