开发者论坛

 找回密码
 注册 (请使用非IE浏览器)
查看: 3076|回复: 0

手把手教你创建ASP.NET MVC Dashboard应用

[复制链接]

0

精华

8

贡献

1753

赞扬

特约版主

帖子
583
软币
4514
在线时间
274 小时
注册时间
2019-2-21
发表于 2021-3-26 09:46:08 | 显示全部楼层 |阅读模式

下载DevExpress v20.2完整版   

DevExpress拥有.NET开发需要的所有平台控件,包含600多个UI控件、报表平台、DevExpress Dashboard eXpressApp 框架、适用于 Visual Studio的CodeRush等一系列辅助工具。

本教程说明如何使用ASP.NET MVC Dashboard扩展来创建仪表板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... 来调用Insert DevExpress Extension向导。


7. 在Insert DevExpress Extension向导中,跳转到Visualization标签,然后选择Dashboard并单击Insert。


该向导会自动生成Dashboard扩展的代码。

Step 8. 创建Dashboard存储

8. 右键单击App_Data文件夹,然后添加Dashboards文件夹。 在DashboardConfig.cs文件(位于App_Start文件夹中)中,取消对DashboardConfigurator.SetDashboardStorage方法调用的注释,并将仪表板存储路径更改为〜/ App_Data / Dashboards。

C#

[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

[Visual Basic] 纯文本查看 复制代码
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

[XML] 纯文本查看 复制代码
<configuration>
<connectionStrings>
<add name="nwindConnection" connectionString="XpoProvider=MSAccess; Provider=Microsoft.Jet.OLEDB.4.0; Data Source=|DataDirectory|\nwind.mdb;" />
</connectionStrings>
</configuration>


注意:请注意,连接字符串应包含XpoProvider参数,该参数取决于所使用的数据库类型。 有关如何为不同的数据库类型指定连接字符串的详细信息,请参见Register Default Data Connections

11. 在DashboardConfig.cs文件(位于App_Start文件夹中)中,将ConfigFileConnectionStringsProvider实例作为SetConnectionStringsProvider方法的参数传递,以允许基于Web.config文件中的连接字符串创建新的数据源:

C#

[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

[Visual Basic] 纯文本查看 复制代码
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设计器中创建第一个仪表板的说明,请转到 Create a Dashboard using the Web Dashboard

Steps 14-16. 切换到Viewer模式

创建并保存仪表板后,可以将Dashboard Designer应用程序切换到Viewer模式。

14. 在项目中,打开Views | Home | Index.cshtml文件。

15. 在MvcDashboardFactory.Dashboard helper方法中添加以下代码:

C#

[C#] 纯文本查看 复制代码
@Html.DevExpress().Dashboard(settings => {
settings.Name = "Dashboard";
settings.WorkingMode = DevExpress.DashboardWeb.WorkingMode.ViewerOnly;
settings.InitialDashboardId = "dashboard1";
}).GetHtml()


VB.NET

[Visual Basic] 纯文本查看 复制代码
@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中文网,获取第一手最新产品资讯!

DevExpress技术交流群3:700924826      欢迎一起进群讨论


回复

使用道具 举报

Archiver|手机版|小黑屋|开发者网 ( 苏ICP备08004430号-2 )
版权所有:南京韵文教育信息咨询有限公司

GMT+8, 2022-7-4 13:24

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表