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

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

本教程說明如何使用來創建儀表板Web應用程序。

Steps 1-4. 創建一個ASP.NET MVC應用程序

本節介紹如何使用DevExpress模板庫創建MVC應用程序。

1. 在Visual Studio中，創建一個新項目并在開始頁面上選擇DevExpress v20.2 Template Gallery作為項目模板。

2. 在 DevExpress Template Gallery中，跳轉到ASP.NET MVC類別，然后選擇Empty Web Application。

3. 跳轉到Choose Layout頁面然后選擇Standard。

4. 然后，跳轉到Suites頁面，選擇Dashboard旁邊的復選框，來附加Web Dashboard的樣式表和腳本。

點擊Create Project。

Steps 5-7. 將Dashboard Extension添加到MVC應用程序

5. 構建解決方案。

6. 打開Views | Home | Index.cshtml文件，在Code Editor中右鍵單擊所需的位置來顯示快捷菜單，然后單擊Insert DevExpress MVC Extension... 來調用向導。

7. 在Insert DevExpress Extension向導中，跳轉到Visualization標簽，然后選擇Dashboard并單擊Insert。

該向導會自動生成Dashboard擴展的代碼。

Step 8. 創建Dashboard存儲

8. 右鍵單擊App_Data文件夾，然后添加Dashboards文件夾。 在DashboardConfig.cs文件（位于App_Start文件夾中）中，取消對方法調用的注釋，并將儀表板存儲路徑更改為?/ App_Data / Dashboards。

C#

using System.Web.Routing;
using DevExpress.DashboardWeb.Mvc;

public class DashboardConfig {
public static void RegisterService(RouteCollection routes) {
routes.MapDashboardRoute("api/dashboard");

// Uncomment this line to save dashboards to the App_Data folder.
DashboardConfigurator.Default.SetDashboardStorage(new DashboardFileStorage(@"~/App_Data/Dashboards"));

// ...
}
}

VB.NET

Imports System.Web.Routing
Imports DevExpress.DashboardWeb.Mvc

Public Class DashboardDesignerConfig
Public Shared Sub RegisterService(ByVal routes As RouteCollection)
routes.MapDashboardRoute("api/dashboard")

' Uncomment this line to save dashboards to the App_Data folder.
DashboardConfigurator.Default.SetDashboardStorage(New DashboardFileStorage("~/App_Data/Dashboards"))

' ...
End Sub
End Class

Steps 9-11. 提供數據

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

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

10. 在項目的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參數，該參數取決于所使用的數據庫類型。 有關如何為不同的數據庫類型指定連接字符串的詳細信息，請參見。

11. 在DashboardConfig.cs文件（位于App_Start文件夾中）中，將實例作為方法的參數傳遞，以允許基于Web.config文件中的連接字符串創建新的數據源：

C#

using System.Web.Routing;
using DevExpress.DashboardWeb.Mvc;

public class DashboardConfig {
public static void RegisterService(RouteCollection routes) {
routes.MapDashboardRoute("api/dashboard");

// ...
DashboardConfigurator.Default.SetConnectionStringsProvider(new DevExpress.DataAccess.Web.ConfigFileConnectionStringsProvider()); 
}
}

VB.NET

Imports System.Web.Routing
Imports DevExpress.DashboardWeb.Mvc

Public Class DashboardDesignerConfig
Public Shared Sub RegisterService(ByVal routes As RouteCollection)
routes.MapDashboardRoute("api/dashboard")

' ...
DashboardConfigurator.Default.SetConnectionStringsProvider(New DevExpress.DataAccess.Web.ConfigFileConnectionStringsProvider())
End Sub
End Class

Steps 12-13. 創建一個Dashboard

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

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

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

Steps 14-16. 切換到Viewer模式

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

14. 在項目中，打開Views | Home | Index.cshtml文件。

15. 在MvcDashboardFactory.Dashboard helper方法中添加以下代碼：

C#

@Html.DevExpress().Dashboard(settings => {
settings.Name = "Dashboard";
settings.WorkingMode = DevExpress.DashboardWeb.WorkingMode.ViewerOnly;
settings.InitialDashboardId = "dashboard1";
}).GetHtml()

VB.NET

@Html.DevExpress().Dashboard(Sub(settings)
settings.Name = "Dashboard"
settings.WorkingMode = DevExpress.DashboardWeb.WorkingMode.ViewerOnly
settings.InitialDashboardId = "dashboard1"
End Sub).GetHtml()

16. 運行應用程序。 ASP.NET MVC儀表板擴展顯示?/ App_Data / Dashboards中的儀表板。

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