Radzen中有两种属性：页面属性和组件属性。

页面属性 Page properties

页面属性用来存储应用程序数据，比如数据库查询结果，用户输入（用户键入的文本）或开发人员所需的任何其他数据。

全局属性 Global properties

全局属性类似于页面属性，但是区别是全局属性在应用程序的所有页面中都可以使用。

组件属性 Component properties

组件属性用来配置行为，比如按钮显示的文本以及DataGrid的项目。

组件属性可以设置为页面属性。 在这种情况下，我们说组件属性是数据绑定（data-bound）到页面属性的。

创建属性 Create property

要创建页面属性，需要处理当前页面的Load事件并使用Set属性操作。 您必须设置属性名称（以便以后使用）和值。

1. 在Radzen中打开一个页面（或创建一个新页面）。

2. 单击设计器中的空白区域，或从“选择”下拉列表中选择“Page”。 这将在属性网格中显示页面事件。

3. 添加一个新的Load事件的Handler。 初始化显示页面时触发。

4. 将操作的类型设置为Set属性。

5. 给属性命名并设定一些值。 例如，将Name设置为counter并将Value设置为0。这将创建counter属性并将其值设置为零。

属性名称 Properties Name 限制

页面属性映射到Blazor应用程序中的C#类属性。 因此，它遵守某些命名限制：

1. 不能以数字开头。

2. 不能包含空格。

3. 不能以C＃语言关键字命名：new，class，bool，var等。

4. 不能以现有数据源命名（数据源隐式定义为属性）。

5. 不能以现有组件命名（组件也隐式定义为属性）。

显示属性值

一个常见的任务是向您应用程序的用户显示属性值。 在Radzen中，这是通过将组件属性数据绑定到页面属性来完成的。

Label组件可以显示文本或数字属性（类似于我们在“创建属性”部分中创建的属性）。

1. 从工具箱中拖动一个Label组件，并将其拖放到页面标题之后。

2. 点击“文字 Text”属性旁边的“链接 Link”按钮。 这将打开“属性选择器 Property picker”对话框。

3. 选择计数器属性，然后单击确定。 这会将标签的Text属性设置为 ${counter}。

现在，标签组件的文本已数据绑定到计数器页面属性。 如果counter属性更改，则标签文本将更新并显示最新值。

但是，这种 ${counter} 语法是什么？ 这称为表达式。

表达式有一些重要的用法：

1. 允许Radzen显示带有可用属性名称的建议框。

2. 启用Radzen可以生成正确的代码，而与上下文（.cs或.blazor文件）无关。

3. 隐藏目标框架的一些细节。

上面的示例在您运行应用程序时生成以下Blazor代码：<RadzenLabel Text="@($"{counter}")" />

更新属性值

要更新属性的值，需要再次使用Set属性操作。 我们添加一个按钮来更新属性值。 每当用户单击按钮时，计数器属性都会增加。

1. 从工具箱中拖动一个Button组件，并将其拖放到Display属性值的Label之后。

2. 将按钮的文本属性设置为“Increment”。 请注意，这次我们没有使用 ${Increment}。 我们将按钮的文本设置为文字值 Increment。

3. 处理按钮的Click事件。 添加类型为Set属性的新操作。

4. 将名称设置为counter，将值设置为 ${counter} + 1；

运行应用程序。 单击按钮可增加计数器属性，标签将显示其当前值。 发生这种情况是因为标签的文本通过$ {counter}表达式数据绑定到counter属性。

${counter} + 1表达式使counter属性的值递增。 它生成以下C#代码 counter = counter + 1;。

事件处理文章中提供了有关Set属性操作和Radzen支持的其他操作类型的更多信息。

获取用户输入

在页面属性中获取用户输入是Radzen应用程序中的另一项常见任务。可以做到这一点的组件是：TextBox，Numeric，DropDown等等。

下面的示例演示如何将用户键入的文本存储在page属性中。

首先添加一个页面属性，该属性将存储文本。

1. 从“创建”属性中执行步骤1-3。

2. 将“Name”设置为text，将“Value”设置为“”（空字符串）。这将创建一个名为text的新页面属性，其值为“”（空字符串）。

然后添加一个TextBox组件，并将其Value属性数据绑定到刚创建的文本页面属性。输入组件（例如TextBox）的Value属性是特殊的。当用户更改组件值（例如在TextBox中键入内容）时，它将更新与数据绑定的页面属性。

1. 将TextBox组件拖放到页面标题之后。

2. 单击“Value”属性旁边的齿轮图标，以填充“属性选择器 Property picker” 。

3. 选择文本属性。这会将TextBox的Value绑定到页面的text属性。

Radzen将会生成的Blazor代码：<RadzenTextBox @bind-Value="@text" />。

我们还要显示用户输入的内容！

1. 将一个Button组件拖放到TextBox之后。

2. 将按钮的文本设置为显示文本。

3. 添加Click事件新的Handler。

4. 将类型设置为显示通知（Show notification）。

5. 将“严重性 Severity”设置为“信息 info”，将“摘要 Summary”设置为“文本”，最后将“详细信息Detail”设置为“你输入了: ${text}”。

单击按钮将显示文本属性的值。 让我们运行该应用程序

从数据源中获取数据

从数据源（数据库或其他）获取数据并将其显示给用户是另一项常见任务。 尽管脚手架和“新建页面”向导对此提供了很大帮助，但让我们来看看它们在幕后的作用。

按照快速入门中的说明使用Radzen示例数据源

然后，调用数据源的方法（Invoke data source method）并将其结果存储在page属性中。

1. 添加新的页面Load事件Handler。

2. 将类型设置为调用数据源方法（Invoke data source method），将操作（Operation）设置为getOrders。

3. 使用Set属性操作处理then事件。 将名称设置为订单，将值设置为 ${result}。 这会将getOrders数据源方法（data source method）（作为结果隐式属性）的响应存储在orders属性中。

页面加载时，它将调用getOrders方法，然后将orders属性设置为响应。

生成的 C# 代码如下所示：

var sampleGetOrdersResult = await Sample.GetOrders();

orders = sampleGetOrdersResult;

让我们在DataGrid组件中显示订单。

1. 从工具箱中拖动一个DataGrid组件。

2. 将其数据（Data）属性设置为订单。

3. 打开数据网格的列（Columns）属性。 单击自动生成按钮为Order实体的每个属性生成一列。

运行应用程序时，您应该看到一个显示所有订单的DataGrid。

由于在DataGrid中显示数据是非常普遍的要求，因此Radzen提供了一些快捷方式：

1. 新建页面向导New Page wizard有一个CRUD模板。 它创建了三个页面：一个页面在DataGrid中显示数据，一个页面用于插入新数据项，另一个页面用于编辑现有数据项。

2. 脚手架允许Radzen 专业版订阅用户和企业版订阅用户为整个数据库创建有效的CRUD应用程序。

3. 最后，DataGrid的Data属性编辑器允许您快速指定提供数据项的数据源方法。