彩票走势图

带有ASP.NET Core的dhtmlxGantt教程:如何创建一个项目

翻译|使用教程|编辑:杨鹏连|2020-08-10 13:57:12.870|阅读 148 次

概述:本教程为您提供有关如何在服务器端使用ASP.NET Core 2 创建Gantt的分步说明。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求,是最完善的甘特图图表库。它允许你创建动态甘特图,并以一个方便的图形化方式可视化项目进度。有了dhtmlxGantt,你可以显示活动之间的依赖关系,显示具有完成百分比阴影的当前任务状态以及组织活动到树结构。

点击下载dhtmlxGantt试用版

步骤1.创建一个项目

启动Visual Studio 2017并创建一个新项目。打开文件菜单,然后选择:新建->项目。
接下来,选择ASP.NET Core Web Application,并将其命名为DHX.Gantt。

dhtmlxGantt与ASP.NET Core 2创建项目

选择一个空模板。

dhtmlxGantt与ASP.NET Core 2创建项目

因此,您已经创建了一个项目,可以继续为Gantt添加标记和脚本。

步骤2.添加甘特标记和JS

转到wwwroot并创建一个index.html文件。

dhtmlxGantt与ASP.NET Core 2创建项目
dhtmlxGantt与ASP.NET Core 2创建项目
在新创建的文件中,为甘特图制作一个简单的页面。

请注意,在此演示中,从CDN添加了甘特文件。如果您拥有该组件的专业版,则需要手动将gantt文件添加到您的项目中。

index.html
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="//cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css"
          rel="stylesheet" type="text/css" />
    <script src="//cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function(event) {
            // specifying the date format
            gantt.config.date_format = "%Y-%m-%d %H:%i";
            // initializing gantt
            gantt.init("gantt_here");
 
            // initiating data loading
            gantt.load("/api/data");
            // initializing dataProcessor
            var dp = new gantt.dataProcessor("/api/");
            // and attaching it to gantt
            dp.init(gantt);
            // setting the REST mode for dataProcessor
            dp.setTransactionMode("REST");
        });
    </script>
</head>
<body>
    <div id="gantt_here" style="width: 100%; height: 100vh;"></div>
</body>
</html>
加载页面时,除了初始化甘特图 之外,还会立即调用数据加载并进行 dataProcessor设置,因此,用户对甘特图所做的所有更改都将保存到后端。后端尚未实现,因此以后会更有意义。

接下来转到Startup.cs,并告诉应用程序使用index.html页面。为此,您需要配置该应用程序以从该wwwroot文件夹提供静态文件。它在实现Configure方法调用的app.UseStaticFiles()方法。您可以在此处找到更多详细信息。

我们还需要通过将方法中的“ Hello world”存根替换为突出显示的两行代码,来将所需的中间件添加到Startup.csConfigure():

Startup.cs
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
 
namespace DHX.Gantt
{
    public class Startup
    {
        // This method gets called by the runtime. 
        // Use this method to add services to the container.
        // For more information on how to configure your application, 
        // visit //go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
        }
 
        // This method gets called by the runtime.
        // Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
 
            app.UseDefaultFiles(); 
            app.UseStaticFiles();  
        }
    }
}
添加的2个中间件是:
app.UseDefaultFiles()–允许提供默认文件。它将在wwwroot文件夹中搜索以下文件:
  • index.html
  • 索引
  • default.html
  • default.htm因此,您可以选择其中的任何一个,而在本教程中使用“ index.html”。 UseDefaultFiles()只是实际上不提供文件的URL重写器。为此,您还需要添加UseStaticFiles()文件。
  • app.UseStaticFiles()–负责提供wwwroot文件夹中存在的所有静态文件。
完成后,在运行应用程序时页面上将出现一个空的甘特图。请注意,由于gantt.load()被调用,因此显示了右上角的“无效数据”标签,因为仍然没有适当的后端来提供数据。实施控制器后,甘特将能够显示任务和链接。
带有ASP.NET Core 2的dhtmlxGantt添加了甘特图
现在基本部分已经完成,是时候实现后端了。让我们从实现模型类开始,然后继续到WebAPI控制器。


是否想尝试DHTMLX Gantt来构建自己的Salesforce应用?访问我们的GitHub存储库,您可以在其中找到Salesforce的Gantt组件的完整源代码,并按照我们的视频指南中的步骤进行操作。

关产品推荐:

VARCHART XGantt支持ActiveX、.Net等平台的C#甘特图控件

AnyGantt构建复杂且内容丰富的甘特图的理想工具

jQuery Gantt Package基于HTML5 / jQuery的跨平台jQuery Gantt包

phGantt Time Package对任务和时间的分配管理的甘特图

想要购买dhtmlxGantt正版授权,或了解更多产品信息请点击

标签:

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

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP