外围海尊体育足球网

DevExpress使用教程:手把手教你创建ASP.NET MVC Dashboard应用

原创|使用教程|编辑:龚雪|2021-03-25 10:23:52.910|阅读 570 次

概述:本教程说明如何使用ASP.NET MVC Dashboard扩展来创建仪表板Web应用程序。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

相关链接:

下载DevExpress v20.2完整版    DevExpress v20.2汉化资源获取

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

本教程说明如何使用来创建仪表板Web应用程序。

Steps 1-4. 创建一个ASP.NET MVC应用程序

本节介绍如何使用DevExpress模板库创建MVC应用程序。

 1. 在Visual Studio中,创建一个新项目并在开始页面上选择DevExpress v20.2 Template Gallery作为项目模板。

DevExpress使用教程

 2. 在 DevExpress Template Gallery中,跳转到ASP.NET MVC类别,然后选择Empty Web Application。

DevExpress使用教程

3. 跳转到Choose Layout页面然后选择Standard。

DevExpress使用教程

 4. 然后,跳转到Suites页面,选择Dashboard旁边的复选框,来附加Web Dashboard的样式表和脚本。

DevExpress使用教程

点击Create Project。

Steps 5-7. 将Dashboard Extension添加到MVC应用程序

5. 构建解决方案。

 6. 打开Views | Home | Index.cshtml文件,在Code Editor中右键单击所需的位置来显示快捷菜单,然后单击Insert DevExpress MVC Extension... 来调用向导。

DevExpress使用教程

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

DevExpress使用教程

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

Step 8. 创建Dashboard存储

 8. 右键单击App_Data文件夹,然后添加Dashboards文件夹。 在DashboardConfig.cs文件(位于App_Start文件夹中)中,取消对方法调用的注释,并将仪表板存储路径更改为〜/ 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. 提供数据

 9. 右键单击App_Data文件夹,然后选择Add | Existing Item,并使用以下路径找到nwind.mdb数据库:

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

10. 在项目的Web.config文件中指定到添加的数据库连接字符串,如下所示。

XML

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

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

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

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. 创建一个Dashboard

12. 现在可以使用设计器应用程序,生成并运行项目。

DevExpress使用教程

您的应用程序应如下所示:

DevExpress使用教程

13. 有关如何在Web设计器中创建第一个仪表板的说明,请转到 。

Steps 14-16. 切换到Viewer模式

 创建并保存仪表板后,可以将Dashboard Designer应用程序切换到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. 运行应用程序。 ASP.NET MVC仪表板扩展显示〜/ App_Data / Dashboards中的仪表板。

DevExpress使用教程

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

慧都高端UI界面开发
标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@obta.cn

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关产品
DevExpress Universal Subscription

优秀的界面控件开发包,帮助企业构建卓越应用!

DevExpress DXperience Subscription

高性价比的企业级.NET用户界面套包,助力企业创建卓越应用!

DevExpress WinForms Subscription

为Windows Forms平台创建具有影响力的业务解决方案,高性价比WinForms界面控件套包。

DevExpress ASP.NET Controls

多款重量级ASP.NET用户界面组件套包,让您快速开发出完美、强大的应用程序!

DevExpress WPF Subscription

高效MVVM开发模式,WPF界面解决方案首选工具,帮助企业实现酷炫动效界面。

title
title
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP