SharpDOM，ASP.NET MVC 的新视图引擎

ASP.NET 社区

0/5 (0投票)

2013 年 10 月 11 日

CPOL

6分钟阅读

14281

简介 Sharp DOM 是一个用于 ASP.NET MVC 平台的视图引擎，允许开发人员使用

引言

Sharp DOM 是一个用于 ASP.NET MVC 平台的视图引擎，允许开发人员使用 C# 4.0 语言设计可扩展且可维护的动态 HTML 布局。还可以使用 Sharp DOM 项目在 MVC 框架之外生成 HTML 布局。

如今，有许多 Web 框架（包括 PHP、Java、.NET 等）允许借助某些模板引擎生成 HTML 布局。确实，这些框架有时非常强大和令人惊叹。唯一的问题是，这些模板引擎引入了自己的外部 DSL，这对于 .NET 开发人员来说并不原生。这使得使用这些模板引擎有点困难，甚至更甚。

Sharp DOM 项目允许您使用现代面向对象 C# 4.0 语言的所有强大功能，以**C# 代码的形式开发 HTML 布局**。您可以使用 C# 4.0 的功能，如继承、多态等。换句话说，HTML 布局的设计可以转化为**强类型 HTML** 代码的开发 :-)

Sharp DOM 的用法

只需从 CodePlex 网站的下载页面下载 DLL 文件 - http://sharpdom.codeplex.com/releases
在您的 ASP.NET MVC 项目中引用 **SharpDom.dll** 文件和 **SharpDom.Mvc.dll** 文件。
创建一个继承自 **SharpDomView<>** 类（其中泛型参数是视图模型）的类。
重写新创建类的 **CreateTagTree()** 方法，并在该方法内以 C# 代码的形式编写 HTML 布局。
在控制器中，创建视图模型并用适当的数据填充它。
编写一些管道代码，将 Sharp DOM 视图引擎嵌入 MVC 平台。

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();
        RegisterRoutes(RouteTable.Routes); 
        RegisterViewEngines(ViewEngines.Engines);
    }
    public static void RegisterViewEngines(ViewEngineCollection viewEngines)
    {
        viewEngines.Clear();
        viewEngines.Add(new SharpDomViewEngine());    }
}

转换示例

让我们看看我们将要从旧的纯 HTML 转换为强类型 HTML 的源 HTML 布局。

<html>
    <head>
        <title>Title of the page</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <link href="css/style.css" rel="stylesheet" type="text/css">
        <script href="/JavaScripts/jquery-1.4.2.min.js" type="text/javascript">
    </head>
    <body>
        <div>
            <h1>Test Form to Test</h1>
            <form id="Form1" type="post">
                <label>Parameter</label> =
                <input type="text">Enter value</input>
                <input type="submit" text="Submit !" />
            </form>
            <div>
                <p>Textual description of the footer</p>
                <a href="http://google.com">
                    <span>You can find us here</span>
                </a>
                <div>
                    Another nested container
                </div>
            </div>
        </div>
    </body>
</html>

这可以使用 C# 4.0 语言重写为：

html[
    head[
        title[ "Title of the page" ],
        meta.attr(http-equiv: "contenttype", content: "html", charset: "utf-8"),
        link.attr(href: "css/style.css", rel: "stylesheet", type: "css"),
        script.attr(href:"/JavaScripts/jquery-1.4.2.min.js", type: "javascript")
    ],
    body[
        div[
            h1[ "Test Form to Test" ],
            form.attr(id: "Form1", type: "post")[
                label[ "Parameter" ], "=",
                input.attr(type:"text", value: "Enter value"), br,
                input.attr(type: "submit", value: "Submit !")
            ],
            div[
                p[ "Textual description of the footer" ],
                a.attr(href: "http://google.com" )[
                    span[ "You can find us here"]
                ]
            ],
            div[ "Another nested container" ]
        ]
    ]
]

正如您所见，这两个列表都非常相关 - HTML 布局中的每一行都明确地对应于 C# 代码中的一行，反之亦然。换句话说，HTML 到 C# 的不匹配阻抗很小。另一方面，一些 C# 语言技能的开发人员可以轻松编写强类型 HTML 代码。现在可以使用 C# 编译器的所有优势：编译时检查、通过使用嵌入的 C# 代码对生成的 HTML 进行严格控制等。

高级主题

ViewModel
您可以将来自视图模型（您从控制器传递到视图）的值嵌入到 HTML 代码中。

视图逻辑
除了以 C# 形式表示的 HTML 标签外，您还可以使用所谓的“运算符”将一些逻辑嵌入到 HTML 代码中。

用户控件
您可以使用类似于 WebForms 的 UserControls 的方式将 HTML 布局分成小的部分。

母版页
您可以使用类似于 WebForms 中相同方法的主页方法。还可以动态地（在运行时）选择当前内容页使用哪个主页。

模板化用户控件
您可以使用模板化用户控件。在 WebForms 中，最近似的类比是 Repeater 的 TemplateItem 标签的布局。

可扩展性
还可以遍历生成的 HTML 标签树并使用 LINQ 进行修改。不仅可以遍历，还可以修改。

可维护性
当您的 C# 形式的 HTML 代码由另一位开发人员支持时，她可以使用 C# 的所有功能来扩展/覆盖/修改生成的 HTML 标签树，然后才能将标签发送到浏览器。开放/关闭方法正在发挥作用。

在 CodePlex 网站的文档中可以看到使用每个具体功能的示例 - http://sharpdom.codeplex.com/documentation

使用了哪些 C# 4.0 工件？

C# 工件

最常用的是**索引器** - 每次看到方括号时，您就会看到某个 C# 对象的索引器，并且该 C# 对象与相关 HTML 标签的名称相同。所以，如果您看到如下代码：

    h1[ "Test Form to Test" ]

您就知道，有一个名为“h1”的 C# 对象，并且该对象对应于 HTML 规范的 H1 标签。接下来，您可能会注意到在诸如以下句子中使用了可选的命名参数：

    form.attr(id: "Form1", type: "post")

还使用了 **params** 参数（所有参数都是同一种基本类型 - Tag）。

    body[ h1[...], form[...], div[...], div[...] ]

还有一个从 **string** 类型到 Tag 类的重载隐式转换运算符。

    label[ "Parameter" ], "=", input.attr(type: "text", value: "Enter value")

优点

从纯 HTML 代码切换到 C# 代码有几个优点：

编译时检查。
开发人员可以自由地在视图内直接使用任何表示层助手类/常量等。
可以维护已编写的 HTML 布局（以这种 C# 方式表示），使用 C# 的继承等功能（Sharp DOM 的所有方法都是公共的且是虚拟的）。
以树状结构呈现所有生成的 HTML 标签，因此开启了大量可能性：a) 使用 LINQ to Objects 在树中查找特定元素，b) 在子类中更改/修改/扩展找到的项目 - 甚至在继承类中。对于可维护性来说，这是相当不错的事情。

可维护性

HTML 布局的可扩展性和可维护性是 Sharp DOM 项目开发的主要原因之一。在我们编程生涯中，我们遇到了许多情况，当时我们有一个 ASPX 文件格式的 HTML 布局，但是

我们无法直接修改 ASPX 布局 - 因为将来有可能布局会被恢复到原始状态，
我们无法扩展代码隐藏代码 - 因为它被混淆或密封，或架构不当，不允许进行所需的更改。

这就是为什么我们花费大量时间思考 Sharp DOM 项目的架构，试图找到从可维护性角度来看最佳的代码形式。这就是我们在代码中所做的：

几乎每个方法/属性都是**公共且虚拟的**。它允许将来使用类继承进行维护（在订阅事件不足的情况下）。
**模板方法**设计模式被广泛使用（并且序列步骤是虚拟方法）。
每个标签都有一个唯一的**内部 ID**，可以重复使用以提高可维护性。
每个标签都有一些事件 - **OnPreRender** 和 **OnPostRender**。每个构建器（主页构建器、内容页构建器、用户控件构建器）都有相同的事件，加上 **OnPre/PostCreateTags** 和其他一些事件。所有这些事件都会通过标签树向上传播。因此，可以只订阅根标签来监听所有事件。
生成的 HTML 标签的整个树被分成**嵌套区域** - 不同构建器工作的区域。因此，可以轻松识别哪个代码生成了哪个 HTML。这可以简化在支持部门工作的开发人员的生活，他们必须以某种方式改进已设计的 HTML 代码，以满足已更改的业务需求。

作者

Anton Shelin - http://twitter.com/hodzanassredin
Vladimir Timashkov - http://vtimashkov.wordpress.com

请在 CodePlex 网站的讨论页面上留下您的评论和其他反馈 - http://sharpdom.codeplex.com/Thread/List.aspx

我们非常希望该项目对您有所帮助！