65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 AJAX ModalPopupExtender 的登录/注册界面

Pramod S Kumar
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.10/5 (25投票s)

2008年4月3日

CPOL

3分钟阅读

viewsIcon

313888

downloadIcon

13612

如何使用 AJAX ModalPopupExtender 实现登录/注册界面。

LoginModalPopup

SignupScreen.JPG

引言

我想借此机会介绍一个示例应用程序，该应用程序展示了如何在任何 ASP.NET Web 应用程序中使用 ModalPopupExtender 进行登录和注册。在这个快速演示中，我将向您展示如何在 ASP.NET 中使用 AJAX 实现一个模态对话框。模态对话框（正式名称为 ModalPopupExtender）在当今的应用程序中极其重要，因为它避免了仅为了登录或注册用户而重定向到新页面。这里展示了一个简单的例子，说明如何实现它。

背景

我一直在寻找如何使用 ModalPopupExtender 进行登录和注册的示例...但我找不到任何示例。 所以最后，我最终创建了这个登录示例应用程序，希望对大家有用。

Using the Code

首先，让我们试着理解一下 ModalPopupExtender。

ModalPopup 描述

ModalPopupExtender 允许页面以“模态”方式向用户显示内容，从而防止用户与页面的其余部分交互。模态内容可以是任何控件层次结构，并显示在可以应用自定义样式的背景之上。显示时，只能与模态内容交互；单击页面的其余部分不会执行任何操作。当用户完成与模态内容的交互后，单击确定/取消控件会关闭模态内容，并可以选择运行自定义脚本。

ModalPopup 属性

该控件使用此代码初始化。模态弹出元素上的显示设置为 None，以避免渲染时闪烁。*斜体*属性是可选的

<ajaxToolkit:ModalPopupExtender ID="MPE" runat="server"
    TargetControlID="LinkButton1"
    PopupControlID="Panel1"
    BackgroundCssClass="modalBackground" 
    DropShadow="true" 
    OkControlID="OkButton" 
    OnOkScript="onOk()"
    CancelControlID="CancelButton" 
    PopupDragHandleControlID="Panel3" />
  • TargetControlID - 激活模态弹出的元素的 ID
  • PopupControlID - 要显示为模态弹出的元素的 ID
  • BackgroundCssClass - 显示模态弹出时应用于背景的 CSS 类
  • DropShadow - 设置为 True 以自动向模态弹出添加阴影
  • OkControlID - 关闭模态弹出的元素的 ID
  • OnOkScript - 使用 OkControlID 关闭模态弹出时要运行的脚本
  • CancelControlID - 取消模态弹出的元素的 ID
  • OnCancelScript - 使用 CancelControlID 关闭模态弹出时要运行的脚本
  • PopupDragHandleControlID - 包含弹出窗口的标题/标题的嵌入元素的 ID，该标题/标题将用作拖动手柄
  • X - 模态弹出窗口的左上角的 X 坐标（如果未指定，弹出窗口将在水平方向上居中）
  • Y - 模态弹出窗口的左上角的 Y 坐标（如果未指定，弹出窗口将在垂直方向上居中）
  • RepositionMode - 确定在调整窗口大小或滚动窗口时是否需要重新定位弹出窗口的设置

这显示了如何为登录和注册屏幕按钮定义 ModalPopupExtender

<modalpopupextender id="ModalPopupExtenderLogin" 
  runat="server" targetcontrolid="Loginlnk" 
  popupcontrolid="LoginPanel" backgroundcssclass="modalBackground" 
  dropshadow="true" okcontrolid="LoginBtn" önokscript="ok()" 
  cancelcontrolid="CancelBtn" />

<modalpopupextender id="ModalPopupExtenderSignup" runat="server" 
  targetcontrolid="Signuplnk" popupcontrolid="SignupPanel" 
  backgroundcssclass="modalBackground" dropshadow="true" 
  okcontrolid="JoinBtn" önokscript="okJoin()" 
  cancelcontrolid="CancelBtn2" />

安装

从此链接下载 AJAX Toolkit **Version 1.0.20229**：http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=11121。

此外，您需要 ASP.NET AJAX Extensions 1.0 for ASP.NET 2.0...您可以从此链接获取它：http://www.asp.net/ajax/downloads/。

获得所有这些之后，在 VS2005 中打开示例项目，它应该可以工作了。

历史

  • 2008 年 4 月 3 日。发布初始版本。
© . All rights reserved.