基于Smum县的ASP.NET 模式

分享于 

14分钟阅读

Web开发

  繁體 雙語

Sample Image - SmumModalForm.jpg

介绍

ASP.NET AJAX控件提供的ModalPopupExtender 控件允许在页面中间显示内容,禁止用户与页面的它的余部分交互。 这是一个非常有用的技术,但是我想在这种模式表单中进行一些改进。

具体来说,我想:

  • 在模式表单中创建可以放置内容的面板,而不必在页面上包含单独的ModalPopupExtender 控件。
  • 通过在显示表单时自动包括表单,并允许使用样式表来标准化模式表单的外观。
  • 允许在页面周围拖动模式形式,就像真正的模态表单一样。
  • 提供比 ModalPopupExtender 通常提供的更不透明阴影的模式形式。

ModalForm控件

首先,因为我希望这个控件是一个简单容器,我可以从 Panel 服务器控件继承这个控件。

[ToolboxData("<{0}:ModalForm runat="server">")]publicclass ModalForm : Panel
{
 public ModalForm() : base()
 {}
}

这样做给了我们 Panel 控件的所有功能,意味着我们有一个容器,我们可以把其他东西。 现在,我们需要使它看起来像一个真正的模态形式。 这意味着创建标题和关闭 icon的标题,可以单击它来关闭表单。 这是由 CreateContainerControls 例程在控件呈现过程中完成的。

private Panel CreateContainerControls()
{
 Panel header = new Panel();
 header.ID = "Header"; 
 _extender.PopupDragHandleControlID = header.ID; 
 header.CssClass = this.HeaderCss;
 Panel title = new Panel();
 //Add title text to title panel. LiteralControl titleText = new LiteralControl(this.Title);
 title.Controls.Add(titleText);
 //Place title on left of header panel. title.Style.Add("float", "left");
 header.Controls.Add(title);
 //Only create a close image panel //if a close image has been specified. HtmlImage imageButton = null;
 if (CloseImageUrl!= "")
 {
 Panel closeImage = new Panel();
 //Add image to image panel. imageButton = new HtmlImage();
 imageButton.ID = ID + "_Button";
 imageButton.Border = 0;
 imageButton.Src = GetCloseImageUrl();
 imageButton.Style.Add("cursor", "pointer");
 //Both the image and the rollover image will//be saved as attributes of the image to facilitate//rollover. imageButton.Attributes.Add("image", Path.GetFileName(CloseImage));
 imageButton.Attributes.Add("rolloverImage", 
 Path.GetFileName(CloseRolloverImage));
 imageButton.Attributes.Add("onMouseOver", 
 "RolloverImage(event);");
 imageButton.Attributes.Add("onMouseOut", 
 "RolloverImage(event);");
 closeImage.Controls.Add(imageButton);
 //Place image on right of header panel. closeImage.Style.Add("float", "right");
 closeImage.CssClass = CloseImageCss;
 header.Controls.Add(closeImage);
 }
 Panel content = new Panel();
 content.CssClass = this.ContentCss;
 //Move all the children of the base panel //to the children of the content panel.//Note as a child control is added to content, //it is automatically removed from the base panel.int numChildren = this.Controls.Count;
 //Start at 2 since the popup panel and ///the modal popup extender will be 0 and 1.for (int i = 2; i < numChildren; i++)
 content.Controls.Add(this.Controls[2]);
 //Add the header and content panels to the popup panel. _popup.Controls.Add(header);
 _popup.Controls.Add(content);
 //Now that all controls are in their proper places, //create the cancel javascript for the CancelControlId.if (CloseImageUrl!= "" && CancelControlId!= "")
 imageButton.Attributes.Add("onClick", GetCloseScript());
 //Make sure this panel is hidden to begin.this.Style.Add("display", "none");
 return header;
}

在 上面 中,我在 ModalForm 容器面板的顶部创建一个头面板,其中包含一个内容面板 below。 头面板包含两个它的他面板,一个用于浮动到左侧,另一个用于关闭模态窗体。 头。关闭图像。内容和容器面板都有不同的样式表类,让开发者能够完全控制模式表单的外观。 设计控件时,作为 ModalForm 容器面板子级的控件将移动到新的内容面板。 注意,我将一个JavaScript函数附加到图像的onClick 事件中,该函数将关闭表单。 这里函数将只强制单击 ModalPopupExtender 中已经设置的控件以关闭模式表单。

设置模式弹出扩展程序控件的PopupDragHandleControlID 属性将导致模式弹出式弹出。 下面将讨论使用 上面 创建类级 _popup_extender 变量的过程。

即时创建 ModalPopupExtender

到目前为止,我们有一个面板控件模仿模态表单的外观,但它实际上没有任何模式功能。 通过将 ModalForm 控件连接到动态创建的ModalPopupExtender 控件,通过重写控件和 CreateChildControls 例程的OnInit 来提供该控件。

protectedoverridevoid OnInit(EventArgs e)
{
 EnsureChildControls();
 base.OnInit(e);
}protectedoverridevoid CreateChildControls()
{
 base.CreateChildControls();
 // Create the extender and the popup control panel to act on. _extender = new ModalPopupExtender();
 _extender.ID = ID + "_ModalPopupExtender";
 _popup = new System.Web.UI.WebControls.Panel();
 _popup.ID = ID + "_Popup";
 //Pass on ModalPopup extender properties of this control to the extender. _extender.TargetControlID = ActivateControlId;
 _extender.BackgroundCssClass = BackgroundCss;
 _extender.CancelControlID = CancelControlId;
 _extender.OkControlID = OkControlId;
 _extender.DropShadow = DropShadow;
 _extender.OnOkScript = OnOkScript;
 _extender.PopupControlID = _popup.ID;
 //Pass on panel properties of this control to the popup panel. _popup.Width = this.Width;
 _popup.CssClass = this.CssClass;
 this.CssClass = "";
 if (!this.DesignMode)
 {
 Controls.AddAt(0, _popup);
 Controls.AddAt(0, _extender);
 }
}

OnInit 重写调用强制 CreateChildControls 运行的EnsureChildControls。 这个例程然后简单地实例化 ModalPopupExtender 控件和弹出面板,模式弹出式扩展程序将在。 它设置这些控件的适当属性,并将它们添加到 ModalForm 控件的Controls Collection。 注意,可以在 ModalPopupExtender 控件上设置的所有属性都作为 ModalForm 控件的属性公开,然后在这里时传递给 ModalPopupExtender 控件。

固定拖动

ModalPopupExtender的拖动功能中有 Bug,至少在我用来创建这个演示的工具包的版本中是这样的。 当拖动模式弹出式弹出窗口时,弹出式弹出窗口会回到原始启动位置。 为了解决这个问题,我对 DragPanelExtender 进行了以下更改,它们用于给出模式弹出的拖动功能。 在 FloatingBehavior.js 文件的onDragEnd 方法中,插入粗体的行 below:

// void onDragEnd(Canceled)this.onDragEnd = function(canceled) {
 canceled = false;if (!canceled) {
 var handler = this.get_events().getHandler('move');
 if(handler) {
 var cancelArgs = new Sys.CancelEventArgs();
 handler(this, cancelArgs);
 canceled = cancelArgs.get_cancel();
 } 
 }//etc....

如果 DragPanelExtender 在网站它的他地方使用,这个更改可以能阻止拖动面板扩展器工作,但是我们的目的。

在浏览器窗口的中心直接显示模式表单,当浏览器窗口滚动或者调整它的大小时将它的保持在那里。 由于我们的模式形式是可以拖动的,我们可以将它移离初始的显示位置。 然而,当浏览器窗口调整或者滚动时,模式表单将被放回浏览器窗口的中间。 为了保持这一点,我们需要对 ModalPopupExtender 控件进行小的更改,以禁用这里功能。 必须在 ModalPoupBehavior.js 文件中进行更改,后者为控件执行客户端功能。 具体来说,从 _attachPopup 函数中加粗行 below,将客户端侧处理程序添加到浏览器窗口的大小和滚动事件:

_attachPopup : function() {
 if (this._DropShadow &&!this._dropShadowBehavior) {
 this._dropShadowBehavior = $create(AjaxControlToolkit.DropShadowBehavior, {}, 
 null, null, this._foregroundElement);
 this._dropShadowBehavior.set_Opacity(.25);
 this._dropShadowBehavior.set_Width(10);
 }//$addHandler(window, 'resize', this._resizeHandler);//$addHandler(window, 'scroll', this._scrollHandler);this._windowHandlersAttached = true;
},

此外,从 _detachPopup 函数中加粗的行 below 从浏览器窗口中分离调整大小和滚动事件处理程序,必须注释掉:

_detachPopup : function() {
 if (this._windowHandlersAttached) {
 if (this._scrollHandler) {//$removeHandler(window, 'scroll', this._scrollHandler); }
 if (this._resizeHandler) {//$removeHandler(window, 'resize', this._resizeHandler); }
 }
 if (this._dropShadowBehavior) {
 this._dropShadowBehavior.dispose();
 this._dropShadowBehavior = null;
 }
},

更改投影阴影

ModalPopupExtender 本机允许你指定模式窗体应该出现阴影,但它使用的默认阴影是一个看起来很糟糕的black。 通过调整 _attachPopup - modalbehavior.js 文件中的函数,我们可以轻松地改变附加到模式窗体的拖放面板的特性。 为了给下拉阴影不透明度 25%和宽度为 10像素,我添加了粗体行 below 到这个例程:

_attachPopup : function() {
 if (this._DropShadow &&!this._dropShadowBehavior) {
 this._dropShadowBehavior = $create(AjaxControlToolkit.DropShadowBehavior, 
 {}, null, null, this._foregroundElement);this._dropShadowBehavior.set_Opacity(.25);
 this._dropShadowBehavior.set_Width(10); }
 //$addHandler(window, 'resize', this._resizeHandler);//$addHandler(window, 'scroll', this._scrollHandler);this._windowHandlersAttached = true;
},

结束语

可以在任何时候在web应用程序中使用 ModalForm 控件,在这里你可以选择在WinForms应用程序中使用模式表单。 例如可以使用 MultiView 控件通常使用的位置,以便向用户显示数据输入表单。 或者,它可以用来创建一个更友好和更具吸引力的消息框。 在任何情况下,我认为这个项目显示了如何扩展和修改 ASP.NET AJAX控件工具包中的控件。

演示说明

在演示项目中 Web.config 插件is使用基本主题which在 App_Themes 文件夹中定义了相关样式表和主题。 这就是模态形成的原因。 Web.config 还为AJAX控件工具包组件识别'ajaxtoolkit'前缀,以及 SmumCounty.WebControls 程序集的'sc'前缀。

由于 ModalForm 控件从 ASP.NET AJAX控件工具箱创建并使用 ModalPopupExtender 控件,因此这里控件只能使用启用的web项目,而控件所在的窗体也必须托管 ScriptManager 控件。

java中已经包含JavaScript文件 modalform.js 作为嵌入资源,因此不需要在使用控件的网站上作为单独的JavaScript文件来发布。

演示解决方案包括 上面 包含一个叫做AjaxControlToolkit的项目。 这是 ASP.NET AJAX控件工具包,但是删除了许多控件,使下载更小,并且对 ModalPopupExtender的更改如上面所示。

修订历史

  • November 15,2006 - 已经创建。
  • July年6 月- Revised修订为使用最新的AJAX控件工具箱。
  • August年,年,在页面上固定了一个与 Having 相关的小的Bug 与。

for  asp  asp-net  form  modal  
相关文章