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

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

系統(tǒng)背景

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

何時使用DevExtreme小部件？

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

• 如果ASP.NET控件的功能和不足以實現(xiàn)所需級別的交互性，則可以使用和DevExtreme小部件來構(gòu)建視圖。
• 當您想要顯示從第三方Web服務(wù)檢索到的數(shù)據(jù)時，客戶端小部件可以幫助您避免在服務(wù)器端處理此數(shù)據(jù)。 可以使用AJAX技術(shù)直接從Web瀏覽器中調(diào)用Web服務(wù)，DevExtreme小部件可以更好地支持這種情況。

出于其他原因，您可能希望使用DevExtreme小部件，并且本文介紹如何將它們嵌入XAF視圖中。

如何引用所需的客戶端庫？

盡管XAF應(yīng)用程序會自動注冊DevExtreme腳本（XAF Web UI使用某些DevExtreme小部件，XAF模塊使用其他小部件），但我們建議您手動注冊DevExtreme腳本，以避免在將項目升級到較新版本的DevExpress組件時出現(xiàn)兼容性問題。 為此，請通過在Web.config文件的DevExpress部分中添加以下代碼來禁用客戶端庫的自動嵌入。

16.2+：

XML

<devExpress> 
<resources> 
</resources> 
</devExpress>

16.1或更高版本：

XML

<devExpress> 
<settings embedRequiredClientLibraries="false" />

從相應(yīng)的網(wǎng)站下載必要的JavaScript文件并將其添加到您的Web項目中（您可以使用NuGet軟件包管理器來實現(xiàn)此目的），將對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>

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

CSS:

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

如果只想使用數(shù)據(jù)，則不需要CSS文件。

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

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

JavaScript

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

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

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

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

提供從數(shù)據(jù)庫加載的數(shù)據(jù)

如果使用DevExtreme小部件來可視化從第三方服務(wù)獲得的數(shù)據(jù)，則可以使用DevExtreme文檔：數(shù)據(jù)層中描述的所有數(shù)據(jù)綁定方法。 但是，有時有必要直接從數(shù)據(jù)庫獲取數(shù)據(jù)， 在這種情況下，您可以使用這篇文章中描述的方法：。

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

JavaScript

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

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

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