滚动你自己的ASP.NET 图表控件

分享于 

15分钟阅读

Web开发

  繁體

Dynamically generated chart for the internet.

<-------------------------------步骤 3 ---------------------------> <--添加文章文本。 请使用简单格式(

,

等) -->

介绍

你曾经想要构建一个自定义的web控件,但一旦开始导航MSDN信息海洋,就失去了信心? 想要构建一个web控件,只是想知道你不知道从哪里开始和更糟糕,但是在internet上没有综合的例子。 如果你遇到任何或者所有这些情况,请坐下来放松 ! 贯穿本文我将详细介绍构建定制web控件并将它的部署到你的web应用程序中的主要"gotchas"。

关于网页控件

Web控件应该在考虑到以下方面考虑:减轻重复。复杂的任务并向网页中添加新功能。 经过大量的资源,我发现. NET 控件可以在许多不同的变体中实现 ! 简而言之,web控件可以分为 6个逻辑类型( 类):

  • HTML 服务器控件
  • Web 服务器控件
  • Web验证控件
  • Web 用户控件
  • 复合控件S
  • 自定义控件

因为我们将关注自定义控件,所以我将限制对所有它的他类型的基本定义的讨论。

定义的网页控件

web服务器控件 HTML服务器控件是包含属性的HTML元素,这些属性使它们可以在web服务器上可见和可以编程。 另外,HTML控件通过 public 属性和样式映射到HTML元素。

Web服务器控件:服务器控件旨在提供快速。简便的方式来向网页添加功能。 这些控件提供了向上和向下的浏览器支持。 up浏览器的核心要求是:ECMAScript ( JScript,JavaScript ) 支持,HTML版本 4.0遵从性,支持微软文档对象模型( MSDOM ) 和级联样式表( CSS ) 支持。 此外,这些控件可以用于构建更复杂的服务器控件。

Web验证控件:验证控件为你提供了一种方法,在Web或者HTML服务器控件中检查用户输入。 将验证控件附加到输入控件以测试用户为输入控件输入的内容。

Web用户控件: 用户控件创建类似于网页窗体页。 这些控件可以嵌入其他网页窗体页面,并且是创建菜单。工具栏和其他可以重用元素的简单方法。 这些控件类型始终以. ascx的扩展结束,并且必须在每个使用该控件的项目中单独包含。 Web用户控件在运行时动态编译。

复合控件:复合控件结合两个或者多个现有控件的功能,可以公开自定义属性和事件。 实现的基本要求:必须重写从控件继承的CreateChildControls方法,并且必须为唯一命名约定实现 System.Web. UI.INamingContainer 接口。

自定义控件:自定义控件完全编写,预编译代码(. dll ) 是动态网页布局的不错选择。 自定义控件的主要优点是设计时支持,包括: 工具箱集成,可视化设计器支持和与属性网格的接口。 这些控件可以安装到全局程序集缓存( GAC ),这将允许多个应用程序共享单个控件。

高级选择- 输入 System.Web. 用户界面

System.Web.UI 命名空间提供了类和接口,允许你创建Web应用程序中的ASP.NET 服务器控件和页面。 命名空间包括控件类,它提供了所有服务器控件,无论是HTML服务器控件,Web服务器控件还是用户控件。 它还包括页面类,每当对Web应用程序中包含的. aspx 文件发出请求时自动生成该页面类。 从这两种类都可以继承。 还提供了提供数据绑定功能的服务器控件的类,可以保存给定控件或者页的视图状态。"

我们将重点讨论的这两个类是 UserControlWebControls。 用户控件包含在 ASP.NET Web窗体页面中,并提供了一种简单的方法来捕获常用的Web UI。 它们被实例化并以类似于页面对象的方式缓存。 但是,与页不同,不能独立调用用户控件。 只能 从 包含 它们 的 页 或 其他用户 控件 调用 它们.

WebControl 类提供所有Web服务器控件共有的属性。方法和事件。 你可以通过设置 this class定义的属性来控制Web服务器控件的外观和行为。 例如控件的background 颜色和字体颜色分别使用BackColor和ForeColor属性控制。 在可以显示边框的控件上,通过设置 voiceover。边框和边框属性来控制边框宽度。边框样式和边框颜色。 可以使用高度和宽度属性指定Web服务器控件的大小。

可以通过设置某些属性来指定控件的行为。 可以通过设置启用的属性来启用和禁用控件。 选项卡顺序中控件的位置是通过设置TabIndex属性来控制的。 可以通过设置工具提示属性来为控件指定工具提示。

已经足够了它是怎样工作的? !

现在所有的基础都已经不存在了,让我们来检查我为 WebChart 实现的类。 WebChart 控件继承自 System.Web.UI.WebControls.WebControl 通过继承此类,我实现了"免费功能",如高度,宽度,背景色和前景色。 考虑到这是一行代码,这 ! 另外,我将重写MyBase的Render方法以显示用户绘制的GDI+ 图表。 下面的代码示例演示如何从 System.Web.UI.WebControls.WebControl:

<DefaultProperty("Type"), _
 ToolboxData("<{0}:WebChart runat="server"></{0}:WEBCHART>"), _
ParseChildren(True, "WebChartItems"), ToolboxBitmapAttribute(GetType(Bitmap))> _PublicClass WebChart : Inherits System.Web.UI.WebControls.WebControl
...EndClass

上面 代码 block 比较容易理解,但是类语句的所有内容是什么? 这些被称为属性。 当你为运行时编译代码时,它将转换为by中间语言( MSIL ) 并将 inside 设置为可以移植的可以执行( PE ) 文件。 属性允许您将额外的描述资讯置入中继资料,其可使用执行阶段反映服务来撷取。 当你声明从 System.Attribute 派生的特殊类的实例时,编译器会创建属性。 ToolBoxData属性指定控件放置在 ASP.NET 网络窗体上时的命名方式。 ParseChildren属性必须标识你将在它的中保存你的Collection的索引属性。 ToolboxBitmap属性用于为控件提供自定义 icon。 icon 必须为 16 x 16,并且限制为 16颜色。 位图的左下角用作透明色。 最后,项目的icon 设置为嵌入资源,并命名为与 root 命名空间相同。

深入了解 WebChart 类,我们将查看枚举和属性:

PublicEnum ChartType
 Pie = 0 Bar = 1EndEnum...'Chart layout fields Private mChartType As ChartType = ChartType.Bar'Scalar Property<DefaultValue(GetType(ChartType), "Bar"), Category("Chart Common"), _
 Description("Type of chart to generate.")> _PublicProperty Type() As ChartType
 GetReturn mChartType
 EndGetSet(ByVal Value As ChartType)
 mChartType = Value
 EndSetEndProperty

标量属性( 上方上方): 注意 public 属性类型被声明为ChartType类型。 这将允许属性类型包含填充在属性网格中的'简体中文'值填充的下拉框。 另外,通过将mChartType属性初始化为 ChartType = ChartType.Bar,你可以有效地为属性分配默认值 ! 属性默认值设置为通过反射获取类型 ChartType,并将该值设置为"栏吧"。 在属性网格中,默认值不是粗体,从默认属性更改的值将显示为粗体文本。 类别属性确定这里属性将与PropertyGrid关联的类别。 最后,描述属性用于为开发人员提供属性的概念。

<DefaultProperty("Type"), _
 ToolboxData("<{0}:WebChart runat="server"></{0}:WEBCHART>"), _
ParseChildren(True, "WebChartItems"), ToolboxBitmapAttribute(GetType(Bitmap))> _PublicClass WebChart : Inherits System.Web.UI.WebControls.WebControl'Chart data fields - All TypesPrivate mWebChartItems AsNew WebChartItemCollection(Me)'Indexed Property<Category("Chart Common"), _
DesignerSerializationVisibility(DesignerSerializationVisibility.Content), _
PersistenceMode(PersistenceMode.InnerDefaultProperty), _
Description("Supply data values for selected chart.")> _PublicReadOnlyProperty WebChartItems() As WebChartItemCollection
 GetIf mWebChartItems IsNothingThen mWebChartItems = New WebChartItemCollection(Me) 
 EndIfReturn mWebChartItems 
 EndGetEndProperty'This Class Handles WebChart Collection  <Serializable()> _
 PublicClass WebChartItemCollection : _
 Inherits System.Collections.CollectionBase
 Private mOwner As WebChart
 PublicSubNew()
 MyBase.New()
 EndSubPublicSubNew(ByVal Owner As WebChart)
 MyBase.New()
 mOwner = Owner
 EndSubPrivateProperty Owner() As WebChart
 GetReturnCType(mOwner, WebChart)
 EndGetSet(ByVal Value As WebChart)
 mOwner = Value
 EndSetEndPropertyDefaultPublicReadOnlyProperty Item(ByVal index AsInt32) As WebChartItem
 GetReturnCType(List.Item(index), WebChartItem)
 EndGetEndPropertyPublicFunction Add(ByVal Item As WebChartItem) AsIntegerReturn List.Add(Item)
 EndFunctionEndClassEndClass

索引属性:由于索引属性WebChartItems只控制 Collection 对象的返回,所以它是只读的。 记住,WebChartItem 是通过PropertyGrid或者代码添加到 WebChartCollection 中的。 这允许将 static 值添加到控件中,或者使用两个图表可以使用数据集或者XML源动态填充两个。 可以在这里属性上检查两个新属性: DesignerSerializationVisibility - 这里属性将控制如何保持索引属性的数据,PersistenceMode - InnerDefaultProperty指定持久化数据将存储为嵌套元素。

将WebChart添加到工具箱

为了使用 WebChart 控件,首先必须构建它。 在编译控件之后,必须在 ASP.NET Web应用程序项目中引用它。 在引用控件之后,转到你的工具箱并右键单击。 选择自定义工具箱并转到. NET 选项卡并浏览你编译的. dll。 在选择. dll 之后,你将看到 icon ( 参见文章顶部的图片)。 如果你不确定如何执行 上面,请查看 VS.NET 帮助文档。

示例用法

在设计时添加控件是直接的,像任何本机 ASP.NET 控件一样使用。 但是,你必须将以下XML标记直接插入到 Web.Config 文件中,在打开 <SYSTEM.WEB> 标记( 请参见下面)。 这里标记允许 ASP.NET 通过应用程序变量跟踪WebChart图像。 正确的WebChart操作需要 <httpModules> 标记。 下面的代码 block 演示如何使用 ADO.NET vmkernel对象动态创建饼型类型 WebChart:

必需:将以下 httpModules XML放在本地 Web.config 中。

<SYSTEM.WEB>
<httpModules>
<添加 name="webchartimagestream"type="blong。webchartimagestream。blong"/>
</httpmodules>
<SYSTEM.WEB/>

Imports System.Data.SqlClientImports blong.WebControlsProtectedSub MakeChart()
 ' Define ObjectsDim Chart As WebChart
 Dim i AsInt32Dim cn AsNew SqlConnection(Session.Item("strConn"))
 Dim cmd AsNew SqlCommand("WebHitsPerMonth", cn)
 Dim dReader As SqlDataReader
 cn.Open()
 cmd.CommandType = CommandType.StoredProcedure
 dReader = cmd.ExecuteReader(CommandBehavior.CloseConnection)
 ' Override Default Constructor' Copyright Symbol: Hold ALT + 0681 Chart = New WebChart()
 With Chart
. ID = "CodeChart". Type = WebChart.ChartType.Pie
 ' Override WebChartItems for Pie DataDim highVal AsSingleDim ExplodeIndex AsInt32While dReader.Read
 IfNot IsDBNull(dReader("HitYear")) Then. WebChartItems.Add(New WebChartItem(dReader("HitMonth") & _ 
 "" & dReader("HitYear"), dReader("HitMonthCount"), False))
 If dReader("HitMonthCount")> highVal Then highVal = dReader("HitMonthCount")
 ExplodeIndex = i - 1EndIfEndIf i += 1EndWhile'Explode High Value. WebChartItems(ExplodeIndex).Explode = True. ShowLegend = True. Diameter = WebChart.PieDiameter.Larger
. ExplodeOffset = 25. Rotate = 70. Thickness = WebChart.PieThickness.Medium
. Title = "My Run Time Chart"'Specify output format. Format = WebChart.ChartFormat.Png
 EndWith' Add control to web formMe.Controls.Add(Chart)
 EndSub

WebChart片尾

特别感谢在eSense软件。开发和咨询方面的Mohammed,帮助 HTTP HTTP流,让WebChart直接在没有额外外部网页的情况下直接绘制 charts。

WebChart历史记录

  • 版本 1.1 (1/1/2003)
    - 不再依赖隐式类型强制转换。
    - 选项显式/严格启用。
    - 删除不必要的代码。
    - 添加支持图像流的代码,不再将图像写入磁盘。
  • 版本 1.0 (10/24/2002)
    - 初始版本

控制  asp  asp-net  CHAR  chart