在后端数据源更改后更新SyncFusion Grid

Question

我有一个SyncFusion数据网格绑定到后端SQL数据库。我的crud操作是通过调用对话框的自定义按钮调用的。

除了在添加/编辑/删除后不使用后端数据更新网格之外，这工作得很好。我已经尝试刷新网格，但似乎不起作用。

我需要做什么?

MyTemplates.razor

@page "/My_Templates"
@using WireDesk.Models
@inject IWireDeskService WireDeskService

<ReusableDialog @ref="dialog"></ReusableDialog>
<SfGrid @ref="Grid" DataSource="@Templates" TValue="Template" AllowSorting="true" Toolbar="ToolbarItems">
<GridEvents OnToolbarClick="OnClicked" TValue="Template"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(Template.Owner) HeaderText="Owner" ValidationRules="@(new ValidationRules { Required = true })" Width="120"></GridColumn>
<GridColumn Field=@nameof(Template.Users) HeaderText="Users" TextAlign="TextAlign.Left" Width="130"></GridColumn>
<GridColumn Field=@nameof(Template.Description) HeaderText="Description" TextAlign="TextAlign.Left" Width="130"></GridColumn>
<GridColumn Field=@nameof(Template.FundType) HeaderText="Fund Type" TextAlign="TextAlign.Left" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code{
//Instantiate objects
SfGrid<Template> Grid { get; set; }
ReusableDialog dialog;
//Instantiate toolbar and toolbar items
private List<Object> ToolbarItems = new List<Object>()
{
new ItemModel() { Text = "Create New Template", TooltipText = "Add", PrefixIcon = "e-icons e-update", Id = "Add", },
new ItemModel() { Text = "Edit Template", TooltipText = "Edit", PrefixIcon = "e-icons e-update", Id = "Edit"}
};
//Instatiate records
public IEnumerable<Template> Templates { get; set; }
//Instantiate Records
protected override void OnInitialized()
{
Templates = WireDeskService.GetTemplates();
}
//Handle toolbar clicks
public async Task OnClicked(Syncfusion.Blazor.Navigations.ClickEventArgs Args)
{
//Create Record
if (Args.Item.Id == "Add")
{
Args.Cancel = true; //Prevent the default action
dialog.Title = "This is the Add Title";
dialog.Text = "This is the add text";
dialog.template = new Template();
dialog.OpenDialog();
WireDeskService.InsertTemplate(dialog.template);
//Grid.CallStateHasChanged();                            Doesn't Work
//Templates = WireDeskService.GetTemplates();            Doesn't Work
}
//Edit Records
if (Args.Item.Id == "Edit")
{
Args.Cancel = true; //Prevent the default action
var selected = await Grid.GetSelectedRecordsAsync();
if (selected.Count > 0)
{
//Call Dialog Box Here
dialog.Title = "This is the Edited Title";
dialog.Text = "This is the edited text";
dialog.template = selected[0];
dialog.OpenDialog();
WireDeskService.UpdateTemplate(dialog.template.TemplateId, dialog.template);
Grid.CallStateHasChanged();
}
}
}
}
<style>
.e-altrow {
background-color: rgb(182 201 244);
}
</style>

WireDeskService.cs

using Microsoft.EntityFrameworkCore;
using System;
using System.Collections.Generic;
using System.Linq;
namespace WireDesk.Models
{
public class WireDeskService : IWireDeskService
{
private WireDeskContext _context;
public WireDeskService(WireDeskContext context)
{
_context = context;
}
public void DeleteTemplate(long templateId)
{
try
{
Template ord = _context.Templates.Find(templateId);
_context.Templates.Remove(ord);
_context.SaveChanges();
}
catch
{
throw;
}
}
public IEnumerable<Template> GetTemplates()
{
try
{
return _context.Templates.ToList();
}
catch
{
throw;
}
}
public void InsertTemplate(Template template)
{
try
{
_context.Templates.Add(template);
_context.SaveChanges();
}
catch
{
throw;
}
}
public Template SingleTemplate(long id)
{
throw new NotImplementedException();
}
public void UpdateTemplate(long templateId, Template template) {
try
{
var local = _context.Set<Template>().Local.FirstOrDefault(entry => entry.TemplateId.Equals(template.TemplateId));
// check if local is not null
if (local != null)
{
// detach
_context.Entry(local).State = EntityState.Detached;
}
_context.Entry(template).State = EntityState.Modified;
_context.SaveChanges();
}
catch
{
throw;
}
}
void IWireDeskService.SingleTemplate(long templateId)
{
throw new NotImplementedException();
}
}
}

Answer 1

我们已经分析了您的查询，我们理解当使用DataSource属性将数据绑定到Grid时，您希望在数据库中保存更改。我们想告诉你，当数据使用DataSource属性绑定到Grid组件时，CRUD动作需要使用ActionEvents (OnActionComplete和OnActionBegin)来处理。

OnActionBegin事件-将在某些操作启动时触发。
OnActionComplete事件-当某个动作完成时会触发。

我们建议您在RequestType为save时使用Grid的OnActionBegin事件来实现在数据库中保存更改的要求。在保存记录时，无论Add或Update操作如何。当RequestType为Save时将触发OnActionBegin事件。在这种情况下，我们可以将更改更新到数据库。

由于Add和Edit操作共享相同的RequestType " Save "，我们可以使用Args来区分当前操作。行动的论点。同样，我们要求您从数据库中获取更新的数据，并在Grid的OnActionComplete事件中绑定到Grid。

参考下面的代码示例。

<SfGrid @ref="Grid" DataSource="@GridData" Toolbar="@(new List<string> { "Add", "Edit", "Delete", "Cancel", "Update" })" AllowFiltering="true" AllowSorting="true" AllowPaging="true"> 
<GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"></GridEditSettings> 
<GridEvents OnActionBegin="OnBegin" OnActionComplete="OnComplete" TValue="Order"></GridEvents> 
<GridColumns> 
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsIdentity="true" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 
<GridColumn Field=@nameof(Order.EmployeeID) HeaderText="Id" Width="150"></GridColumn> 
</GridColumns> 
</SfGrid> 
@code{ 
SfGrid<Order> Grid { get; set; } 
public IEnumerable<Order> GridData { get; set;} 
protected override void OnInitialized() 
{ 
GridData = OrderData.GetAllOrders().ToList(); 
} 
public void OnComplete(ActionEventArgs<Order> Args) 
{ 
if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Save || Args.RequestType == Syncfusion.Blazor.Grids.Action.Refresh) 
{ 
GridData = OrderData.GetAllOrders().ToList(); // fetch updated data from service and bind to grid datasource property 
} 
} 
public void OnBegin(ActionEventArgs<Order> Args) 
{ 
if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Save) // update the changes in Actionbegine event 
{ 
if (Args.Action == "Add") 
{ 
//Args.Data contain the inserted record details 
//insert the data into your database 
OrderData.AddOrder(Args.Data); 
} 
else 
{ 
//Args.Data contain the updated record details 
//update the data into your database 
OrderData.UpdateOrder(Args.Data); 
} 
}        else if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Delete) 
{ 
OrderData.DeleteOrder(Args.Data.OrderID); // delete the record from your database 
} 
} 
} 

参考我们的UG文档https://blazor.syncfusion.com/documentation/datagrid/events/onactionbegin
https://blazor.syncfusion.com/documentation/datagrid/events/onactioncomplete