我的 Blazor 应用程序有一个带有自定义工具栏的网格，其中包含“创建”和“编辑”操作，就像这样......
我已经连接了“新建”操作，这样我就可以调用一个可重用的对话框来创建记录。
但是，我无法弄清楚如何传递已编辑记录的唯一键，以便我可以使用相同的可重用对话框来编辑记录。
在 My_Templates.razor 文件中，我检查我们是否点击了 Add 或 Edit 按钮并采取了适当的操作。但在编辑操作中，我不知道如何传递所选记录的唯一键。这是第一个问题。
这是 My_Template.razor 页面的代码：
@page "/"
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Popups
<ReusableDialog @ref="dialog"></ReusableDialog>
<SfGrid @ref="Grid" AllowPaging="true" DataSource="@Orders" Mode="EditMode.Dialog" AllowSorting="true" Toolbar="ToolbarItems">
<GridEvents OnToolbarClick="OnClicked" TValue="Order"></GridEvents>
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog" Dialog="DialogParams"></GridEditSettings>
<GridColumns>
<GridColumn Field=@nameof(Order.templateID) HeaderText="Template ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="20"></GridColumn>
<GridColumn Field=@nameof(Order.owner) HeaderText="Owner" ValidationRules="@(new ValidationRules { Required = true })" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.users) HeaderText="Users" TextAlign="TextAlign.Left" Width="130"></GridColumn>
<GridColumn Field=@nameof(Order.description) HeaderText="Description" TextAlign="TextAlign.Left" Width="130"></GridColumn>
<GridColumn Field=@nameof(Order.fundType) HeaderText="Fund Type" TextAlign="TextAlign.Left" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code{
public Index IndexPage = new Index();
SfDialog infoDialog;
public bool IsVisible { get; set; } = false;
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"}
};
ReusableDialog dialog;
public void ReturnValue(string value)
{
if (value == "Ok Clicked")
{
// your code execution
}
else
{
// your code execution
}
}
public async Task OnClicked(Syncfusion.Blazor.Navigations.ClickEventArgs Args)
{
if (Args.Item.Id == "Add")
//Call Dialog Box Here
dialog.Title = "This is the Add Title";
dialog.Text = "This is the add text";
dialog.OpenDialog();
if (Args.Item.Id == "Edit")
//Call Dialog Box Here
dialog.Title = "This is the Edited Title";
dialog.Text = "This is the edited text";
dialog.templateID = 2; //WHAT DO I PUT HERE
dialog.OpenDialog();
}
protected override void OnInitialized()
{
Orders = Enumerable.Range(1, 75).Select(x => new Order()
{
templateID = 1000 + x,
owner = (new string[] { "Bryan", "Amy", "Bob", "Jerry", "Zoe" })[new Random().Next(5)],
users = (new string[] { "Bryan", "Amy", "Bob", "Jerry", "Zoe" })[new Random().Next(5)],
description = (new string[] { "Template 1", "Template 2", "Template 3", "Template 4", "Template 5" })[new Random().Next(5)],
fundType = (new string[] { "Wire", "ACH", "Reserve Funds for Wire", "Wire", "Wire" })[new Random().Next(5)],
}).ToList();
}
public List<Order>
Orders
{ get; set; }
private DialogSettings DialogParams = new DialogSettings { MinHeight = "800px", Width = "1200px" };
SfGrid<Order>
Grid
{ get; set; }
public void Clicked()
{
Grid.StartEditAsync();
}
public IEditorSettings OrderEditParams = new NumericEditCellParams
{
Params = new NumericTextBoxModel<object>
()
{ Placeholder = "Order ID" }
};
public class Order
{
public int? templateID { get; set; }
public string owner { get; set; }
public string users { get; set; }
public string description { get; set; }
public string fundType { get; set; }
}
}
第二个问题是在我的 ReusableDialog 框中我不确定如何检索记录。或者也许我应该从上面的视图传递整个记录？
这是我的 reusableDialog.Razor 文件的代码：
@page "/reusable-dialog"
@using Syncfusion.Blazor.Popups
@using Blazor_EditForm.Data
<div id="DialogTarget">
<SfDialog Target="#DialogTarget" Width="1200px" IsModal="true" ShowCloseIcon="true" @bind-Visible="@IsOpen">
<DialogTemplates>
<Header><h4 class="modal-title">@templateID</h4></Header>
<Content>
<EditForm Model="@employee" OnValidSubmit="@OnValidSubmit">
<DataAnnotationsValidator />
<label>Owner</label>
<InputText id="owner" @bind-Value="employee.owner" class="form-control" />
<label>Users</label>
<InputText id="users" @bind-Value="employee.users" class="form-control" />
<label>Description</label>
<InputTextArea @bind-Value="employee.description" class="form-control" rows="4" />
<label>Fund Type</label>
<p></p>
<InputRadioGroup @bind-Value="employee.fundType" class="form-control">
@foreach (var option in rdOptions)
{
<InputRadio Value="option" /> @option <br />
}
</InputRadioGroup>
</EditForm>
</Content>
</DialogTemplates>
<DialogButtons>
<DialogButton Content="OK" IsPrimary="true" OnClick="@OkClick" />
<DialogButton Content="Cancel" IsPrimary="false" OnClick="@CancelClick" />
</DialogButtons>
</SfDialog>
</div>
@code {
//Parameters
[Parameter]
public int templateID { get; set; }
[Parameter]
public string Title { get; set; }
[Parameter]
public string Text { get; set; }
[Parameter]
public Employee employee { get; set; } = new Employee();
//public Employee employee { get; set; }
[Parameter]
public string ButtonText { get; set; } = "Save";
[Parameter]
public EventCallback OnValidSubmit { get; set; }
[Parameter]
public bool IsOpen { get; set; } = false;
[Parameter]
public string IsClosed { get; set; }
List<string> rdOptions = new List<string> { " Fund Type 1", " Fund Type 2", " Fund Type 3" };
SfDialog DialogObj;
public Index IndexPage = new Index();
//public MyTemplates My_Templates = new My_Templates();
public void OpenDialog()
{
IsOpen = true;
this.StateHasChanged();
}
private void OkClick()
{
IsOpen = false;
this.StateHasChanged();
this.IsClosed = "Ok Clicked";
//IndexPage.ReturnValue(this.IsClosed);
}
private void CancelClick()
{
IsOpen = false;
this.StateHasChanged();
this.IsClosed = "Cancel Clicked";
//IndexPage.ReturnValue(this.IsClosed);
}
}
任何帮助将不胜感激。对 Blazor 来说非常新，所以如果这是错误的方法，很高兴知道使用对话框从网格中添加/编辑/删除记录的设计模式。
谢谢。