ASP.NET 2.0 Visio 自定义控件

• 下载源代码文件 - 21 Kb

引言

本文介绍了一种快速简单的方法，用于创建自定义 Web 控件，以在 ASP.NET 页面中使用 Internet Explorer 显示 Microsoft Visio 文件。

完全可以在不使用自定义控件的情况下编写代码来显示 Visio 图表，但是，手边有一个控件可以简化这个过程，以至于使用它的人只需将其拖放到页面上并在 IDE 中（或在运行时）设置文件路径属性即可将 Visio 图表带入页面。

此外，还可以直接在 Microsoft Internet Explorer 中打开 Visio 文件；为此，只需创建一个超链接并将其设置为直接导航到 Visio 文件即可。当然，Visio 文件也可以转换为网页或图像格式，并作为添加到网页的图像显示。使用自定义控件的唯一优势是它允许开发人员构建页面并将 Visio 文件作为内容添加到该页面，而不是仅仅将图表作为独立页面打开。此外，如果 Visio 图表转换为图像，则在控件中查看图表时，图像将不具有可用的控制选项（例如，滚动、平移等）。

入门

要开始，请打开 Visual Studio 2005 IDE 并启动一个新项目。在新项目对话框（图 1）中，在项目类型下，从“C#”下方选择“Windows”节点，然后在右侧窗格中选择“Web 控件库”模板。输入项目名称，然后单击“确定”。

项目打开后；右键单击解决方案并单击“添加”菜单选项，然后选择“新项”。当“添加新项”对话框出现时（图 2），选择“Web 自定义控件”模板，选择模板后，在名称字段中输入 *ShowVisio.cs*，然后单击“添加”关闭对话框。您现在可以删除最初从模板初始化项目时创建的默认 Web 控件。

此时，我们应该有一个打开的 Web 控件库项目，其中包含一个名为“*ShowVisio.cs*”的 Web 控件。在编写此项目的代码之前，最后一步是添加一个所需的引用。要添加此引用，请右键单击解决方案资源管理器中的引用文件夹，然后单击“添加引用”菜单选项。当“添加引用”对话框打开时，选择 .NET 选项卡，向下搜索列表，直到找到“*System.Design*”引用。选择此库，然后单击“确定”按钮。

图 1：Visual Studio 2005 新项目对话框

图 2：添加新项对话框

代码：显示 Vision 控件

导航回 *ShowVisio.cs* 文件，并在文件顶部添加下面突出显示的 import 语句

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.Design;

namespace IEWebObjects
{
    [ToolboxData("<{0}:ShowVisio
        runat="server"></{0}:ShowVisio>")]

    public class ShowVisio : WebControl
    {

我们现在可以添加使此控件正常运行所需的代码了。首先，我们需要创建一个私有成员变量；此变量将用于包含用户希望传递给控件的 Visio 图表文件的路径。要完成此步骤，请创建一个“声明”区域并输入以下变量声明

#Region "Declarations"
    Private mFilePath AsString
#End Region

变量声明后，我们需要提供一个公共属性以将控件属性公开给控件用户；为了完成此步骤，请创建一个“属性”区域并输入以下代码

#region "Properties"
    [Category("Source File")]

    true)>

    [Description("Set path to source file.")]

    [Editor(typeof(System.Web.UI.Design.UrlEditor), 
        typeof(System.Drawing.Design.UITypeEditor))]

    public string FilePath
    {
        get
        {
            return mFilePath;
        }
        set
        {
            if(value == string.Empty)
            {
                mFilePath = string.Empty;
            }
            else
            {
                int tilde = -1;
                tilde = value.IndexOf('~');

                if(tilde != -1)
                {
                    mFilePath = value.Substring((tilde
                                + 2)).Trim();
                }
                else
                {
                    mFilePath = value;
                }
            }
        }
    }   //

end FilePath property

#endregion 

请注意，在属性部分，代码指定了一个编辑器，并且进一步指定了编辑器为 URL 编辑器。将此属性添加到控件会向 IDE 指定如何编辑属性；在此实例中，当控件用户为控件设置文件路径属性时，属性网格将在文本框的右侧显示一个带有省略号的按钮。如果用户单击该按钮，IDE 将打开 URL 编辑器，并允许用户使用该编辑器导航到 SWF 文件并通过该编辑器的对话框设置文件路径属性。以这种方式设置的属性将持久化在控件用户的项目中。

还要注意，属性的 set 端会从发送给属性的任何文件路径的开头剥离波浪号字符；如果该值不包含波浪号，则该属性将设置为包含按其发送的路径。如果波浪号保留，则控件将无法正常工作，因为它将无法找到该文件。

此时，唯一剩下的就是定义控件将如何呈现。要完成此步骤，请创建一个“渲染”区域，并在此区域内，使用以下代码覆盖 `RenderContents` 子例程

#region "Rendering"
    protected override void RenderContents(HtmlTextWriter
                                           writer)
    {
        try
        {
            StringBuilder sb = newStringBuilder();
               
            sb.Append("<object classid=clsid:
                279D6C9A-652E-4833-BEFC-312CA8887857 
                id=vviewer ");

            sb.Append("codebase=
                    http://download.microsoft.com/download/  
                    4/5/2/452f8090-413f-408f-83c0-
                    edd66db786ee/vviewer.exe
                    Width = " + 
                    Width.Value.ToString() + " 
                    Height = " + Height.Value.ToString() + 
                    " > ");
               
            sb.Append("<param name=SRC
                    value=" + FilePath.ToString() + ">
                    ");
               
            sb.Append("<param
                    name=HighQualityRender value=1> ");
               
            sb.Append("<param name=BackColor
                    value=#000000> ");
               
            sb.Append("<param name=PageColor
                    value=#000000> ");
               
            sb.Append("<param name=PageVisible
                    value=1> ");
               
            sb.Append("<param name=AlertsEnabled
                    value=1> ");

            sb.Append("<param
                    name=ContextMenuEnabled value=1> ");

            sb.Append("<param name=GridVisible
                    value=1> ");

            sb.Append("<param
                    name=PropertyDialogEnabled value=1> ");

            sb.Append("<param
                    name=ScrollbarsVisible value=1> ");

            sb.Append("<param
                    name=ToolbarVisible value=1> ");

            sb.Append("<param
                    name=CurrentPageIndex value=1> ");

            sb.Append("<param name=Zoom value=-1> ");
               
            sb.Append("</object>");
               
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
               
            writer.Write(sb.ToString());
               
            writer.RenderEndTag();
        }
        catch
        {
            // with no properties set, this will render

            // "Display Visio Control"                   

              
            // in a box on the page

               
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
               
            writer.Write("Display Visio Control");
               
            writer.RenderEndTag();
        }  // end try-catch

    }   // end RenderContents


#end region

这段代码中有些地方值得注意；首先，您可以看到嵌入式对象标签是如何创建的，不难想象您可以使用相同的方法嵌入任何有效的对象。字符串构建器从控件中收集三个变量，文件路径传递给对象的源，并且控件的高度和宽度也被收集并传递给对象标签。其余参数在此演示中是固定的，但可以替换为附加属性，如果需要，也可以在设计时设置这些属性。

控件的高度和宽度是使用 Web 控件的高度和宽度属性设置的；没有添加其他属性来支持设置高度和宽度。在使用中，使用控件的开发人员可以将控件的高度和宽度属性设置为任何固定值或百分比值，渲染时，控件将展开以填充可用大小。

定义了对象标签的内容后，唯一剩下的细节是将控件放置在渲染页面上。这通过定义字符串构建器后的三行代码完成

            
writer.RenderBeginTag(HtmlTextWriterTag.Div)
writer.Write(sb.ToString())
writer.RenderEndTag()

在此示例中，HTML 编写器设置为放置一个开 Div 标签，在 Div 内，字符串构建器中定义的对象被写入渲染页面，在最后一行，Div 被关闭。

控件现在已完成。在测试控件之前，请重新生成项目。完成此操作并修复所有遇到的错误后，即可测试控件。要测试控件，请向当前打开的 Web 控件库项目添加一个新的 Web 站点项目。创建测试 Web 站点后，通过右键单击解决方案资源管理器中的 Web 站点解决方案并选择“设置为启动项目”菜单选项，将测试项目设置为启动项目。接下来，在 Web 站点解决方案中找到 Default.aspx 页面，右键单击此页面并选择“设置为启动页”菜单选项。

打开 *Default.aspx* 页面进行编辑。在工具箱中找到新创建的控件（它应该在顶部），然后将 *ShowVisio* 控件拖到页面上（图 3）。

图 3：工具箱中的自定义控件

您现在可以单击“*ShowVisio*”控件并设置其高度、宽度和文件路径属性。如果您正在使用下载中包含的演示项目，该文件夹中有一个 Visio 文件夹，其中包含两个 Visio 图表。您可以将文件路径属性设置为指向其中一个文件。

演示项目还包含一个超链接，您可以将 `NavigateUrl` 属性指向另一个 Visio 图表。Internet Explorer 会在新网页中打开 Visio 图表，但该网页将只包含 Visio 图表。如果您只想显示一个纯图表而不控制包含该图表的网页的外观，那么这是一种更简单的方法。如果您想在格式化的页面中显示图表，那么使用自定义控件是更好的方法。

构建应用程序并运行它；您现在应该会看到在自定义控件中显示的 Visio 图表（图 4）。

图 4：在自定义控件中显示的 Visio

摘要

此示例项目演示了一种在嵌入到网页中的自定义控件中显示 Visio 图表的方法。可以直接从 Internet Explorer 导航到 Visio 图表，如果可能，Internet Explorer 将尝试在 Visio 查看器控件中呈现该图表。然而，此功能在非 Microsoft 浏览器中不受支持，当 FireFox 等浏览器遇到图表时，它们会提示用户下载文件，然后可以在本地查看该文件，但任何安装了 Visio 的用户（在 Internet Explorer 中）都可以直接查看。

虽然 Internet Explorer 可以导航并显示 Visio 文件；但将 Visio Viewer 控件封装为自定义控件，允许使用该控件的开发人员选择将控件嵌入到格式化且填充内容的网页中。