DevExpress的web Dashboard应用-EW帮帮网

微信交流群：https://732903.hlcode.cn/?id=NK1fWUR

本文旨在从零开始创建一个包含dashboard的应用

一、前期准备

1、语言：C#

2、软件：Visual Studio 2019

3、框架：DevExpress19.2(付费)、ASP.NET(Web)

4、组件：dashboard

二、创建ASP.NET Web窗体仪表板应用程序

1、创建一个空的web应用

打开VS，创建新项目，选择ASP.NET Web应用程序，点击下一步

配置新项目：项目名，位置选择，框架选择为（4.5.2版本）

2、添加引用

右键“引用”——>“添加引用”——>程序集——>扩展选择与dashboard相关的拓展(Mvc和Mvc5选一个就行)——>确定

3、创建一个Web窗体

右键“web名”——>“添加”——>Web窗体。点击，命名。

4、引入Dashboard

打开新创建的web窗体：右键“web窗体”——>查看设计器

打开“工具箱”——>找到“dashboard”——>把组件拉出来到web窗体的设计器上。

5、创建仪表板存储文件夹

创建DATA文件夹：右键“项目名”——>“添加”——>“添加ASP.NET文件夹”——>APP_DATA文件夹

在APP_DATA中创建Dashboards文件夹，在ASPxDashboard1的属性中找到属性“Dashboard Storage Folder ”：~/App_Data/Dashboards

6、添加数据

右键单击App_Data文件夹，选择Add | 添加现有项，并使用以下路径找到nwind.mdb数据库: C:\Users\Public\Documents\DevExpress Demos 19.2\Components\Data\nwind.mdb（若是按路径查找依次为：c盘，用户，公用，公用文档，...）

在Web.config文件中添加数据库链接的代码（位置和代码如下，代码根据数据库类型变化而变化）：

	<connectionStrings>
		<add name="sqlServerConnection"
				  connectionString="Server=192.168.1.52; DataBase=test1; Uid=xiaoyu; PWD=Rr2577588052;" />
	</connectionStrings>

打开Web窗体文件的代码：右键“Web窗体”——>查看代码——>编写代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication4
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            ASPxDashboard1.SetConnectionStringsProvider(new DevExpress.DataAccess.Web.ConfigFileConnectionStringsProvider());
        }
    }
}

7、添加所需的客户端库

在Web.config文件中添加资源代码（位置和代码如下）：

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

8、运行

将web窗体设为起始页：右键“web窗体”——>设为起始页

点击运行：

三、切换查看器模式

设置属性“WorkingMode”：ViewerOnly(这个属性会使得仪表盘在Web端不可编辑，可有可无即：查看器模式)

DevExpress的web Dashboard应用