Ajax.net系列教程六：使用PopupControlExtender

现在的位置: 首页 > 综合 > 正文

Ajax.net系列教程六：使用PopupControlExtender

2013年12月11日 ⁄ 综合 ⁄ 共 4418字 ⁄ 字号小中大 ⁄ 评论关闭

第一步：建立AJAX Control Toolkit Web Site

要使用ModalPopupExtender我们要使用AJAX Control Toolkit Web Site模板。本例子是演示怎样使用ModalPopup来修改我们的页面风格。建立好网站后我们需要以下控件：N个Panel控件作为Popup载体、一个LinkButton控件用于激活ModalPopup窗口、一个RadioButtonList控件用于选择样式、一段文本、两个Button控件用于确定或取消和一个ModalPopupExtender组件，如下图所示：

其中Panel部分的代码如下：

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

<asp:Panel ID="Panel2" runat="server" CssClass="modalPopup" Width="309px">

<div>

<p>

请选择页面风格：</p>

<p>

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

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

<label for="RadioA" class="sampleStyleA" style="padding: 3px;">风格样式一</label>

</p>

<p>

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

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

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

style="padding: 3px;">风格样式二</label>

</p>

<p>

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

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

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

style="padding: 3px;">风格样式三</label>

</p>

<p>

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

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

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

style="padding: 3px;">

风格样式四

</label>

</p>

<p>

<label class="sampleStyleD" for="RadioD" style="padding-right: 3px; padding-left: 3px;

padding-bottom: 3px; padding-top: 3px">

</span></span></span>

</label>

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

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

</p>

</div>

</asp:Panel>

注意：Panel1要加Style="display: none"，这样它才能正常隐藏和显示，而Panel2的作用是支持拖拽。大家要细细品味一下这两个Panel所扮演的角色。

控件准备好后我们要准备样式表，由于例子的需要，这次的样式比较多，大家可以直接复制以下代码。其中modalBackground是ModalPopup的背景样式，modalPopup是ModalPopup的样式。

.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;

}

配置完样式后我们还需要定义一个简单的JS函数，用以替换文本的样式，代码如下：

var styleToSelect;

function onOk() {

$get('Paragraph1').className = styleToSelect;

}

</script>

注意：这里的Paragraph1是指文本的载体ID，大家可以用<p>、<span>和<div>等作为文本的载体。例如：

今天天气不错挺风和日丽的<br />

我们下午没有课这天气挺爽的 <br />

我一大中午早早的跑去上自习心里啄么着大学生活是多么美好啊 ……

</p>

第二步：配置ModalPopupExtender

我们切换到源代码模式配置ModalPopupExtender，具体代码如下：

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"

TargetControlID="LinkButton1"

PopupControlID="Panel1"

BackgroundCssClass="modalBackground"

OkControlID="OkButton"

OnOkScript="onOk()"

CancelControlID="CancelButton"

DropShadow="true"

Drag="true"

PopupDragHandleControlID="Panel2"/>

TargetControlID是指ModalPopupExtender的目标控件ID，即激活ModalPopup的控件ID，这里应该是LinkButton1。PopupControlID是指Popup载体控件的ID，这里应该是Panel1，关于Popup载体的解析请参照“轻松掌握Ajax.net系列教程六：使用PopupControlExtender”。BackGroundCssClass是指ModalPopup的背景样式，前面已经提过，应该是modalBackground。OkControlID是指确定控件的ID，这里是OkButton。OnOkScript是指当用户确定后所执行的JS脚本，在前面我们已经定义了onOK函数，用于改变文本的样式。注意：这里的语法一定要严格遵守Js的书写格式。CancelControlID是指取消控件的ID，这里应该是CancelButton。DropShadow是指是否留下阴影。Drag是指是否支持拖拽。PopupDragHandleControlID是指可拖拽的控件ID，前面已经提过了，应该是Panel2。