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

DevExpress擁有.NET開發需要的所有平臺控件，包含600多個UI控件、報表平臺、DevExpress Dashboard eXpressApp 框架、適用于 Visual Studio的CodeRush等一系列輔助工具。

本教程將為大家演示如何使用控件創建儀表板Web應用程序。

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

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

2. 將新的Web Form添加到應用程序，請在Solution Explorer中右鍵單擊該項目，然后選擇Add | Web Form。

保留默認的'WebForm1'項目名稱，然后在調用的對話框中單擊OK。

3. 從DX.20.2：Data & Analytics Toolbox選項卡中將ASPxDashboard控件拖放到頁面上。

將網頁切換到Design視圖。

Steps 4-5. 創建Dashboard存儲

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

5. 單擊控件的智能標記，然后將Dashboard Storage Folder設置為以下相對路徑：~/App_Data/Dashboards。

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

Steps 6-8. 提供數據

6. 右鍵單擊App_Data文件夾，然后選擇Add | Existing項，并使用以下路徑找到nwind.mdb數據庫：

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

7. 在項目的Web.config文件中指定到添加的數據庫的連接字符串，如下所示。

XML

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

注意：請注意，連接字符串應包含XpoProvider參數，該參數取決于所使用的數據庫類型。

8. 在WebForm1.aspx.cs的Page_Load方法中，將ConfigFileConnectionStringsProvider實例作為SetConnectionStringsProvider方法的參數傳遞，以允許基于來自Web.config文件的連接字符串創建新的數據源：

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. 添加所需的客戶端庫

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

XML

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

這會將所需的客戶端庫添加到項目中，例如jquery、jquery-ui、knockout和globalize。

注意：庫中包含Web儀表板所需的基本cldr內容。 但是，對于除"en"（或``USD''以外的貨幣）以外的語言環境，應另外加載cldr內容。

Steps 10-11. 創建Dashboard

10. 現在可以使用設計器應用程序，生成并運行項目。

您的應用程序應如下所示：

11. 有關如何在Web設計器中創建第一個儀表板的說明，請轉到。

Steps 12-14. 切換到Viewer模式

創建并保存儀表板后，可以將Dashboard Designer應用程序切換到Viewer模式。

12. 在項目中，切換到WebForm1.aspx，然后單擊控件的智能標記。

13. 將工作模式選項設置為“ ViewerOnly”。

14. 運行應用程序。 ASPxDashboard控件顯示?/ App_Data / Dashboards中的儀表板。

DevExpress技術交流群3：700924826      歡迎一起進群討論