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

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開(kāi)發(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和下一代移動(dòng)應(yīng)用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

系統(tǒng)背景

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

何時(shí)使用DevExtreme小部件？

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

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

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

如何引用所需的客戶(hù)端庫(kù)？

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

16.2+：

XML

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

16.1或更高版本：

XML

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

從相應(yīng)的網(wǎng)站下載必要的JavaScript文件并將其添加到您的Web項(xiàng)目中（您可以使用NuGet軟件包管理器來(lái)實(shí)現(xiàn)此目的），將對(duì)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組件所需的客戶(hù)端庫(kù)列表，DevExtreme小部件所需的庫(kù)在DevExtreme的在線(xiàn)文檔中進(jìn)行了描述：

CSS:

如果要使用，還必須包括與您要使用的主題相對(duì)應(yīng)的CSS文件。 在大多數(shù)情況下，引用dx.common.css和dx.dark.css（或dx.light.css）文件就足夠了。 如果使用N.裝DevExtreme軟件包，這些文件將添加到您的項(xiàng)目中。 您也可以通過(guò) 或.進(jìn)行注冊(cè)。否則，請(qǐng)從下載ZIP存檔，然后在以下目錄中找到CSS文件：lib \ css。 將相應(yīng)的文件添加到您的Web項(xiàng)目，并在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組件，請(qǐng)將ASPxPanel.Height屬性設(shè)置為絕對(duì)值，因?yàn)樵摻M件旨在繼承其父容器的高度。 處理客戶(hù)端的 事件并運(yùn)行一個(gè)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({..}); 
} 
};

注意：若要?jiǎng)?chuàng)建窗口小部件，建議使用ASPxPanel組件的客戶(hù)端Init事件而不是文檔的ready事件。 因?yàn)槿绻诨卣{(diào)期間重新加載視圖項(xiàng)的內(nèi)容，則ready事件不會(huì)觸發(fā)。

最好不要直接在UserControl的標(biāo)記中編寫(xiě)此代碼，因?yàn)檫@種方法會(huì)阻止您創(chuàng)建同一UserControl的多個(gè)實(shí)例。 而是將JavaScript代碼放入單獨(dú)的文件中，并將對(duì)該文件的引用添加到網(wǎng)頁(yè)中。 為此，請(qǐ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ù)庫(kù)加載的數(shù)據(jù)

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

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

JavaScript

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

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

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