在MVC中Dashboard基础入门操作

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()

 

最后,希望自己的绵薄之力能够帮到各位