VS跨平台开发框架哪家强？一招教你在XAF应用中使用DevExtreme Widgets visual studiodevexpress
下载DevExtreme v20.1完整版
系统背景
- 平台：Frameworks (XAF & XPO)
- 产品：eXpressApp Framework
何时使用DevExtreme小部件？
DevExtreme小部件主要针对ASP.NET、SPA或ASP.NET MVC应用程序，尽管使用eXpress App Framework创建的应用程序有些不同，但有些用户可能希望在特定情况下使用这些小部件，这里有一些例子：
- 如果ASP.NET控件的功能和Client Side Events不足以实现所需级别的交互性，则可以使用сustom UserControl和DevExtreme小部件来构建视图。
- 当您想要显示从第三方Web服务检索到的数据时，客户端小部件可以帮助您避免在服务器端处理此数据。 可以使用AJAX技术直接从Web浏览器中调用Web服务，DevExtreme小部件可以更好地支持这种情况。
出于其他原因，您可能希望使用DevExtreme小部件，并且本文介绍如何将它们嵌入XAF视图中。
如何引用所需的客户端库？
尽管XAF应用程序会自动注册DevExtreme脚本（XAF Web UI使用某些DevExtreme小部件，XAF模块使用其他小部件），但我们建议您手动注册DevExtreme脚本，以避免在将项目升级到较新版本的DevExpress组件时出现兼容性问题。 为此，请通过在Web.config文件的DevExpress部分中添加以下代码来禁用客户端库的自动嵌入。
16.2+：
XML
<devExpress> <resources> </resources> </devExpress>
16.1或更高版本：
XML
<devExpress> <settings embedRequiredClientLibraries="false" />
从相应的网站下载必要的JavaScript文件并将其添加到您的Web项目中（您可以使用NuGet软件包管理器来实现此目的），将对JavaScript文件的引用添加到Default.aspx文件的HEAD部分中。
ASPx
<link rel="stylesheet" type="text/css" href="Content/dx.common.css" /> <link rel="stylesheet" type="text/css" href="Content/dx.light.css" /> <script type="text/javascript" src="Scripts/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="Scripts/jquery.validate.min.js"></script> <script type="text/javascript" src="Scripts/jquery.validate.unobtrusive.min.js"></script> <script type="text/javascript" src="Scripts/jquery.unobtrusive-ajax.min.js"></script> <script type="text/javascript" src="Scripts/globalize/globalize.js"></script> <script type="text/javascript" src="Scripts/dx.webappjs.js"></script> <script type="text/javascript" src="Scripts/dx.chartjs.js"></script>
Embedding Third-Party Libraries中提供了常规ASP.NET组件所需的客户端库列表，DevExtreme小部件所需的库在DevExtreme的在线文档中进行了描述：DevExtreme Dependencies
CSS:
如果要使用DevExtreme UI Widgets，还必须包括与您要使用的主题相对应的CSS文件。 在大多数情况下，引用dx.common.css和dx.dark.css（或dx.light.css）文件就足够了。 如果使用NuGet Package Manager.装DevExtreme软件包，这些文件将添加到您的项目中。 您也可以通过npm packages 或CDN services.进行注册。否则，请从DevExtreme Web Site下载ZIP存档，然后在以下目录中找到CSS文件：lib \ css。 将相应的文件添加到您的Web项目，并在Default.aspx文件的HEAD部分中引用它们。
ASPx
<link rel="stylesheet" type="text/css" href="css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="css/dx.dark.css" />
如果只想使用数据Data Visualization Widgets，则不需要CSS文件。
将DevExtreme小部件添加到自定义UserControl
将ASPxPanel 控件添加到UserControl，该面板将用作DevExtreme小部件的容器。 如果使用的是dxChartControl组件，请将ASPxPanel.Height属性设置为绝对值，因为该组件旨在继承其父容器的高度。 处理客户端的Init 事件并运行一个JavaScript函数，该函数将DevExtreme小部件添加到ASPxPanel。
ASPx
<%@ Register Assembly="DevExpress.Web.v15.2, Version=15.2.10.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>
<dx:ASPxPanel ID="ASPxPanel1" runat="server" Height="500px">
<ClientSideEvents Init="function(s, e) { DxSample.OrdersChart.createWidgets(s); }" />
</dx:ASPxPanel>
要获取由ASPxPanel创建的div元素，可以使用 ASPxClientPanel.GetMainElement 方法，如下所示。
JavaScript
window.DxSample = window.DxSample || {};
window.DxSample.OrdersChart = {
createWidgets: function (panel) {
var $mainElement = $(panel.GetMainElement());
$mainElement.dxChart({..});
}
};
注意：若要创建窗口小部件，建议使用ASPxPanel组件的客户端Init事件而不是文档的ready事件。 因为如果在回调期间重新加载视图项的内容，则ready事件不会触发。
最好不要直接在UserControl的标记中编写此代码，因为这种方法会阻止您创建同一UserControl的多个实例。 而是将JavaScript代码放入单独的文件中，并将对该文件的引用添加到网页中。 为此，请使用WebWindow.RegisterClientScriptInclude 法。
C#
protected override void OnLoad(EventArgs e) {
base.OnLoad(e);
string url = this.ResolveClientUrl("~/Scripts/Controls/orders-chart.js");
WebWindow.CurrentRequestWindow.RegisterClientScriptInclude("orders-chart", url);
}
Visual Basic
Protected Overrides Sub OnLoad(ByVal e As EventArgs)
MyBase.OnLoad(e)
Dim url As String = Me.ResolveClientUrl("~/Scripts/Controls/orders-chart.js")
WebWindow.CurrentRequestWindow.RegisterClientScriptInclude("orders-chart", url)
End Sub
提供从数据库加载的数据
如果使用DevExtreme小部件来可视化从第三方服务获得的数据，则可以使用DevExtreme文档：数据层中描述的所有数据绑定方法。 但是，有时有必要直接从数据库获取数据， 在这种情况下，您可以使用这篇文章中描述的方法：How to: Access Server Data on the Client Side。
在后面的代码中，将IComplexControl接口实现添加到UserControl类。 显示包含UserControl的视图时，将自动调用此接口的Setup方法。 在此方法中，您可以从数据库加载数据，将其转换为简单对象的数组，然后将结果分配给自定义JS属性，该属性将在客户端作为JavaScript数组提供。
JavaScript
createWidgets: function (panel) {
var $mainElement = $(panel.GetMainElement());
$mainElement.dxChart({
dataSource: panel.cpChartData,
// ..
});
}