DevExpress中的Dashboard這個圖形外掛真的很好用, 只需要在設計器繫結資料就行了,完全不用寫後臺程式碼.我也是剛學這個外掛,可能還有一些我沒有了解的知識點,忘各位大佬不吝賜教.我寫這篇博文也是為了給想我一樣剛研究這個外掛的博友們一些我的總結,給各位節省一些時間,哈哈.

1. 當我們建立好一個Dashboard的專案後,在檢視資料夾下會有index檢視,這個就是設計器頁面,我們所有的操作都是在這個設計器中完成的

2. 這是執行後的設計器頁面,會預設有一些資料的

3. 接下來我們需要把資料來源改成我們自己需要資料庫中的資料來源,需要在webconfig中把連結改成我們自己的資料庫名稱和密碼

<connectionStrings>

<add name="DefaultConnection" connectionString="data source=.;initial catalog=jiesuan;user id=sa;password=000;integrated security=SSPI" providerName="System.Data.SqlClient" />

</connectionStrings>

4. 接下來還需要在App_Start/DashboardConfig.cs中把資料來源改成在webconfig中寫的name名稱,如果另Excel Data Source和Object Data Source用不到的話也可以刪除,當然我用的是SQL Data Source,所以我把另外兩個刪除了

public static void RegisterService(RouteCollection routes) {
            routes.MapDashboardRoute("dashboardControl");

            DashboardFileStorage dashboardFileStorage = new DashboardFileStorage("~/App_Data/Dashboards");
            DashboardConfigurator.Default.SetDashboardStorage(dashboardFileStorage);

            
 
// Uncomment this string to allow end users to create new data sources based on predefined connection strings.
            //DashboardConfigurator.Default.SetConnectionStringsProvider(new DevExpress.DataAccess.Web.ConfigFileConnectionStringsProvider());
            
            DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();
            
            // Registers an SQL data source.
            DashboardSqlDataSource sqlDataSource = new DashboardSqlDataSource("SQL Data Source", "DefaultConnection");
            //SelectQuery query = SelectQueryFluentBuilder
            //    .AddTable("SalesPerson")
            //    .SelectAllColumns()
            //    .Build("Sales Person");
            //sqlDataSource.Queries.Add(query);
            dataSourceStorage.RegisterDataSource("sqlDataSource", sqlDataSource.SaveToXml());
            
            //// Registers an Object data source.
            //DashboardObjectDataSource objDataSource = new DashboardObjectDataSource("Object Data Source");
            //dataSourceStorage.RegisterDataSource("objDataSource", objDataSource.SaveToXml());
            
            //// Registers an Excel data source.
            //DashboardExcelDataSource excelDataSource = new DashboardExcelDataSource("Excel Data Source");
            //excelDataSource.FileName = HostingEnvironment.MapPath(@"~/App_Data/Sales.xlsx");
            //excelDataSource.SourceOptions = new ExcelSourceOptions(new ExcelWorksheetSettings("Sheet1"));
            //dataSourceStorage.RegisterDataSource("excelDataSource", excelDataSource.SaveToXml());
            
            DashboardConfigurator.Default.SetDataSourceStorage(dataSourceStorage);
            DashboardConfigurator.Default.DataLoading += DataLoading;
        }

這樣在專案中都設定完成後,我們的設計器就能連線我們的資料庫了

4. 當我們改完資料來源後,設計器頁面會出現ConnectionString 尚未初始化,這是因為我們把資料來源改了,現在已經不是專案生成的時候預設的資料來源了

 5.  接下來我們就可以自己設計自己的圖表了, 首先我們需要自己建立一個dashboards,值得注意的是,在這裡建立完成後在在專案中以xml檔案呈現,沒有後臺程式碼

6. 接下來需要選擇資料庫,並對各表進行操作

 如果有where條件的話需要在這裡設定

 7. 這些都弄好後可以在剛才新建立的dashboard中設計你的gridview,chart等圖表啦,

8. 在檢視中繫結自己設計的圖表

@Html.DevExpress().Dashboard(settings => {
    settings.Name = "Dashboard3";
    settings.WorkingMode = DevExpress.DashboardWeb.WorkingMode.ViewerOnly;
    settings.InitialDashboardId = "dashboard10";//繫結
   
}).GetHtml()

最後,希望自己的綿薄之力能夠幫到各位