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

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

本教程說明如何使用來創(chuàng)建儀表板Web應(yīng)用程序。

Steps 1-4. 創(chuàng)建一個ASP.NET MVC應(yīng)用程序

本節(jié)介紹如何使用DevExpress模板庫創(chuàng)建MVC應(yīng)用程序。

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

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

3. 跳轉(zhuǎn)到Choose Layout頁面然后選擇Standard。

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

點擊Create Project。

Steps 5-7. 將Dashboard Extension添加到MVC應(yīng)用程序

5. 構(gòu)建解決方案。

6. 打開Views | Home | Index.cshtml文件，在Code Editor中右鍵單擊所需的位置來顯示快捷菜單，然后單擊Insert DevExpress MVC Extension... 來調(diào)用向?qū)А?

7. 在Insert DevExpress Extension向?qū)е校D(zhuǎn)到Visualization標(biāo)簽，然后選擇Dashboard并單擊Insert。

該向?qū)詣由蒁ashboard擴展的代碼。

Step 8. 創(chuàng)建Dashboard存儲

8. 右鍵單擊App_Data文件夾，然后添加Dashboards文件夾。 在DashboardConfig.cs文件（位于App_Start文件夾中）中，取消對方法調(diào)用的注釋，并將儀表板存儲路徑更改為?/ 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. 提供數(shù)據(jù)

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

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

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

XML

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

注意：請注意，連接字符串應(yīng)包含XpoProvider參數(shù)，該參數(shù)取決于所使用的數(shù)據(jù)庫類型。 有關(guān)如何為不同的數(shù)據(jù)庫類型指定連接字符串的詳細信息，請參見。

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

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. 創(chuàng)建一個Dashboard

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

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

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

Steps 14-16. 切換到Viewer模式

創(chuàng)建并保存儀表板后，可以將Dashboard Designer應(yīng)用程序切換到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. 運行應(yīng)用程序。 ASP.NET MVC儀表板擴展顯示?/ App_Data / Dashboards中的儀表板。

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