编辑

ListView允许您通过专用的编辑模板．您可以将项目置于编辑/插入模式，也可以通过列表视图中的专用命令按钮删除项目。

要调用命令，请使用ListViewCommandButton组件的模板中。它可以采用以下内置的命令价值观:

• 添加元素初始化一个新项插入EditTemplate在listview的顶部。
• 编辑-将项目放在whose中模板它处于编辑模式，所以它呈现它的EditTemplate．
• 保存-保存当前编辑/插入项目的更改。
• 删除-删除当前项。
• 取消-取消当前操作(例如，将已编辑项置于读模式而不保存更改，或删除新插入的项)。

命令按钮公开了标准的按钮特性，如图标、文本、主状态和控件OnClick事件处理程序，可以用来实现自定义命令，尽管您可以为此使用任何按钮或DOM事件处理程序。

CUD操作是通过专门的事件来实现的，这些事件可以让你改变数据源(无论是在视图模型中，还是在实际的数据库中):

• OnUpdate-在保存现有项目时触发。
• OnEdit-当用户点击编辑命令时触发，可取消。
• OnCreate-保存新项目时触发。
• OnDelete-当项目被删除时触发。
• 虚-当点击取消按钮时触发。

实际的数据源操作取决于应用程序，必须在列表视图提供的事件中实现。实现漂亮的呈现取决于应用程序，本例展示了可用事件和命令的基础知识。*@   
 
< TelerikDropDownList Data="@Teams" @bind-Value="@context. "Team" /> Save Cancel 
    Add Employee 
In this sample, the first item will not open for editing because of the code in the OnEdit handler
   @code{ List ListViewData { get; set; } List Teams { get; set; } async Task UpdateHandler(ListViewCommandEventArgs args) { Employee item = (Employee)args.Item; // perform actual data source operation here through your service await MyService.Update(item); // update the local view-model data with the service data await GetListViewData(); } async Task DeleteHandler(ListViewCommandEventArgs args) { Employee item = (Employee)args.Item; // perform actual data source operation here through your service await MyService.Delete(item); // update the local view-model data with the service data await GetListViewData(); } async Task CreateHandler(ListViewCommandEventArgs args) { Employee item = (Employee)args.Item; // perform actual data source operation here through your service await MyService.Create(item); // update the local view-model data with the service data await GetListViewData(); } async Task EditHandler(ListViewCommandEventArgs e) { Employee currItem = e.Item as Employee; // prevent opening an item for editing on condition if (currItem.Id < 2) { e.IsCancelled = true; } } async Task CancelHandler(ListViewCommandEventArgs e) { Employee changedItem = e.Item as Employee; // this is the item as the user edited it, but chose to cancel editing/inserting Console.WriteLine($"user changed item {changedItem.Id} to have Name: {changedItem.Name} and Team: {changedItem.Team}"); } // data and models follow async Task GetListViewData() { ListViewData = await MyService.Read(); Teams = await MyService.GetTeams(); } protected override async Task OnInitializedAsync() { await GetListViewData(); } public class Employee { public int Id { get; set; } public string Name { get; set; } public string Team { get; set; } } // the following static class mimics an actual data service that handles the actual data source // replace it with your actual service through the DI, this only mimics how the API can look like and works for this standalone page public static class MyService { private static List _data { get; set; } = new List(); private static List _teams = new List { "Sales", "Dev", "Support" }; public static async Task Create(Employee itemToInsert) { itemToInsert.Id = _data.Count + 1; _data.Insert(0, itemToInsert); } public static async Task> Read() { if (_data.Count < 1) { for (int i = 1; i < 50; i++) { _data.Add(new Employee() { Id = i, Name = $"Name {i}", Team = _teams[i % _teams.Count] }); } } return await Task.FromResult(_data); } public static async Task> GetTeams() { return await Task.FromResult(_teams); } public static async Task Update(Employee itemToUpdate) { var index = _data.FindIndex(i => i.Id == itemToUpdate.Id); if (index != -1) { _data[index] = itemToUpdate; } } public static async Task Delete(Employee itemToDelete) { _data.Remove(itemToDelete); } } }

也可以在编辑/插入模板中添加验证，并通过取消OnUpdate而且OnCreate事件，取决于验证的结果(是本地的)DataAnnotation验证，或通过数据服务进行远程验证)。你可以在ListView验证示例项目。

另请参阅

• ListView概述