用 Trae 学 C#：从基础语法到 TodoList 桌面应用

本文档用于课堂学习。按照每一部分的步骤操作，就可以体验一次完整的 AI 辅助 C# 编程流程。

1. 本节课要完成什么

本节课会使用 Trae + C# 完成两件事：

  1. 用 AI 辅助学习 C# 基础语法。
  2. 用 C# WinForms + WebView2 制作一个简单的 TodoList 桌面应用。

本节课最重要的不是“让 AI 替我们写完所有代码”，而是学会一个更可靠的编程流程：

1
2
3
4
Plan   ：先规划
Build  ：再实现
Debug  ：再调试
Review ：最后复盘

以后使用 AI 写程序时，不建议一开始就输入“帮我写一个完整项目”。更好的做法是：

1
2
3
4
5
先让 AI 拆分任务，
再一步一步生成代码，
运行后检查结果，
遇到错误再让 AI 帮助分析，
最后复盘项目结构和代码逻辑。

2. 课前准备

电脑上建议准备以下软件和环境：

  1. Trae
  2. Visual Studio 2022
  3. .NET 桌面开发工作负载
  4. WebView2 运行环境
  5. NuGet 包：Microsoft.Web.WebView2

参考资料：

3. 第一部分：用 AI 学 编程语言以C#为例子

C# 中的变量可以理解为“用来存数据的盒子”。

常见变量类型：

1
2
3
4
5
int     ：整数，例如年龄、数量
 double ：小数，例如价格、身高
string  ：字符串，例如姓名、标题
bool    ：布尔值，只有 true / false
char    ：单个字符，例如 'A'

3.1 在 Trae 中输入提示词

1
2
3
4
5
6
7
请你作为 C# 老师，生成一个 BasicVariables.cs 文件，
用最简单的例子讲解 int、double、string、bool、char。
要求：
1. 使用 Console 程序示例
2. 每种变量都要有中文注释
3. 在 Main 方法里输出每个变量的值
4. 代码适合初学者阅读

AI 生成代码后，不要只复制代码。需要完成三件事：

1
2
3
第一，看懂代码。
第二，运行代码。
第三，修改代码。

3.2 修改变量内容

可以把 AI 生成的变量改成自己的信息，例如：

1
2
3
4
name 改成自己的名字
age 改成自己的年龄
height 改成自己的身高
isStudent 改成 true

3.3 让 AI 解释代码

继续在 Trae 中输入：

1
2
3
请逐行解释刚才的 BasicVariables.cs，
要求用初中生也能听懂的方式解释，
并指出初学者容易写错的地方。

当代码看不懂时，可以这样问 AI：

1
2
3
4
请逐行解释这段代码。
请用更简单的例子解释。
请指出初学者容易写错的地方。
请告诉我每一行代码的作用。

AI 不只是代码生成器，也可以当作代码解释器和学习助手。

4. 第二部分：用 AI 学条件判断

程序不仅可以保存数据，还可以根据条件做判断。

例如：判断一个学生成绩是否及格。

4.1 在 Trae 中输入提示词

1
2
3
4
5
6
7
请用 C# 写一个 IfElseDemo.cs 文件，
功能是判断学生成绩是否及格。
要求：
1. score >= 60 输出“及格”
2. score < 60 输出“不及格”
3. 用中文注释解释 if 和 else
4. 代码适合初学者阅读

4.2 if / else 的基本结构

1
2
3
4
5
6
7
8
if (条件)
{
    // 条件成立时执行
}
else
{
    // 条件不成立时执行
}

可以这样理解：

1
2
if   ：如果
else ：否则

程序就是通过 if / else 做选择。

5. 第三部分：用 AI 学逻辑运算符

有时候，一个条件不够，需要多个条件一起判断，这时会用到逻辑运算符。

常见逻辑运算符：

1
2
3
&&  并且：两个条件都为 true，结果才是 true
||  或者：只要有一个条件为 true，结果就是 true
!   取反：true 变 false，false 变 true

5.1 在 Trae 中输入提示词

1
2
3
4
5
6
7
8
请用 C# 写一个 LogicOperatorsDemo.cs 文件，
用学生成绩和出勤率作为例子，演示 &&、||、! 三个逻辑运算符。
要求：
1. && 表示两个条件都满足
2. || 表示至少一个条件满足
3. ! 表示取反
4. 每个例子都要有中文注释
5. 代码适合初学者阅读

5.2 思考下面三个表达式

1
score >= 60 && attendance >= 80

含义：成绩大于等于 60，并且出勤率大于等于 80。

1
score >= 90 || attendance >= 95

含义：成绩大于等于 90，或者出勤率大于等于 95。只要满足一个即可。

1
!isAbsent

含义：不是缺席。

6. 第四部分：项目实践 TodoList

接下来会制作一个简单的 TodoList 桌面应用。

TodoList 是一个很适合初学者的小项目。它不复杂，但是包含了真实项目中常见的几个能力：

1
2
3
4
5
6
界面
输入
按钮
列表
状态变化
删除操作

本项目使用的技术：

1
2
3
4
5
C# WinForms ：创建 Windows 桌面窗口
WebView2    ：在桌面窗口中显示网页页面
HTML        ：页面结构
CSS         ：页面样式
JavaScript  ：页面交互逻辑

项目最终功能：

1
2
3
4
5
1. 输入任务
2. 点击按钮添加任务
3. 显示任务列表
4. 点击任务可以标记完成
5. 点击删除按钮可以删除任务

7. 先 Plan，再 Build

使用 AI 做项目时，最容易犯的错误是：

1
不规划，直接让 AI 写完整代码。

这样容易出现三个问题：

1
2
3
代码太长，看不懂。
文件太多，不知道放哪里。
报错之后，不知道怎么改。

所以，在写代码之前，先让 AI 帮我们做项目规划。

7.1 在 Trae 中输入项目规划提示词

1
2
3
4
5
6
7
8
我想用 C# WinForms + WebView2 做一个 TodoList 桌面应用。
请先不要写代码，先帮我拆分开发计划。
要求包括：
1. 项目目标
2. 需要创建哪些文件
3. 每个文件负责什么功能
4. 开发步骤
5. 初学者可能遇到的问题

AI 返回计划后，需要重点看清楚每个部分的职责：

1
2
3
4
C# 负责：创建桌面窗口、加载 WebView2、显示 HTML 页面
HTML 负责：页面结构
CSS 负责：页面样式
JavaScript 负责：添加任务、删除任务、完成任务

这一步相当于先拿到一张“项目地图”。有了地图，再开始写代码会更清楚。

8. Build 第一步：创建 WinForms + WebView2 项目

8.1 创建 WinForms 项目

在 Visual Studio 2022 中操作：

1
2
3
4
5
6
1. 打开 Visual Studio 2022
2. 创建新项目
3. 选择 Windows Forms App
4. 语言选择 C#
5. 项目名称：TraeTodoListDemo
6. 创建项目

8.2 安装 WebView2

在 Visual Studio 2022 中操作：

1
2
3
4
1. 右键项目
2. 选择“管理 NuGet 程序包”
3. 搜索 Microsoft.Web.WebView2
4. 点击安装

WebView2 的作用是让 WinForms 程序加载网页内容。

简单理解：

1
2
3
WinForms 是一个桌面窗口。
WebView2 是嵌入在窗口里的浏览器。
index.html 是显示在浏览器里的页面。

9. Build 第二步：生成 TodoList 页面文件

接下来生成一个 index.html 文件。

这个文件会包含 HTML、CSS 和 JavaScript，方便初学者放在一个文件里理解。

9.1 在 Trae 中输入提示词

1
2
3
4
5
6
7
8
9
请生成一个 index.html 文件，用来实现 TodoList 页面。
要求：
1. 页面有标题：我的 TodoList
2. 有一个输入框
3. 有一个“添加任务”按钮
4. 有一个任务列表区域
5. 使用简单的 CSS 美化页面
6. 使用 JavaScript 实现添加任务、删除任务、标记完成任务
7. 所有代码写在一个 HTML 文件中，方便初学者理解

生成后重点观察三个部分：

1
2
3
HTML：决定页面上有什么
CSS：决定页面好不好看
JavaScript：决定页面能不能交互

虽然本节课是 C# 主题，但是项目中出现 HTML、CSS、JavaScript 是正常的。真实项目经常会混合多种技术。

本项目的主线仍然是：

1
2
用 C# 创建桌面程序，
用 WebView2 加载网页界面。

10. Build 第三步：让 C# 加载 HTML 页面

10.1 在 Trae 中输入提示词

1
2
3
4
5
6
请生成 C# WinForms 代码，使用 WebView2 加载本地 index.html 文件。
要求：
1. 窗口启动后自动显示 index.html
2. WebView2 填满整个窗口
3. 代码中要有中文注释
4. 适合初学者阅读

10.2 项目中的核心文件

1
2
3
Form1.cs    ：WinForms 主窗口代码
WebView2    ：负责显示网页
index.html  ：TodoList 页面

当 C# 成功加载 index.html 后，用户看到的就不是普通浏览器网页，而是一个 Windows 桌面应用里的 TodoList 页面。

11. Debug：用 AI 分析错误

写程序一定会遇到报错。报错不是失败，而是程序在告诉我们：哪里需要修改。

使用 AI 调试时，不要只输入：

1
它报错了，帮我看看。

更好的调试问题应该包含三样东西：

1
错误信息 + 相关代码 + 预期目标

11.1 推荐调试提示词

1
2
3
4
5
6
7
8
9
我的 C# WinForms + WebView2 项目运行时报错。
错误信息是：
【把错误信息粘贴到这里】

相关代码是：
【把 Form1.cs 或 index.html 粘贴到这里】

我的目标是：启动窗口后加载本地 index.html。
请帮我分析原因，并给出修改后的代码。

记住这个公式：

1
问 AI 调试 = 错误信息 + 相关代码 + 预期目标

这样 AI 才能更准确地判断问题。

12. Review：让 AI 帮我们复盘项目

项目能运行后，不要马上结束。还需要理解它为什么能运行。

12.1 在 Trae 中输入复盘提示词

1
2
3
4
5
6
请帮我复盘这个 C# WinForms + WebView2 TodoList 项目。
要求：
1. 解释项目运行流程
2. 说明 C#、HTML、CSS、JavaScript 各自负责什么
3. 指出这个项目还可以改进的地方
4. 给出 3 个适合初学者继续练习的功能

Review 的作用是让学习从：

1
代码跑起来了

变成：

1
我真的理解它了

13. 拓展练习

项目完成后，可以任选一个方向继续修改：

1
2
3
4
任务 A：给 TodoList 增加“清空已完成任务”按钮
任务 B：给任务增加“优先级”：高 / 中 / 低
任务 C：让页面刷新后任务仍然存在，可以使用 localStorage
任务 D：修改页面样式，让 TodoList 更好看

13.1 拓展功能提示词示例

1
2
3
4
5
6
我已经有一个 TodoList 的 index.html。
请在不改变原有功能的基础上，帮我增加【清空已完成任务】功能。
要求：
1. 说明需要改哪里
2. 给出修改后的完整代码
3. 用中文注释标出新增代码

14. 本节课总结

本节课学习了如何使用 Trae 辅助 C# 编程。

完成的内容包括：

1
2
3
4
5
1. 用 AI 学习 C# 基础变量
2. 用 AI 学习 if / else 条件判断
3. 用 AI 学习 &&、||、! 逻辑运算符
4. 用 C# WinForms + WebView2 制作 TodoList 桌面应用
5. 学习 Plan、Build、Debug、Review 的 AI 辅助编程流程

最重要的四句话：

1
2
3
4
不要只让 AI 写代码，要让 AI 先规划。
不要只复制 AI 代码，要自己运行和修改。
不要害怕报错，要学会把错误信息交给 AI 分析。
不要项目跑起来就结束，要让 AI 帮你复盘。

会用 AI 的程序员，不是不用思考的人，而是更会提问、更会验证、更会迭代的人。

15. 提示词合集

15.1 C# 基础变量

1
2
3
4
5
6
7
请你作为 C# 老师，生成一个 BasicVariables.cs 文件，
用最简单的例子讲解 int、double、string、bool、char。
要求：
1. 使用 Console 程序示例
2. 每种变量都要有中文注释
3. 在 Main 方法里输出每个变量的值
4. 代码适合初学者阅读

15.2 条件判断

1
2
3
4
5
6
7
请用 C# 写一个 IfElseDemo.cs 文件，
功能是判断学生成绩是否及格。
要求：
1. score >= 60 输出“及格”
2. score < 60 输出“不及格”
3. 用中文注释解释 if 和 else
4. 代码适合初学者阅读

15.3 逻辑运算符

1
2
3
4
5
6
7
8
请用 C# 写一个 LogicOperatorsDemo.cs 文件，
用学生成绩和出勤率作为例子，演示 &&、||、! 三个逻辑运算符。
要求：
1. && 表示两个条件都满足
2. || 表示至少一个条件满足
3. ! 表示取反
4. 每个例子都要有中文注释
5. 代码适合初学者阅读

15.4 TodoList 项目规划

1
2
3
4
5
6
7
8
我想用 C# WinForms + WebView2 做一个 TodoList 桌面应用。
请先不要写代码，先帮我拆分开发计划。
要求包括：
1. 项目目标
2. 需要创建哪些文件
3. 每个文件负责什么功能
4. 开发步骤
5. 初学者可能遇到的问题

15.5 TodoList 页面生成

1
2
3
4
5
6
7
8
9
请生成一个 index.html 文件，用来实现 TodoList 页面。
要求：
1. 页面有标题：我的 TodoList
2. 有一个输入框
3. 有一个“添加任务”按钮
4. 有一个任务列表区域
5. 使用简单的 CSS 美化页面
6. 使用 JavaScript 实现添加任务、删除任务、标记完成任务
7. 所有代码写在一个 HTML 文件中，方便初学者理解

15.6 WebView2 加载本地 HTML

1
2
3
4
5
6
请生成 C# WinForms 代码，使用 WebView2 加载本地 index.html 文件。
要求：
1. 窗口启动后自动显示 index.html
2. WebView2 填满整个窗口
3. 代码中要有中文注释
4. 适合初学者阅读

15.7 调试提示词

1
2
3
4
5
6
7
8
9
我的 C# WinForms + WebView2 项目运行时报错。
错误信息是：
【把错误信息粘贴到这里】

相关代码是：
【把 Form1.cs 或 index.html 粘贴到这里】

我的目标是：启动窗口后加载本地 index.html。
请帮我分析原因，并给出修改后的代码。

15.8 项目复盘

1
2
3
4
5
6
请帮我复盘这个 C# WinForms + WebView2 TodoList 项目。
要求：
1. 解释项目运行流程
2. 说明 C#、HTML、CSS、JavaScript 各自负责什么
3. 指出这个项目还可以改进的地方
4. 给出 3 个适合初学者继续练习的功能
1

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

快来参与讨论吧~

本站由 楠瓜 使用 Stellar 1.33.1 主题创建。
风起于青萍之末，浪成于微澜之间。