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

DevExpress擁有.NET開(kāi)發(fā)需要的所有平臺(tái)控件，包含600多個(gè)UI控件、報(bào)表平臺(tái)、DevExpress Dashboard eXpressApp 框架、適用于 Visual Studio的CodeRush等一系列輔助工具。

本教程將為大家演示如何使用控件創(chuàng)建儀表板Web應(yīng)用程序。

Steps 1-3. 添加Web儀表板控件

1. 在Visual Studio中，創(chuàng)建一個(gè)新的項(xiàng)目并在開(kāi)始頁(yè)面上選擇ASP.NET Web Application (.NET Framework)作為項(xiàng)目模板，然后選擇Empty模板并單擊OK。

2. 將新的Web Form添加到應(yīng)用程序，請(qǐng)?jiān)赟olution Explorer中右鍵單擊該項(xiàng)目，然后選擇Add | Web Form。

保留默認(rèn)的'WebForm1'項(xiàng)目名稱，然后在調(diào)用的對(duì)話框中單擊OK。

3. 從DX.20.2：Data & Analytics Toolbox選項(xiàng)卡中將ASPxDashboard控件拖放到頁(yè)面上。

將網(wǎng)頁(yè)切換到Design視圖。

Steps 4-5. 創(chuàng)建Dashboard存儲(chǔ)

4. 在Solution Explorer中右鍵單擊該項(xiàng)目，然后從上下文菜單中選擇Add | Add ASP.NET Folder | App_Data，并在App_Data中添加Dashboards文件夾。

5. 單擊控件的智能標(biāo)記，然后將Dashboard Storage Folder設(shè)置為以下相對(duì)路徑：~/App_Data/Dashboards。

此文件夾包含已保存的儀表板的XML定義。

Steps 6-8. 提供數(shù)據(jù)

6. 右鍵單擊App_Data文件夾，然后選擇Add | Existing項(xiàng)，并使用以下路徑找到nwind.mdb數(shù)據(jù)庫(kù)：

C:\Users\Public\Documents\DevExpress Demos 20.2\Components\Data\nwind.mdb

7. 在項(xiàng)目的Web.config文件中指定到添加的數(shù)據(jù)庫(kù)的連接字符串，如下所示。

XML

<configuration>
<connectionStrings>
<add name="nwindConnection" connectionString="XpoProvider=MSAccess; Provider=Microsoft.Jet.OLEDB.4.0; Data Source=|DataDirectory|\nwind.mdb;" />
</connectionStrings>
</configuration>

注意：請(qǐng)注意，連接字符串應(yīng)包含XpoProvider參數(shù)，該參數(shù)取決于所使用的數(shù)據(jù)庫(kù)類型。

8. 在WebForm1.aspx.cs的Page_Load方法中，將ConfigFileConnectionStringsProvider實(shí)例作為SetConnectionStringsProvider方法的參數(shù)傳遞，以允許基于來(lái)自Web.config文件的連接字符串創(chuàng)建新的數(shù)據(jù)源：

C#

using DevExpress.DashboardWeb;

protected void Page_Load(object sender, EventArgs e) {
// ...
ASPxDashboard1.SetConnectionStringsProvider(new DevExpress.DataAccess.Web.ConfigFileConnectionStringsProvider());
}

VB.NET

Imports DevExpress.DashboardWeb

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' ...
ASPxDashboard1.SetConnectionStringsProvider(New DevExpress.DataAccess.Web.ConfigFileConnectionStringsProvider())
End Sub

Step 9. 添加所需的客戶端庫(kù)

9. 在Web應(yīng)用程序的Web.Config文件中，跳轉(zhuǎn)到DevExpress部分，然后添加“ resources”部分，如下所示。

XML

<devExpress>
<!-- ... -->
<resources>
<add type="ThirdParty" />
<add type="DevExtreme" />
</resources>
</devExpress>

這會(huì)將所需的客戶端庫(kù)添加到項(xiàng)目中，例如jquery、jquery-ui、knockout和globalize。

注意：庫(kù)中包含Web儀表板所需的基本cldr內(nèi)容。 但是，對(duì)于除"en"（或``USD''以外的貨幣）以外的語(yǔ)言環(huán)境，應(yīng)另外加載cldr內(nèi)容。

Steps 10-11. 創(chuàng)建Dashboard

10. 現(xiàn)在可以使用設(shè)計(jì)器應(yīng)用程序，生成并運(yùn)行項(xiàng)目。

您的應(yīng)用程序應(yīng)如下所示：

11. 有關(guān)如何在Web設(shè)計(jì)器中創(chuàng)建第一個(gè)儀表板的說(shuō)明，請(qǐng)轉(zhuǎn)到。

Steps 12-14. 切換到Viewer模式

創(chuàng)建并保存儀表板后，可以將Dashboard Designer應(yīng)用程序切換到Viewer模式。

12. 在項(xiàng)目中，切換到WebForm1.aspx，然后單擊控件的智能標(biāo)記。

13. 將工作模式選項(xiàng)設(shè)置為“ ViewerOnly”。

14. 運(yùn)行應(yīng)用程序。 ASPxDashboard控件顯示?/ App_Data / Dashboards中的儀表板。

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