自定义对话框控件

分享于 

9分钟阅读

Web开发

  繁體

Sample Image

介绍

本文提供了一个漂亮的Office 外观对话框,用于 ASP.NET 2.0. 我在. NET 2.0中创建模板化控件时创建了这里控件。 代码使用定制设计器,以及 System.Web.UI 命名空间中的新 GetWebResourceUrl 方法。 控件是使用AJAX行为创建网页的有用补充,而且它看起来很不错。

DialogBox类

类图单击以放大。

DialogBox 类具有以下属性:

  • Resizable - 确定用户是否可以调整控件的大小
  • Moveable - 确定用户是否可以移动控件
  • InitialDisplayStyle - a enum 描述加载页时控件的状态
  • Text - 对话框的标题

DialogBox 类有两种方法:

  • CreateChildControls - 从基类重写。 应在这里方法中创建复合控件的所有子控件。 运行时调用该方法来呈现控件。
  • GetDesignTimeHtml - 设计器使用的内部方法,用于强制设计时控件的正确呈现。

为了呈现必需的JavaScript,并且 Tagkey 属性以确定的形式呈现,控件还重写基本 OnInit 方法和 Tagkey 属性。 <div> 标签。

我已经选择了从 CompositeControl 类中删除我的DialogClassCompositeControl 类是. NET 2.0中的一个新类,专门创建用于创建具有子控件的自定义控件。 当控件使用者尝试使用 FindControl 方法和 Controls Collection 时,它将负责确保创建子控件。 它还实现了 INamingContainer 接口,确保所有子控件都具有惟一的ClientIDs。

模板化控件的特殊内容

如果使用过 ASP.NET,你可能已经使用过模板化控件,可能不知道它。 DataGrid 控件 of Repeater 控件或者 DataList 控件是模板化控件的主要示例。 模板控件允许开发人员在模板化控件中呈现自定义的HTML控件甚至它自己的ASP.NET 控件。 创建模板化控件的步骤有两个步骤:

  • 公开 ITemplate 类型的public 属性,如下所示:
publicclass DialogBox : System.Web.UI.WebControls.CompositeControl
{
 private ITemplate containerTemplate;
 private Control containerControl;
 [Browsable(false),
 PersistenceMode(PersistenceMode.InnerProperty)]
 publicvirtual ITemplate ItemTemplate
 {
 get {return containerTemplate;}
 set {containerTemplate = value;}
 }
}
  • 在重写的CreateChildControls 方法中创建模板:
containerControl = new Control();if (ItemTemplate!= null)
{
 ItemTemplate.InstantiateIn(containerControl);
}else{
 containerControl.Controls.Add(new LiteralControl(Text));
}

iPhone 7 还没出来,我们已经在iPhone上获取细节 8,或者不管是想到下一步。 其它 - 代码 block 只有在用户创建对话框模板之前,控件才会显示某些东西。 如果未创建模板,则控件将在内容区域中呈现标题。

使用 GetWebResourceUrl

ASP.NET 中一个很酷的新特性是能够创建将编译成控件本身的资源。 ASP.NET 2.0附带了一个新的HTTP处理程序" WebResource.axd"。 这种方法与基于xml的Trace.axd 命令行处理程序类似,但是该处理程序可以用于访问控制项目中的任何 static 资源,例如图像。JavaScript文件。声音或者你希望编译到你的项目中的任何其他资源。 这种新特性使得控制开发人员更容易,因为外部文件的版本化变得更容易。 使用 GetWebResourceUrl 有些棘手,并且涉及三个步骤。

首先,将你的资源添加到项目。 在 Properties Properties的属性窗格中设置生成操作嵌入资源。

其次,将你的资源添加到项目的AssemblyInfo.cs 文件中,如下所示:

[assembly: WebResource("WebControls.Resources.header_decoration.gif", "image/gif")]

WebResource 属性的第一个参数是资源的完全限定的NAME。 MSDN文档没有提到,但你必须将文件名( header_decoration.gif ) 与程序集 NAME ( WebControls ) 和它驻留在( 资源 ) 中的文件夹一起使用。 第二个参数是资源应该返回到浏览器的MIME类型。

第三,向页面添加代码以生成访问资源所需的特殊 URL。

imgHeaderDeco = new Image();
imgHeaderDeco.ImageUrl = Page.ClientScript.GetWebResourceUrl(
 typeof(DialogBox), 
 "WebControls.Resources.header_decoration.gif");

在网页上生成的输出应该类似于以下内容:

<imgsrc="http://www.codeproject.com/WebSite2/WebResource.axd?
 d=E1Khv7nbIwG5fSPcsXnzTP4Bukco5S0XUA0FBsHzjTskoXfzMVF14ZAlK7adsv
 PsJgALtyt5nqpSESM7tDVIZA2&t=632651830942047145"/>

设计器

DialogDesigner 类是从 CompositeControlDesigner 类派生的。 基类是. NET 2.0的另一个新添加,它使得创建模板化控件比在. NET 框架的早期版本中容易得多。 为了获得控件的正确设计时间行为,设计器是必需的。

使用代码

使用代码非常简单;只需将控件添加到工具箱,将它的拖到网页上,然后运行并运行该控件。 为了从设计视图设置模板,单击对话框右侧右侧的小箭头,然后选择"编辑模板"。 或者,在源视图中,输入类似于这里( 以粗体文本标记)的内容:

<fwc:DialogBoxID="DialogBox1"runat="server"Height="33px"Width="202px"Resizable="True"Text="A custom dialogbox"InitialDisplayState="ShowingDialog"><ItemTemplate><center><b>Hello, world!</b></center></ItemTemplate></fwc:DialogBox><ahref="javascript:ShowDLG('<%=DialogBox1.ClientID%>'">Show dialog</a><ahref="javascript:HideDLG('<%=DialogBox1.ClientID%>'">Hide dialog</a>

inside的ItemTemplate 标记,你可以输入任何有效的HTML,以及 ASP.NET 服务器控件。 注意:使用 ASP.NET 服务器控件,可以使用对话框实例的FindControl 方法找到它们。 它们还将在 postback 期间保持状态。 你也可以从代码 Fragment 上面 中看到,对话框JavaScript有两种方法: 用于显示对话框的ShowDLG,以及用于隐藏对话框的HideDLG

进一步开发

控件的状态或者显示状态在回发之间不保持。 我的意图是在ajax页面上使用控件,所以 postback 不是一个问题。 然而,我考虑在未来的版本中实现它。

控件被测试并在 IE 6和 Mozilla 1.5上工作。 它在Mozilla中没有正确呈现 100%,但我还没有对它进行研究。

如果我能找到时间,我想添加一些JavaScript功能,特别是使用JavaScript代码操作控件。

我刚开始看皮肤,所以目前这个控制并不是很灵活。

我也不太喜欢设计师。 虽然控件在设计器中始终处于打开状态,但由于它在设计视图中的其他控件处于打开状态,因此它正确显示控件。 一种解决方案是将动作谓词( 显示/隐藏控件) 添加到设计器类,并根据动作谓词的选择呈现正确的HTML或者 block ( 例如像usercontrol是在 ASP.NET 1.0下呈现的)。

如果你希望在未来的版本中看到你希望看到的特性,请 让我知道,我就会知道我能做什么。

Points of Interest

如果你对设计自定义控件感兴趣,我建议阅读kohtari的书 这是关于如何创建定制控件的很好的。

历史记录


控制  BOX  DIA  对话框  
相关文章