下載DevExtreme v20.1完整版    DevExpress v20.1漢化資源獲取

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應式UI小部件集合，可在傳統Web和下一代移動應用程序中使用。 該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。

系統背景

• 平臺：Frameworks (XAF & XPO)
• 產品：eXpressApp Framework

何時使用DevExtreme小部件？

DevExtreme小部件主要針對ASP.NET、SPA或ASP.NET MVC應用程序，盡管使用eXpress App Framework創建的應用程序有些不同，但有些用戶可能希望在特定情況下使用這些小部件，這里有一些例子：

• 如果ASP.NET控件的功能和不足以實現所需級別的交互性，則可以使用和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>

中提供了常規ASP.NET組件所需的客戶端庫列表，DevExtreme小部件所需的庫在DevExtreme的在線文檔中進行了描述：

CSS:

如果要使用，還必須包括與您要使用的主題相對應的CSS文件。 在大多數情況下，引用dx.common.css和dx.dark.css（或dx.light.css）文件就足夠了。 如果使用N.裝DevExtreme軟件包，這些文件將添加到您的項目中。 您也可以通過 或.進行注冊。否則，請從下載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" />

如果只想使用數據，則不需要CSS文件。

將DevExtreme小部件添加到自定義UserControl

將 控件添加到UserControl，該面板將用作DevExtreme小部件的容器。 如果使用的是dxChartControl組件，請將ASPxPanel.Height屬性設置為絕對值，因為該組件旨在繼承其父容器的高度。 處理客戶端的 事件并運行一個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元素，可以使用 方法，如下所示。

JavaScript

window.DxSample = window.DxSample || {}; 
window.DxSample.OrdersChart = { 
createWidgets: function (panel) { 
var $mainElement = $(panel.GetMainElement()); 
$mainElement.dxChart({..}); 
} 
};

注意：若要創建窗口小部件，建議使用ASPxPanel組件的客戶端Init事件而不是文檔的ready事件。 因為如果在回調期間重新加載視圖項的內容，則ready事件不會觸發。

最好不要直接在UserControl的標記中編寫此代碼，因為這種方法會阻止您創建同一UserControl的多個實例。 而是將JavaScript代碼放入單獨的文件中，并將對該文件的引用添加到網頁中。 為此，請使用 法。

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文檔：數據層中描述的所有數據綁定方法。 但是，有時有必要直接從數據庫獲取數據， 在這種情況下，您可以使用這篇文章中描述的方法：。

在后面的代碼中，將IComplexControl接口實現添加到UserControl類。 顯示包含UserControl的視圖時，將自動調用此接口的Setup方法。 在此方法中，您可以從數據庫加載數據，將其轉換為簡單對象的數組，然后將結果分配給自定義JS屬性，該屬性將在客戶端作為JavaScript數組提供。

JavaScript

createWidgets: function (panel) { 
var $mainElement = $(panel.GetMainElement()); 
$mainElement.dxChart({ 
dataSource: panel.cpChartData, 
// .. 
}); 
}

DevExpress技術交流群2：775869749      歡迎一起進群討論

富文本控件難上手？這堂公開課你一定不能錯過，不同視圖不同應用場景全解！