dhtmlxGantt实施Web API

步骤4.实施Web API

现在该进行实际的REST API实施了。转到Startup.cs并启用MVC路由(如果尚未启用):

启动文件

public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
services.AddDbContext(options =>
options.UseSqlServer(Configuration.GetConnectionString(“DefaultConnection”)));
}

//The method is called by the runtime. Use it to configure HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}

app.UseDefaultFiles();
app.UseStaticFiles();
app.UseMvc(); 

}

添加控制器

创建Controllers文件夹并创建三个空的API Controller:一个用于Tasks,另一个用于Links,另一个用于整个数据集:

在这里插入图片描述

任务控制器

让我们为Tasks创建一个控制器。它将为甘特任务定义基本的CRUD操作。

这个怎么运作:

在GET请求中,任务是从数据库中加载的,输出是任务的数据传输对象;
在PUT / POST请求中,任务作为WebAPITask类来自客户端。它们在dhtmlxGantt中以这种方式表示。因此,您应该将它们转换为EntityFramework(任务类)的数据模型的格式。之后,可以将更改保存在DatabaseContext中。
控制器/ TaskController.cs
using System.Collections.Generic;
using System.Linq;
using Microsoft.EntityFrameworkCore;
using Microsoft.AspNetCore.Mvc;
using DHX.Gantt.Models;

namespace DHX.Gantt.Controllers
{
[Produces(“application/json”)]
[Route(“api/task”)]
public class TaskController : Controller
{
private readonly GanttContext _context;
public TaskController(GanttContext context)
{
_context = context;
}

    // GET api/task
    [HttpGet]
    public IEnumerable<WebApiTask> Get()
    {
        return _context.Tasks
            .ToList()
            .Select(t => (WebApiTask)t);
    }

    // GET api/task/5
    [HttpGet("{id}")]
    public WebApiTask Get(int id)
    {
        return (WebApiTask)_context
            .Tasks
            .Find(id);
    }

    // POST api/task
    [HttpPost]
    public ObjectResult Post(WebApiTask apiTask)
    {
        var newTask = (Task)apiTask;

        _context.Tasks.Add(newTask);
        _context.SaveChanges();

        return Ok(new
        {
            tid = newTask.Id,
            action = "inserted"
        });
    }

    // PUT api/task/5
    [HttpPut("{id}")]
    public ObjectResult Put(int id, WebApiTask apiTask)
    {
        var updatedTask = (Task)apiTask;
        var dbTask = _context.Tasks.Find(id);
        dbTask.Text = updatedTask.Text;
        dbTask.StartDate = updatedTask.StartDate;
        dbTask.Duration = updatedTask.Duration;
        dbTask.ParentId = updatedTask.ParentId;
        dbTask.Progress = updatedTask.Progress;
        dbTask.Type = updatedTask.Type;

        _context.SaveChanges();

        return Ok(new
        {
            action = "updated"
        });
    }

    // DELETE api/task/5
    [HttpDelete("{id}")]
    public ObjectResult DeleteTask(int id)
    {
        var task = _context.Tasks.Find(id);
        if (task != null)
        {
            _context.Tasks.Remove(task);
            _context.SaveChanges();
        }

        return Ok(new
        {
            action = "deleted"
        });
    }
}

}

链接控制器

接下来,您应该为Links创建一个控制器:
控制器/LinkController.cs
using System.Collections.Generic;
using System.Linq;
using Microsoft.EntityFrameworkCore;
using Microsoft.AspNetCore.Mvc;
using DHX.Gantt.Models;

namespace DHX.Gantt.Controllers
{
[Produces(“application/json”)]
[Route(“api/link”)]
public class LinkController : Controller
{
private readonly GanttContext _context;
public LinkController(GanttContext context)
{
_context = context;
}

    // GET api/Link
    [HttpGet]
    public IEnumerable<WebApiLink> Get()
    {
        return _context.Links
            .ToList()
            .Select(t => (WebApiLink)t);
    }

    // GET api/Link/5
    [HttpGet("{id}")]
    public WebApiLink Get(int id)
    {
        return (WebApiLink)_context
            .Links
            .Find(id);
    }

    // POST api/Link
    [HttpPost]
    public ObjectResult Post(WebApiLink apiLink)
    {
        var newLink = (Link)apiLink;

        _context.Links.Add(newLink);
        _context.SaveChanges();

        return Ok(new
        {
            tid = newLink.Id,
            action = "inserted"
        });
    }

    // PUT api/Link/5
    [HttpPut("{id}")]
    public ObjectResult Put(int id, WebApiLink apiLink)
    {
        var updatedLink = (Link)apiLink;
        updatedLink.Id = id;
        _context.Entry(updatedLink).State = EntityState.Modified;


        _context.SaveChanges();

        return Ok(new
        {
            action = "updated"
        });
    }

    // DELETE api/Link/5
    [HttpDelete("{id}")]
    public ObjectResult DeleteLink(int id)
    {
        var Link = _context.Links.Find(id);
        if (Link != null)
        {
            _context.Links.Remove(Link);
            _context.SaveChanges();
        }

        return Ok(new
        {
            action = "deleted"
        });
    }
}

}

数据控制器

最后,您需要为数据操作创建一个控制器:
控制器/DataController.cs
using System.Collections.Generic;
using System.Linq;

using Microsoft.AspNetCore.Mvc;
using DHX.Gantt.Models;

namespace DHX.Gantt.Controllers
{
[Produces(“application/json”)]
[Route(“api/data”)]
public class DataController : Controller
{
private readonly GanttContext _context;
public DataController(GanttContext context)
{
_context = context;
}

    // GET api/data
    [HttpGet]
    public object Get()
    {
        return new
        {
            data = _context.Tasks.ToList().Select(t => (WebApiTask)t),
            links = _context.Links.ToList().Select(l => (WebApiLink)l)

        };
    }

}

}
都准备好了。您可以运行该应用程序,并查看完整的Gantt。
带有ASP.NET Core的dhtmlxGantt教程:如何实施Web API

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Highgantt 是用纯 JavaScript 编写的甘特图控件 主要优势(功能特点) browsers兼容性 Highstock 可以在所有的移动设备及电脑上的浏览器中使用,包括 iPhone,iPad 和 IE6 以上的版本。在 IOS 和 Android 系统中 Highstock 支持多点触摸功能,因而可以给您提供极致的用户体验。在现代的浏览器中使用 SVG 技术进行图形绘制,在低版本 IE 则使用 VML 进行图形绘制。 free非商业使用免费 在个人网站、学校网站及非盈利机构中使用 Highstock 完全不需要经过我们的许可,直接可以任意使用! 商业网站或网站,请查看我们的 使用协议及价格。 open开源 Highstock 最重要的特点之一就是:无论免费版还是付费版,你都可以下载源码并可以对其进行编辑。 基于开源社区我们可以第一时间获取用户的需求、Bug 修复及吸收社区贡献。 no-backend纯 JavaScript Highstock 完全基于 HTML5 技术,不需要再客户端安装任何插件,如 Flash 或 Java。此外你也不用配置任何服务端环境,不需要 PHP、Tomcat、ASP.NET 等,只需要两个 JS 文件即可运行。 chart-types图表种类丰富 Highstock 支持直线图、折线图、面积图、面积曲线图、柱形图、散点图、蜡烛图(OHLC)、K线图、标签图、面积范围图、柱形范围图等多种图表, 其中很多图表可以集成在同一个图形中形成混合图 config-syntax简单的配置语法 在 Highstock 中设置配置选项不需要任何高级的编程技术,所有的配置都是 JSON 对象,只包含用冒号连接的键值对、用逗号进行分割、用括号进行对象包裹。JSON 具有易于人阅读和编写,同时也易于机器解析和生成的特点。 动态交互性 Highstock 支持丰富交互性,在图表创建完毕后,可以用丰富的 API 进行添加、移除或修改数据列、数据点、坐标轴等操作。 结合 jQuery 的 ajax 功能,可以做到实时刷新数据、用户手动修改数据等功能,结合事件处理,可以做到各种交互功能。 范围选择器 在处理大数据集时,我们可能需要查看不同时间范围的数据。Highstock 提供了范围选择器,方便的用它来选择预设范围的时间,例如 1个月、一季度、1年等,你可以通过时间输入框来选择自己想要查看数据范围。 滚动条和导航器 通过滚动条和导航器可以更加直观的操作和查看特定范围的数据。 事件标记 通过添加标志数据列可以为数据相关的事件做标记和注释。 支持多坐标轴 多个数据进行对比这是非常常见的需求,Highstock 可以让你为每个类型的数据添加坐标轴,每个轴可以定义放置的位置,所有的设置都可以独立生效,包括旋转、样式设计和定位,当然也支持多个数据共用一个坐标轴。 tooltip数据提示框 当鼠标划过图形时,Highstock 可以将数据点或数据列的信息展示在提示框中,并且提示框会跟随用户的鼠标;我们做了大量工作,可以智能的显示离鼠标最近的点或被遮盖点的信息。 datetime时间轴 Highstock 对时间轴的处理非常智能,可以精确的计算出月、周、日、小时、分钟等时间刻度的位置。 data grouping数据分组与合并 如果数据集包含 10 万个,浏览器对每个点进行计算并渲染的话效率会非常低。Highstock 具有数据分类功能,可以以飞速的进行数据分组;放大至小范围的数据是会重新分组,因为你可以查看高度清晰的数据又不失效率和速度。 exporting导出和打印 Highstock 支持导出功能,用户可以一键导出 PNG、JPEG、PDF 或 SVG 文件,通过插件可以实现导出为 Excel 文件功能;另外,用户还可以从网页上直接打印图表。 zooming缩放和平移 除了通过滚动条或导航器控制放大和平移功能,你还可以通过鼠标和手指来进行这两个操作。 ajax方便加载外部数据 Highstock 的数据是 JavaScript 数组或对象,这些数据可以是本地的配置对象,独立的数据文件(JSON、CVS)甚至是不同的网站上定义。另外,这些数据可以用任何形式处理好并加载到 Highstock 中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值