模态弹出窗口扩展器基础

• 下载 AjaxControlToolkit - 383.52 KB
• 下载 ModalDialogExtender - 385.43 KB

引言

我想借此机会介绍一个新的实用控件，它可以使我们的 Web 应用程序真正具有交互性。在这个快速演示中，我将向您展示如何在 ASP.NET 中使用 AJAX 实现模态对话框。模态对话框（正式名称为 ModalPopupExtender）在当今的应用程序中至关重要，因为编写 JavaScript window.open() 来打开弹出窗口或将单独的 ASP.NET 页面作为弹出窗口打开有时非常繁琐、耗时，更重要的是，很多时候需要牺牲性能。一个简单的例子可以证明我的观点。

演示步骤

1. 从 Visual Studio 项目向导选项中创建一个新的 AjaxEnabledWebSite。
2. 将本文附带的 AjaxControlToolkit.dll 添加到 Web 项目的引用集合中。
3. 在您的 Web 应用程序中的任何页面（例如 Default.aspx），添加一个名为“查看职位详情”的链接按钮。
4. 添加一个包含一些静态值以及“确定”和“取消”按钮的 HTML 表格。将这些控件（不包括链接按钮）放置在 Panel 控件内。
5. 如果您的表单中没有 ScriptManager 标签，则应在 Form 标签内指定它。

<asp:ScriptManager ID="ScriptManager1" runat="server" />  

6. 按照以下方式设计页面：

<formulas /></formulas />

7. 将以下样式表添加到单独的新文件或页面本身。在此示例中，创建了一个名为 StyleSheet.css 的单独文件并将其包含在页面中。

body, div, p, h1, h2, h3, h4, ul, li, table 
{
    margin:0;
    padding:0;
    border:none;
}

/* Modal Pop-up */ 

.modalBackground 
{
    background-color:
    filter:alpha(opacity=70);
    opacity:0.7; 
} 

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

8. 在 head 标签中，放置以下代码

<link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 

9. 现在将以下代码放置在 Panel 控件正上方的一个单独行中

<ajaxtoolkit:modalpopupextender 
    id="ModalPopupExtender" 
    runat="server" 
    backgroundcssclass="modalBackground" 
    cancelcontrolid="CancelButton" 
    dropshadow="true" 
    okcontrolid="OkButton" 
    popupcontrolid="Panel1" 
    popupdraghandlecontrolid="Panel3" 
    targetcontrolid="lbn_job_det"> 
</ajaxtoolkit:modalpopupextender> 

ModalPopUpExtender 的 CancelControlId 属性表示哪个控件被视为“取消”按钮。该控件的默认属性是关闭对话框。但可以使用 OnCancelScript 属性进行自定义。您只需要使用任何 JavaScript 函数即可实现。 还有一个 OnOkScript 属性。

10. 必须注册程序集 (AJAXControlToolKit.dll)。因此，必须在页面指令之后放置以下代码。

<%@ Register Assembly="AjaxControlToolkit" 
    Namespace="AjaxControlToolkit" 
    TagPrefix="ajaxToolkit" %>  

11. 现在进入演示，单击“查看职位详情”按钮并查看模态弹出窗口。



12. 您可以更改背景的不透明度、背景颜色。一切取决于您如何使用样式表使您的应用程序更具交互性。

这是一个关于如何在 ASP.NET 中实现模态弹出扩展的基本思想和演示。上述表示形式只是演示了一个搜索窗口。该窗口包含一个 GridView，它本身调用 Web 服务以生成搜索结果。请发送您的想法、建议和观点。