别再死记硬背for循环了！用C#在Razor页面里做个动态九九乘法表，实战理解更深刻

用C#和Razor Pages打造动态九九乘法表告别枯燥的语法学习记得刚开始学编程时最让我头疼的就是那些看似简单却怎么也记不住的循环语法。直到有一天导师让我用for循环做一个能在网页上展示的九九乘法表那些抽象的表达式突然就变得生动起来。今天我就带大家复现这个让我开窍的项目——用ASP.NET Core的Razor Pages创建一个动态生成的九九乘法表。1. 环境准备与项目创建在开始之前确保你的开发环境已经安装了以下工具Visual Studio 2022社区版即可或Visual Studio Code.NET 6.0 SDK或更高版本ASP.NET Core运行时打开Visual Studio选择创建新项目然后按照以下步骤操作在搜索框中输入ASP.NET Core Web App选择ASP.NET Core Web App (Razor Pages)模板为项目命名例如MultiplicationTable选择.NET 6.0作为框架版本点击创建按钮提示如果你更喜欢使用命令行可以打开终端并运行dotnet new webapp -n MultiplicationTable来创建项目。2. 理解Razor Pages的基本结构创建好项目后你会看到以下关键文件和文件夹MultiplicationTable/ ├── Pages/ │ ├── Shared/ │ ├── _Layout.cshtml │ ├── Index.cshtml │ └── Index.cshtml.cs ├── wwwroot/ ├── appsettings.json └── Program.cs对于我们的九九乘法表项目主要关注的是Pages/Index.cshtml和Pages/Index.cshtml.cs这两个文件Index.cshtmlRazor页面视图负责HTML展示Index.cshtml.csPageModel类包含后端逻辑3. 实现九九乘法表逻辑3.1 在PageModel中添加乘法表生成代码打开Index.cshtml.cs文件在IndexModel类中添加以下代码public class IndexModel : PageModel { // 存储乘法表的二维数组 public string[,] MultiplicationTable { get; set; } new string[9, 9]; public void OnGet() { // 外层循环控制行 for (int i 1; i 9; i) { // 内层循环控制列 for (int j 1; j i; j) { // 存储乘法表达式和结果 MultiplicationTable[i-1, j-1] ${j} × {i} {i*j}; } } } }这段代码做了以下几件事声明了一个9x9的二维数组MultiplicationTable来存储乘法表在OnGet方法中使用嵌套的for循环生成乘法表外层循环控制行数1到9内层循环控制每行的列数1到当前行数将每个乘法表达式和结果存储在数组中3.2 在Razor页面中展示乘法表现在我们修改Index.cshtml文件来展示这个乘法表page model IndexModel { ViewData[Title] 动态九九乘法表; } div classtext-center h1 classdisplay-4动态九九乘法表/h1 table classtable table-bordered mt-4 for (int i 0; i 9; i) { tr for (int j 0; j i; j) { tdModel.MultiplicationTable[i, j]/td } /tr } /table /div这里我们再次使用了嵌套的for循环来遍历MultiplicationTable数组并以表格形式展示出来。注意外层循环遍历每一行内层循环遍历当前行的每一列使用Model访问PageModel中的属性4. 美化乘法表界面为了让我们的乘法表看起来更专业我们可以添加一些CSS样式。在wwwroot/css/site.css文件中添加以下样式.multiplication-table { margin: 20px auto; border-collapse: collapse; } .multiplication-table td { padding: 10px 15px; border: 1px solid #dee2e6; background-color: #f8f9fa; transition: all 0.3s ease; } .multiplication-table td:hover { background-color: #e9ecef; transform: scale(1.05); } .table-header { background-color: #343a40; color: white; font-weight: bold; }然后更新Index.cshtml中的表格代码table classmultiplication-table thead tr th colspan9 classtable-header text-center九九乘法表/th /tr /thead tbody for (int i 0; i 9; i) { tr for (int j 0; j i; j) { tdModel.MultiplicationTable[i, j]/td } !-- 补充空单元格使表格对齐 -- for (int k i 1; k 9; k) { td/td } /tr } /tbody /table5. 添加交互功能为了让这个乘法表更具互动性我们可以添加一些JavaScript功能。在Pages/Index.cshtml底部添加section Scripts { script document.querySelectorAll(.multiplication-table td).forEach(cell { if (cell.textContent.trim() ! ) { cell.addEventListener(click, function() { const [a, , b, , result] this.textContent.split( ); alert(${a}乘以${b}等于${result}); }); } }); /script }这段代码为每个包含乘法表达式的单元格添加了点击事件点击时会弹出一个对话框显示乘法结果。6. 调试与优化在开发过程中我们可能会遇到各种问题。以下是一些常见的调试技巧在循环中设置断点在Visual Studio中点击代码行号左侧设置断点运行程序时执行到断点处会暂停可以查看变量值、调用堆栈等信息使用Console.WriteLine调试 在PageModel中添加临时调试输出for (int i 1; i 9; i) { Console.WriteLine($正在处理第{i}行); for (int j 1; j i; j) { Console.WriteLine($ 计算{j} × {i}); MultiplicationTable[i-1, j-1] ${j} × {i} {i*j}; } }浏览器开发者工具按F12打开开发者工具使用元素选项卡检查HTML结构使用控制台查看JavaScript错误7. 扩展思考与实践现在我们已经完成了一个基本的动态九九乘法表但编程的魅力在于不断优化和扩展。以下是一些可能的改进方向7.1 支持不同尺寸的乘法表修改PageModel使其可以生成任意尺寸的乘法表public class IndexModel : PageModel { public string[,] MultiplicationTable { get; set; } public int Size { get; set; } 9; public void OnGet(int? size) { Size size ?? 9; MultiplicationTable new string[Size, Size]; for (int i 1; i Size; i) { for (int j 1; j i; j) { MultiplicationTable[i-1, j-1] ${j} × {i} {i*j}; } } } }然后在页面中添加一个表单让用户输入尺寸form methodget classmb-4 div classform-group label forsize乘法表尺寸/label input typenumber idsize namesize min1 max20 valueModel.Size classform-control d-inline-block w-auto button typesubmit classbtn btn-primary ml-2生成/button /div /form7.2 添加颜色区分不同难度根据乘法结果的数值大小添加不同的颜色public class MultiplicationItem { public string Expression { get; set; } public int Result { get; set; } public string CssClass { get; set; } } public class IndexModel : PageModel { public MultiplicationItem[,] MultiplicationTable { get; set; } public void OnGet() { MultiplicationTable new MultiplicationItem[9, 9]; for (int i 1; i 9; i) { for (int j 1; j i; j) { int result i * j; MultiplicationTable[i-1, j-1] new MultiplicationItem { Expression ${j} × {i} {result}, Result result, CssClass result 10 ? easy : result 20 ? medium : hard }; } } } }然后在CSS中添加对应的样式.easy { background-color: #d4edda !important; } .medium { background-color: #fff3cd !important; } .hard { background-color: #f8d7da !important; }7.3 添加打印和导出功能在页面底部添加按钮允许用户打印或导出乘法表div classmt-4 button onclickwindow.print() classbtn btn-outline-primary mr-2 i classfas fa-print/i 打印乘法表 /button button idexportBtn classbtn btn-outline-success i classfas fa-file-export/i 导出为图片 /button /div section Scripts { script srchttps://html2canvas.hertzen.com/dist/html2canvas.min.js/script script document.getElementById(exportBtn).addEventListener(click, function() { html2canvas(document.querySelector(.multiplication-table)).then(canvas { const link document.createElement(a); link.download 九九乘法表.png; link.href canvas.toDataURL(image/png); link.click(); }); }); /script }