syncfusion-aspnetcore-listview

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing ListView in ASP.NET Core

在ASP.NET Core中实现ListView

The ListView component is a powerful, feature-rich control that displays data in interactive hierarchical structures. It supports data binding (local and remote), grouping, nested lists, custom templates, virtualization for performance, and comprehensive keyboard accessibility.

ListView组件是一个功能强大的控件，可在交互式层级结构中显示数据。它支持数据绑定（本地和远程）、分组、嵌套列表、自定义模板、用于性能优化的虚拟化，以及全面的键盘可访问性。

When to Use This Skill

何时使用该技能

Use this skill when you need to:

Display Interactive Lists: Render data collections with click selection, hover effects, and visual feedback
Group Related Items: Organize list items into categories using the
```
groupBy
```
field
Support Nested Navigation: Create multi-level hierarchies with parent-child relationships
Optimize Performance: Handle large datasets (1000+ items) with UI virtualization
Customize Appearance: Apply templates for headers, items, and group titles
Enable Selection: Implement single or multi-select with checkboxes
Handle Remote Data: Bind to server APIs with DataManager and Query
Implement Keyboard Access: Support keyboard navigation for accessibility

在以下场景中使用该技能：

显示交互式列表：渲染带有点击选择、悬停效果和视觉反馈的数据集合
分组相关项：使用
```
groupBy
```
字段将列表项组织到分类中
支持嵌套导航：创建带有父子关系的多级层级结构
优化性能：通过UI虚拟化处理大型数据集（1000+条数据）
自定义外观：为表头、列表项和分组标题应用模板
启用选择功能：实现带复选框的单选或多选
处理远程数据：通过DataManager和Query绑定到服务器API
实现键盘访问：支持键盘导航以提升可访问性

Component Overview

组件概述

The ListView component in Syncfusion EJ2 for ASP.NET Core uses TagHelper syntax and exposes core properties:

Category	Key Properties
Data Binding	`dataSource` , `fields` , `query`
Display Control	`template` , `headerTemplate` , `groupTemplate`
User Interaction	`showCheckBox` , `checkBoxPosition` , `sortOrder`
Performance	`enableVirtualization` , `height`
Appearance	`cssClass` , `width` , `showHeader` , `showIcon`
Accessibility	`enableRtl` , event handlers

适用于ASP.NET Core的Syncfusion EJ2 ListView组件使用TagHelper语法，并公开以下核心属性：

类别	核心属性
数据绑定	`dataSource` , `fields` , `query`
显示控制	`template` , `headerTemplate` , `groupTemplate`
用户交互	`showCheckBox` , `checkBoxPosition` , `sortOrder`
性能优化	`enableVirtualization` , `height`
外观设置	`cssClass` , `width` , `showHeader` , `showIcon`
可访问性	`enableRtl` , 事件处理程序

Documentation and Navigation Guide

文档与导航指南

Getting Started & Data Binding

入门与数据绑定

📄 Read: references/getting-started-and-data-binding.md

ASP.NET Core project setup and TagHelper import
DataSource property variations (array, JSON, remote)
Field mapping for text, id, and nested properties
Remote data binding with DataManager and Query
Basic ListView initialization examples

📄 阅读： references/getting-started-and-data-binding.md

ASP.NET Core项目设置与TagHelper导入
DataSource属性的多种形式（数组、JSON、远程数据）
文本、ID和嵌套属性的字段映射
使用DataManager和Query进行远程数据绑定
基础ListView初始化示例

Field Settings & Configuration

字段设置与配置

📄 Read: references/field-settings-and-configuration.md

Complete field mapping options (14 properties)
iconCss for dynamic icon customization
enabled, isVisible, isChecked state properties
groupBy for categorization logic
child property for nested list support
Validation patterns and edge cases

📄 阅读： references/field-settings-and-configuration.md

完整的字段映射选项（14个属性）
用于动态图标自定义的iconCss
enabled、isVisible、isChecked状态属性
用于分类逻辑的groupBy
支持嵌套列表的child属性
验证模式与边界情况

Grouping, Nested Lists & Virtualization

分组、嵌套列表与虚拟化

📄 Read: references/grouping-nested-lists-virtualization.md

Grouping items by category with groupTemplate
Nested list navigation structure
enableVirtualization for large datasets
Window scroll vs container scroll modes
Conditional rendering in templates
Performance optimization strategies

📄 阅读： references/grouping-nested-lists-virtualization.md

使用groupTemplate按类别分组列表项
嵌套列表导航结构
为大型数据集启用enableVirtualization
窗口滚动与容器滚动模式
模板中的条件渲染
性能优化策略

Templates & Customization

模板与自定义

📄 Read: references/templates-and-customization.md

template property for item customization
headerTemplate and groupTemplate
Built-in CSS classes (e-list-wrapper, e-list-avatar, e-list-badge, etc.)
Avatar and multi-line list patterns
Custom HTML markup in templates

📄 阅读： references/templates-and-customization.md

用于列表项自定义的template属性
headerTemplate和groupTemplate
内置CSS类（e-list-wrapper、e-list-avatar、e-list-badge等）
头像与多行列表模式
模板中的自定义HTML标记

Checkboxes, Selection & Events

复选框、选择与事件

📄 Read: references/checkboxes-selection-events.md

showCheckBox property and positioning (Left/Right)
select event with SelectEventArgs
Multi-item selection patterns
Checked state management
Selection event handling

📄 阅读： references/checkboxes-selection-events.md

showCheckBox属性与位置设置（左/右）
带有SelectEventArgs的select事件
多选项选择模式
选中状态管理
选择事件处理

Styling & Appearance

样式与外观

📄 Read: references/styling-appearance-properties.md

cssClass for custom styling
height and width control
showHeader and showIcon properties
CSS selector reference for styling
Hover and focus state customization

📄 阅读： references/styling-appearance-properties.md

用于自定义样式的cssClass
高度与宽度控制
showHeader和showIcon属性
样式用CSS选择器参考
悬停与聚焦状态自定义

Events & Error Handling

事件与错误处理

📄 Read: references/events-and-error-handling.md

select, scroll, actionBegin, actionComplete events
Event binding in TagHelper
Remote data failure scenarios
Error handling strategies

📄 阅读： references/events-and-error-handling.md

select、scroll、actionBegin、actionComplete事件
TagHelper中的事件绑定
远程数据加载失败场景
错误处理策略

Sorting, Filtering & Scrolling

排序、筛选与滚动

📄 Read: references/sorting-filtering-scrolling.md

sortOrder property (Ascending, Descending)
sortBy field mapping
scroll event for dynamic loading
Infinite scroll patterns
Filter operations

📄 阅读： references/sorting-filtering-scrolling.md

sortOrder属性（升序、降序）
sortBy字段映射
用于动态加载的scroll事件
无限滚动模式
筛选操作

Accessibility & Keyboard Navigation

可访问性与键盘导航

📄 Read: references/accessibility-keyboard-aria.md

Keyboard shortcuts (Arrow Up/Down, Select, Back)
ARIA attributes (aria-selected, aria-level)
enableRtl for right-to-left support
Screen reader compatibility
Best practices for inclusive design

📄 阅读： references/accessibility-keyboard-aria.md

键盘快捷键（上/下箭头、选择、返回）
ARIA属性（aria-selected、aria-level）
支持从右到左布局的enableRtl
屏幕阅读器兼容性
包容性设计最佳实践

Advanced Features & Persistence

高级功能与状态持久化

📄 Read: references/advanced-features-persistence.md

enablePersistence for state retention
animation property with AnimationSettings
locale for localization
disableHtmlEncode and enableHtmlSanitizer
RTL and cultural adaptations

📄 阅读： references/advanced-features-persistence.md

用于状态保留的enablePersistence
带有AnimationSettings的animation属性
用于本地化的locale
disableHtmlEncode和enableHtmlSanitizer
RTL与文化适配

API Reference

API参考

📄 Read: references/api-reference.md

Complete ListView properties (30+ properties documented)
Events reference (select, scroll, actionBegin, actionComplete, actionFailure)
Field mapping API with type signatures
Enumerations (SortOrder, AnimationEffect, etc.)
Method signatures for programmatic control
Event argument types and properties

📄 阅读： references/api-reference.md

完整的ListView属性（30+个已记录属性）
事件参考（select、scroll、actionBegin、actionComplete、actionFailure）
带类型签名的字段映射API
枚举（SortOrder、AnimationEffect等）
用于程序化控制的方法签名
事件参数类型与属性

Quick Start Example

快速入门示例

Basic ASP.NET Core ListView with TagHelper:

cshtml

@{
    ViewData["Title"] = "ListView Example";
    List<ListItem> dataSource = new List<ListItem>()
    {
        new ListItem { id = "1", text = "Artwork" },
        new ListItem { id = "2", text = "Abstract" },
        new ListItem { id = "3", text = "Modern Painting" },
        new ListItem { id = "4", text = "Ceramics" }
    };
}

<ejs-listview id="list" dataSource="dataSource" 
    showHeader="true" headerTitle="Art Gallery">
</ejs-listview>

@code {
    public class ListItem
    {
        public string id { get; set; }
        public string text { get; set; }
    }
}

With Selection & Checkbox:

cshtml

<ejs-listview id="list" dataSource="dataSource" 
    showCheckBox="true" checkBoxPosition="Right">
</ejs-listview>

With Grouping:

cshtml

<ejs-listview id="list" dataSource="dataSource">
    <e-listview-fieldsettings text="text" groupBy="category" id="id"></e-listview-fieldsettings>
</ejs-listview>

使用TagHelper的基础ASP.NET Core ListView：

cshtml

@{
    ViewData["Title"] = "ListView Example";
    List<ListItem> dataSource = new List<ListItem>()
    {
        new ListItem { id = "1", text = "Artwork" },
        new ListItem { id = "2", text = "Abstract" },
        new ListItem { id = "3", text = "Modern Painting" },
        new ListItem { id = "4", text = "Ceramics" }
    };
}

<ejs-listview id="list" dataSource="dataSource" 
    showHeader="true" headerTitle="Art Gallery">
</ejs-listview>

@code {
    public class ListItem
    {
        public string id { get; set; }
        public string text { get; set; }
    }
}

带选择与复选框的示例：

cshtml

<ejs-listview id="list" dataSource="dataSource" 
    showCheckBox="true" checkBoxPosition="Right">
</ejs-listview>

带分组的示例：

cshtml

<ejs-listview id="list" dataSource="dataSource">
    <e-listview-fieldsettings text="text" groupBy="category" id="id"></e-listview-fieldsettings>
</ejs-listview>

Common Patterns

常见模式

Pattern 1: Simple Data List

模式1：简单数据列表

Use

dataSource

with array of strings or objects; map

fields.text

for display.

使用

dataSource

结合字符串数组或对象数组；映射

fields.text

用于显示。

Pattern 2: Categorized Groups

模式2：分类分组

Set

fields.groupBy

to organize items under category headers automatically.

设置

fields.groupBy

自动将列表项组织到分类表头下。

Pattern 3: Nested Hierarchies

模式3：嵌套层级结构

Map

fields.child

to enable drill-down navigation through parent-child relationships.

映射

fields.child

以启用通过父子关系进行的钻取导航。

Pattern 4: Large Dataset Optimization

模式4：大型数据集优化

Enable

enableVirtualization="true"

to render only visible items; improves performance 10x+.

启用

enableVirtualization="true"

仅渲染可见项；性能提升10倍以上。

Pattern 5: Custom Item Display

模式5：自定义列表项显示

Use

template

property with

<div class="e-list-wrapper">

for rich formatting (avatars, badges, multi-line text).

使用

template

属性结合

<div class="e-list-wrapper">

实现富格式（头像、徽章、多行文本）。

Pattern 6: Remote Data Integration

模式6：远程数据集成

Use

dataSource

with DataManager; set

query

to filter/sort server-side; bind

fields

to match API response.

使用

dataSource

结合DataManager；设置

query

在服务器端进行筛选/排序；绑定

fields

以匹配API响应。

Key Field Mappings Reference

核心字段映射参考

The

fields

property controls data extraction. Common mappings:

Field Property	Purpose	Example
`text`	Display text for item	`text="productName"`
`id`	Unique identifier	`id="productId"`
`groupBy`	Category/group field	`groupBy="category"`
`child`	Nested list data	`child="subcategories"`
`iconCss`	Icon class	`iconCss="iconClass"`
`enabled`	Enable/disable state	`enabled="isActive"`
`isChecked`	Checkbox state	`isChecked="isSelected"`
`isVisible`	Visibility state	`isVisible="isVisible"`
`tooltip`	Hover tooltip text	`tooltip="description"`
`sortBy`	Sort field	`sortBy="name"`
`htmlAttributes`	Custom attributes	`htmlAttributes="attributes"`

fields

属性控制数据提取。常见映射：

字段属性	用途	示例
`text`	列表项的显示文本	`text="productName"`
`id`	唯一标识符	`id="productId"`
`groupBy`	分类/分组字段	`groupBy="category"`
`child`	嵌套列表数据	`child="subcategories"`
`iconCss`	图标类	`iconCss="iconClass"`
`enabled`	启用/禁用状态	`enabled="isActive"`
`isChecked`	复选框状态	`isChecked="isSelected"`
`isVisible`	可见性状态	`isVisible="isVisible"`
`tooltip`	悬停提示文本	`tooltip="description"`
`sortBy`	排序字段	`sortBy="name"`
`htmlAttributes`	自定义属性	`htmlAttributes="attributes"`

Common Use Cases

常见使用场景

Use Case 1: Product Category Browser

场景1：产品类别浏览器

Group products by category; enable selection for shopping cart addition.

按类别分组产品；启用选择功能以添加到购物车。

Use Case 2: File/Folder Navigation

场景2：文件/文件夹导航

Use nested lists with icons for file explorer interface.

使用带图标的嵌套列表实现文件资源管理器界面。

Use Case 3: Task Management List

场景3：任务管理列表

Combine checkboxes with templates for todo/task display and status tracking.

结合复选框与模板显示待办/任务并跟踪状态。

Use Case 4: Contact Directory

场景4：联系人目录

Sort alphabetically; template with avatars and contact info; filter by category.

按字母排序；使用模板显示头像与联系人信息；按分类筛选。

Use Case 5: Large Data Feed (News, Logs)

场景5：大型数据信息流（新闻、日志）

Enable virtualization; implement scroll event for dynamic loading; optimize rendering.

Next Steps:

Read getting-started-and-data-binding.md to set up your first ListView
Explore api-reference.md for complete property, event, and method documentation
Review templates-and-customization.md for advanced formatting options
Check references/accessibility-keyboard-aria.md for keyboard and ARIA support

启用虚拟化；实现滚动事件进行动态加载；优化渲染。

下一步：

阅读getting-started-and-data-binding.md以搭建你的第一个ListView
探索api-reference.md获取完整的属性、事件与方法文档
查看templates-and-customization.md了解高级格式化选项
查阅references/accessibility-keyboard-aria.md获取键盘与ARIA支持相关内容