Hi,
Please follow full an implementation of a table in my site:
# In the server site:
+ API section
[HttpGet("[action]")]
public IEnumerable<ControllerDevice> GetAllControllerDevice(int Level)
{
return this._context.ControllerDevices.Where(p => Level == 0 ? true : p.Level == Level);
}
+ CRUD action
[HttpPost]
public async Task<IActionResult> CrudControllerAction([FromBody]CRUDViewModel<ControllerDevice> CAction)
{
switch (CAction.action)
{
case "update":
await this.EditControllerDevice(CAction.value);
break;
case "remove":
await this.RemoveControllerDevice(CAction.key);
break;
default:
break;
}
return View(nameof(AddNewControllerDevice));
}
private async Task RemoveControllerDevice(object key)
{
var removingCtrlDevice = this._context.ControllerDevices.Where(p => p.ControllerDeviceId.ToString() == key.ToString()).FirstOrDefault();
if (removingCtrlDevice != null)
{
this._context.ControllerDevices.Remove(removingCtrlDevice);
await this._context.SaveChangesAsync();
}
}
+ Model section:
1)
public class ControllerDevice : AuditInfo
{
[DatabaseGenerated(DatabaseGeneratedOption.Identity), Key]
public int ControllerDeviceId { get; set; }
[StringLength(maximumLength: 128)]
public string IMEI { get; set; }
public int Level { get; set; }
public int? Zone { get; set; }
[StringLength(maximumLength: 256)]
public string Description { get; set; }
}
2)
public class AuditInfo
{
public DateTime? CreatedAt { get; set; }
public DateTime? UpdatedAt { get; set; }
[StringLength(maximumLength: 128)]
public string CreatedBy { get; set; }
[StringLength(maximumLength: 128)]
public string UpdatedBy { get; set; }
}
3)
public class CRUDViewModel<T> where T: class
{
public string action { get; set; }
public object key { get; set; }
public string antiForgery { get; set; }
public T value { get; set; }
public List<T> Added { get; set; }
public List<T> Changed { get; set; }
public List<T> Deleted { get; set; }
}
+ Serialized data:
[{"controllerDeviceId":7,"imei":"869033029500031","level":2,"zone":null,"description":"Cụm tủ 1, phòng ban tài chính quản lý","createdAt":"2019-09-11T15:15:11.1491207","updatedAt":null,"createdBy":"toannm","updatedBy":null},{"controllerDeviceId":8,"imei":"309100073247344","level":2,"zone":null,"description":"Cụm tủ 2, phòng ban tài chính quản lý","createdAt":"2019-09-11T15:15:54.2114776","updatedAt":null,"createdBy":"toannm","updatedBy":null},{"controllerDeviceId":9,"imei":"917093035311098","level":3,"zone":null,"description":"Cụm tủ 5, phòng vật tư quản lý","createdAt":"2019-09-11T15:16:18.2574173","updatedAt":null,"createdBy":"toannm","updatedBy":null},{"controllerDeviceId":10,"imei":"861405127980570","level":3,"zone":null,"description":"Cụm tủ 7, phòng kỹ thuật quản lý","createdAt":"2019-09-11T15:16:35.5731869","updatedAt":null,"createdBy":"toannm","updatedBy":null},{"controllerDeviceId":11,"imei":"66f7476ab8854405","level":3,"zone":null,"description":"Cụm tủ 6, Phòng ban test thiết bị quản lý","createdAt":"2019-09-11T16:34:43.1048309","updatedAt":null,"createdBy":"toannm","updatedBy":null},{"controllerDeviceId":12,"imei":"8c846d11beab7281","level":3,"zone":null,"description":"Cụm tủ 1, phòng ban test","createdAt":"2019-09-11T10:22:05","updatedAt":"2019-09-11T17:24:05.6372802","createdBy":"toannm","updatedBy":"toannm"},{"controllerDeviceId":14,"imei":"359411082849700","level":1,"zone":null,"description":"Cụm Test","createdAt":"2019-09-25T01:09:11.8347213","updatedAt":null,"createdBy":"toannm","updatedBy":null},{"controllerDeviceId":15,"imei":"d8dde00bb75e0a08","level":23,"zone":null,"description":"Tầng 3, Zone 2","createdAt":"2019-09-26T07:42:45","updatedAt":"2019-09-26T14:45:22.7609674","createdBy":"toannm","updatedBy":"toannm"}]
# In .html file
<div id="DvTotalLevel">
</div>
# In .js file:
var controllerData = ej.DataManager({
url: "/api/LockerAPI/GetAllControllerDevice",
adaptor: new ej.WebApiAdaptor(),
offline: true,
});
controllerData.ready.done(function (e) {
$("#DvTotalLevel").ejGrid({
dataSource: ej.DataManager({
json: e.result,
adaptor: new ej.remoteSaveAdaptor(),
crudUrl: "CrudControllerAction",
}),
allowPaging: true,
pageSettings: { pageSize: 10, pageSizeList: [10, 15, 20, 25] },
allowResizing: true,
isResponsive: true,
enableResponsiveRow: true,
allowResizeToFit: true,
locale: "vi-VN",
editSettings: {
allowEditing: true,
allowDeleting: true,
showDeleteConfirmDialog: true,
},
columns: [
{ field: "controllerDeviceId", visible: false, isPrimaryKey: true, isIdentity: true },
{ field: "createdAt", visible: false },
{ field: "createdBy", visible: false },
{ field: "updatedAt", visible: false },
{ field: "updatedBy", visible: false },
{ field: "level", headerText: "Tầng", width: 100 },
{ field: "imei", headerText: "Mã định danh" },
{ field: "zone", headerText: "Khu vực" },
{ field: "description", headerText: "Mô tả" },
{
headerText: "Tiện ích",
commands: [
{ type: "delete", buttonOptions: { text: "<i class='far fa-trash-alt'></i>" } },
],
headerTextAlign: "center",
textAlign: "center",
width: 100,
}
]
});
});
# Screenshot before the deletion
After the deletion:
