How to perform CRUD actions in Gantt Chart using entity framework?
In ASP.NET Core Gantt Chart, you can load data from SQL database using the entity framework, and you can perform CRUD actions to update the SQL database.
To install NuGet packages for the following two things, use the EF Core in the application:
- EF Core DB provider
- EF Core tools
Step 1: Click Tools > NuGet Package Manager > Manage NuGet Packages for installing Microsoft.EntityFrameworkCore.SqlServer NuGet package to Install the EF Core DB provider.
Step 2: To Install EF Core Tools, install the Microsoft.EntityFrameworkCore.Tools NuGet package.
Step 3: To create entity and context classes in Visual Studio, select Tools > NuGet Package Manger > Package Manger Console and run the following command.
PM>Scaffold-DbContext "Server=servername;Database=databasename;Trusted_Connection=True;" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models
The above command creates entity classes for each table in the SQL database.
Now, you can perform CRUD actions and update the remote data from the Gantt chart by using the actionComplete client-side event. Using the AJAX method, you can update the remote data from client side.
Find the following code example to render Gantt using the EF Core context.
using GanttCRUD.Models;
public IActionResult Index()
{
var context = new masterContext();
var dataSource = context.GanttData.ToList();
ViewBag.datasource = dataSource;
return View();
}
Find the following code example for client-side actions.
function actionComplete(args) {
//To update on indent,outdent,taskbar editing and predecessor drawn action
if (args.requestType == "indent" || args.requestType == "outdent" || args.requestType == "recordUpdate" || (args.requestType === 'save' && args.modifiedRecord) || args.requestType == "drawConnectorLine") {
var ganttRec = [];
// Dialog Editing
if (args.requestType == "save")
ganttRec.push(args.modifiedRecord);
else if (args.requestType == "drawConnectorLine")
ganttRec.push(args.currentRecord);
else
ganttRec.push(args.data); // Cell Editing
if (args.updatedRecords && args.updatedRecords.length)
ganttRec = ganttRec.concat(args.updatedRecords);
updateModifiedGanttRecords(ganttRec);
}
//Newly Added Record is obtained here , which can be updated to database
else if (args.requestType == "save" && args.addedRecord) {
var data = args.addedRecord.item;
$.ajax({
type: "POST",
url: '/Gantt/Add',
data: data,
dataType: "json",
});
// args.updatedRecords will have the array of dependent hierarchy of modified
//parents record when add new record as child of another record.
if (args.updatedRecords && args.updatedRecords.length)
updateModifiedGanttRecords(args.updatedRecords);
}
else if (args.requestType == "dragAndDrop") {
var ganttRec = [];
ganttRec.push(args.draggedRow);
if (args.updatedRecords && args.updatedRecords.length)
ganttRec = ganttRec.concat(args.updatedRecords);
updateModifiedGanttRecords(ganttRec);
}
//To update the database on delete action
else if (args.requestType == "delete") {
var data = args.data.item;
$.ajax({
type: "POST",
url: '/Gantt/Delete',
// contentType: "application/json; charset=utf-8",
data: data,
dataType: "json",
});
if (args.data.hasChildRecords) {
deleteChildRecords(args.data);
}
if (args.updatedRecords && args.updatedRecords.length)
updateModifiedGanttRecords(args.updatedRecords);
}
}
function updateModifiedGanttRecords(records) {
if (records && records.length) {
var length = records.length;
for (var i = 0; i < length; i++) {
var data = records[i].item;
data.StartDate = new Date(data.StartDate).toUTCString();
data.EndDate = new Date(data.EndDate).toUTCString();
$.ajax({
type: "POST",
url: '/Gantt/Update', //Update is Server side method
data: data,
dataType: "json",
});
}
}
}
//Delete inner level child records
function deleteChildRecords(record) {
var childRecords = record.childRecords,
length = childRecords.length,
count, currentRecord;
for (count = 0; count < length; count++) {
currentRecord = childRecords[count];
var data = currentRecord.item;
$.ajax({
type: "POST",
url: '/Gantt/Delete',
data: data,
dataType: "json",
});
if (currentRecord.hasChildRecords) {
deleteChildRecords(currentRecord);
}
}
}
Insert action
[HttpPost()]
public ActionResult Add(GanttData Task)
{
using (var context = new masterContext())
{
var insertData = new GanttData()
{
Id = Task.Id,
Name = Task.Name,
StartDate = Task.StartDate,
EndDate = Task.EndDate,
ParentId = Task.ParentId,
Progress = Task.Progress
};
context.GanttData.Add(insertData);
context.SaveChanges();
}
return Json(Task);
}
Update action
[HttpPost()]
public ActionResult Update(GanttData Tasks)
{
using (var context = new masterContext())
{
var updateData = context.GanttData.FirstOrDefault(x => x.Id == Tasks.Id);
updateData.Id = Tasks.Id;
updateData.Name = Tasks.Name;
updateData.StartDate = Tasks.StartDate;
updateData.EndDate = Tasks.EndDate;
updateData.ParentId = Tasks.ParentId;
updateData.Progress = Tasks.Progress;
context.SaveChanges();
}
return Json(Tasks);
}
Delete action
[HttpPost()]
public ActionResult Delete(GanttData Task)
{
using (var context = new masterContext())
{
var deleteData = context.GanttData.Single(r => r.Id == Task.Id);
context.GanttData.Remove(deleteData);
context.SaveChanges();
}
return Json(Task);
}
Refer here to find the sample for CRUD actions using EF Core in Gantt.
Conclusion
I hope you enjoyed learning about how to perform CRUD actions in Gantt Chart using entity framework.
You can refer to our ASP.NET Core Gantt feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET Coe Gantt example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
