试用 DevExpress DXv2 v2012 MVC 扩展及其第一印象

几个月前，我写了一篇关于一个完全基于 jQuery 构建的组件库的帖子，但如果你不喜欢写大量的 JavaScript，更喜欢尽可能多地用服务器端代码编写，那么今天我将写一些我最近一直在关注的东西：新的 DevExpress DXv2 v2012 库，特别是它的MVC 扩展。

安装和初次印象

让我们从安装开始：它非常简单，步骤不多。它安装了所有组件，并安装在所有版本的 Visual Studio 中（包括 VS2012 RC）。很高兴看到各种安装屏幕的 UI 上有漂亮的 Metro 风格：看来未来几年我们将随处可见受 Metro 启发的 UI。

上面你看到两个截图：第一个是前面提到的安装屏幕，而第二个带我到安装对话框关闭时发生的情况：你会得到一个非常精心设计的入门屏幕，它链接到示例应用程序和演示页面。真正好的是，不像我过去使用过的其他产品，当你点击一个端到端示例应用程序或一个演示页面时，一个 ASP.NET 开发服务器（又名 Cassini）实例会启动，你可以立即开始使用应用程序并查看演示（在那里你可以看到工作演示以及相关的代码）。

要了解该库 2012 版本中引入的所有新功能，您可以阅读DXperience 12.1 新功能长达 60 页的详细说明，并观看简短的概述视频。

第一步

当你第一次打开 Visual Studio 并尝试创建一个新项目时，你会在“文件-新建”对话框中注意到新的 DevExpress 项目模板，通过选择“Web 项目”组，你将获得 7 个项目模板，其中 4 个用于 Web Forms，3 个用于 MVC：项目模板名称不言自明，它们还为你提供了一个入门项目向导。其中一个 DevExpress Web 项目模板为你提供了一个空的 ASP.NET MVC 项目，其中包含使用 DevEx MVC 扩展的所有引用，最后一个为你提供了一个类似 Outlook 的界面来构建一个功能丰富的网站。有趣的项目模板是第一个，“Web 应用程序”：它不是简单地创建项目，而是打开一个自定义的“向导”对话框（当然是 Metro 风格），通过允许你选择页面布局（标准、空、Outlook 风格或可自定义）、视图引擎（Web Forms 或 Razor）、主题和一些其他底层设置来帮助你设置项目。

如果您选择“可自定义”布局，您基本上会获得带有自定义窗格和控件的 Outlook 样式布局。空布局为您提供与空项目模板完全相同的内容，而标准布局则足以让您立即开始一个运行的项目。您还可以选择要针对哪个版本的 ASP.NET MVC（3 或 4），它为您提供与您使用官方 MVC 项目模板时相同的所有脚本和引用，这也很不错。唯一的区别是它不使用 Nuget 来引用所有各种引用的库（jQuery、jQuery UI、Knockout、Modernizer 等），因此如果您想及时了解最新版本，您必须手动下载，或者通过 Nuget 下载它们（根据需要）。

让我们看一些代码

正如我一开始所说，DXperience 库使用 ASP.NET MVC HTML 助手扩展方法动态地向您的页面添加 JavaScript，这样您就不必将 JavaScript 代码与 C# 代码混合。就我个人而言，我喜欢编写 JavaScript 代码，但我不得不承认，有时当您必须将来自页面模型的值传递给 JS 构造函数或方法时，JS 和 C# 的混合有点太多了，我通常会编写自己的 Html 扩展方法。

设置引用

由于 JavaScript 对于客户端交互是必需的，您需要包含对 JavaScript 脚本和 CSS 文件的引用。要添加它们，您所要做的就是使用其中一个 MVC 扩展，并列出您将在应用程序中添加的所有“MVC 扩展”。

    @Html.DevExpress().GetStyleSheets( 
    new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout }, 
    new StyleSheet { ExtensionSuite = ExtensionSuite.Editors }, 
    new StyleSheet { ExtensionSuite = ExtensionSuite.HtmlEditor }, 
    new StyleSheet { ExtensionSuite = ExtensionSuite.GridView }, 
    new StyleSheet { ExtensionSuite = ExtensionSuite.PivotGrid },
    new StyleSheet { ExtensionSuite = ExtensionSuite.Chart },
    new StyleSheet { ExtensionSuite = ExtensionSuite.Report },
    new StyleSheet { ExtensionSuite = ExtensionSuite.Scheduler }
)
@Html.DevExpress().GetScripts( 
    new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout }, 
    new Script { ExtensionSuite = ExtensionSuite.HtmlEditor }, 
    new Script { ExtensionSuite = ExtensionSuite.GridView }, 
    new Script { ExtensionSuite = ExtensionSuite.PivotGrid },
    new Script { ExtensionSuite = ExtensionSuite.Editors }, 
    new Script { ExtensionSuite = ExtensionSuite.Chart },
    new Script { ExtensionSuite = ExtensionSuite.Report },
    new Script { ExtensionSuite = ExtensionSuite.Scheduler }
)

这将生成一个长 URL，用于检索包含所有所需文件的压缩和捆绑脚本。

<link rel="stylesheet" type="text/css"
	href="https://codeproject.org.cn/DXR.axd?r=[here a 100 char long hash]-PCKT4" />
<script id="dxis_1000344687" src="https://codeproject.org.cn/DXR.axd?[here a 500 char long hash]-lDKT4"
	type="text/javascript"></script>
<script id="dxss_1816643409" type="text/javascript">

这种动态交付是通过 DevExpress 自定义 `ASPxHttpHandlerModule` 实现的，它主要提供性能和服务器端回调处理能力。

添加组件

该库包含许多有趣的组件，大多是“企业级”组件和元素，例如无处不在的可编辑/可排序/可过滤网格、各种图表、HTML 所见即所得编辑器、调度器组件（类似 Outlook 日历的组件）、各种 UI 组件（可停靠面板、分割面板、选项卡、菜单、手风琴、树、模态对话框）。它还有一些更通用的数据编辑器，用于美化和向常用下拉列表、文本框、单选按钮等添加验证。在接下来的几段中，我将展示使用 MVC 扩展的整体感受。

例如，要设置一个带掩码的输入文本框，您需要这样做：

@Html.DevExpress().TextBox(
    settings => {
        settings.Name = "PhoneNum";
        settings.Width = 170;
        settings.Properties.MaskSettings.Mask = "+00 (999) 000-0000";
        settings.Properties.MaskSettings.IncludeLiterals = MaskIncludeLiteralsMode.None;
    }
).GetHtml()

因此，您指定 HTML 字段的名称（请记住，在 ASP.NET MVC 中，字段名称用于模型绑定以获取控制器值），然后指定该控件的特定设置（在本例中为掩码和其他特定于掩码的选项）。

如果您想用视图模型中的值预填充文本框，您只需将控件“绑定”到模型本身即可。

@Html.DevExpress().TextBox(...).Bind(Model.PhoneNum).GetHtml()

但更简单的是，使用现成的编辑器模板，只需调用 EditorFor，让所有配置都隐藏起来。如果您使用 DevExpress 项目模板，您会获得一些这样的编辑器模板（布尔型、日期时间型、十进制型、多行文本型、字符串型、密码型），但如果您愿意，您可以轻松地制作自己的编辑器模板，指定所有您需要的设置。

例如，如果我们想制作一个可重用的 PhoneNum 控件，我们只需创建一个 Editor 模板，然后在视图模型的定义中指定该特定字符串的类型为 PhoneNum。

首先创建一个 PhoneNum.cshtml 文件并将其放入 Views\Shared\EditorTemplates 文件夹

@model String

@Html.DevExpress().TextBox(s => {
    s.Name = ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("");
    s.Width = 170;
    s.Properties.MaskSettings.Mask = "+00 (999) 000-0000";
    s.Properties.MaskSettings.IncludeLiterals = MaskIncludeLiteralsMode.None;
}).Bind(Model).GetHtml()

然后，在视图模型类中，用 UIHint 属性修饰该属性。

public class HomeViewModel
{
    [UIHint("PhoneNum")]
    public String PhoneNum { get; set; }
}

最后在视图中调用 EditorFor 方法

@model Models.HomeViewModel
<div class="editorContainer">
    @Html.EditorFor(m=>m.PhoneNum)
</div>

通过这种方式，您可以轻松重用不同的编辑器控件，而无需每次都编写所有配置。这是一个简单的示例，但相同的概念和想法可以应用于所有其他 MVC 扩展。

结论

整套组件和整体体验都经过深思熟虑，从初次接触新项目模板开始。此外，可用的文档在解释所有各种选项和自定义选项方面也非常出色。

从技术角度来看，代码有点 WebForms 的味道，但我不得不承认这种方法可能也有其好处：它很容易吸引 WebForms 开发人员，而且“原生”MVC 开发人员经过一些工作，也可以编写他们需要的编辑器模板，然后过上幸福的生活，而无需每次需要一个控件时都编写所有这些行代码。这些原生的 DevExpress MVC 扩展功能丰富，并提供了一些其他库中没有的扩展，例如 PivotGrid 和 Docking Suite。

如果这种复杂性对于较简单的控件来说显得过多，那么对于最复杂的控件（如 Scheduler 或 Pivot Grid），与直接用 JavaScript 实现相同功能所需的代码量相比，“冗长”几乎消失了。而且 Scheduler 组件真的很棒：现在我想构建一些需要那种 UI 的东西，仅仅因为我想使用它。

材料披露：我免费收到了上述一个或多个产品或服务，希望能在我博客中提及。无论如何，我只推荐我自己使用并相信我的读者会喜欢的产品或服务。我根据联邦贸易委员会的 16 CFR，第 255 部分：“关于广告中使用代言和推荐的指南”进行披露。

相关链接

• 介绍 Wijmo，一个功能丰富的基于 jQueryUI 的小部件库 (2/29/2012)
• ASP.NET MVC 的历史，到目前为止 (6/29/2011)
• Subtext 2.0 中的新功能：CSS 和 JS 优化，支持皮肤和移动设备 (8/9/2008)
• 暑期学习：Node.js 入门 (8/31/2011)
• ASP.NET MVC 2 Wrox Blox 新功能已可购买 (5/21/2010)