小白入门C#初探Web简易页面显示信息小案例

news/2024/12/29 14:51:05/

1、创建新项目

  • 选择ASP.NET Core Web应用(模型-视图-控制器),然后点击下一步。
    在这里插入图片描述

  • 然后在项目名称里面填写CSharpDemo,点击下一步,直至创建即可。
    在这里插入图片描述
    在这里插入图片描述

  • 目录结构:
    在这里插入图片描述

  • Connected Services:是Visual Studio提供的一种工具,用于向MVC项目中添加外部服务或API的引用和配置。 Connected Services能够快速生成代码,以便您可以轻松地使用外部服务和API提供的数据和功能。它可以使您的开发体验更加高效,并提高代码的可重复性和可维护性。

  • App_Start:该文件夹包含用于应用程序启动时执行的代码。例如,RouteConfig.cs文件包含路由配置信息,FilterConfig.cs文件包含用于过滤请求的筛选器。

  • App_Data:该文件夹包含应用程序使用的所有数据文件或数据库。

  • Content:该文件夹包含应用程序使用的所有CSS和图像等静态资源文件。

  • Controllers(控制器):用于存放MVC框架中的控制器文件,控制器是一个负责处理用户请求、调用模型和视图的类。;该文件夹包含应用程序的所有控制器。控制器处理网站的请求并返回相应的响应。控制器是将模型(Model)和视图(View)结合在一起的核心部分,控制器获取模型中的数据并将其传递给视图进行展示。

  • Models(模型):该文件夹包含应用程序中的所有模型(Model)。Model是应用程序中的数据和相关操作的部分。它通常包含描述和维护数据的类。在MVC中,Model用于处理和存储应用程序数据,Model不关心如何显示数据或处理用户输入。

  • Views(视图):该文件夹包含应用程序的所有视图(View)。视图显示与用户交互的web页面,它们通常是HTML,CSS和JavaScript的代码块。在MVC中,视图没有任何代码逻辑,只负责展示数据,所有的逻辑处理都应该在控制器和模型中完成。

  • Scripts 该文件夹包含应用程序使用的所有JavaScript文件和库。

2、添加模型

  • 在“Models”文件夹中添加一个“Student”类。代码如下:
using System.ComponentModel.DataAnnotations;
namespace CSharpDemo.Models
{public class Student{public int Id { get; set; }[Required(ErrorMessage = "Please Enter Name")]public string Name { get; set; }/*这段代码是C#语言中的一个属性定义,使用了一个特性(attribute)Required,表示当前这个属性是必填的,如果属性值为空,则会抛出一个ErrorMessage中指定的异常信息。具体来说,这段代码定义了一个名为Name的字符串属性,使用了Required特性,要求必须输入名字,否则会抛出一个错误信息“Please Enter Name”。*/[Required]public string Email { get; set; }public string Phone { get; set; }}
}
  • 在这个模型中,我们定义了一个包含“Id”、“Name”、“Email”和“Phone”属性的“Student”类。

3、添加控制器

  • 在“Controllers”文件夹中添加一个控制器。在这个控制器中,我们将使用一个“List”集合来存储学生信息。代码如下:
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;namespace CSharpDemo.Models
{/*这是一个基于ASP.NET MVC框架的学生控制器代码,它是一个继承自Controller基类的自定义控制器类。* 在这个控制器类中,可以定义一系列用于处理学生信息的动作(Action),* 比如添加学生、更新学生等,用于响应前端页面的请求和处理业务逻辑.*/public class StudentController : Controller{private static List<Student> students = new List<Student>(){new Student() { Id = 1, Name = "Tom", Email = "tom@abc.com", Phone = "1234567890" },new Student() { Id = 2, Name = "Jerry", Email = "jerry@abc.com", Phone = "0987654321" }};public IActionResult Index(){return View(students);}/** 这是一个 ASP.NET Core MVC 的 Index Action 方法,* 用于处理 HTTP GET 请求并返回一个 View(视图),以展示系统中的学生列表。* 其中参数 students 可能是由某种数据服务或存储返回的学生列表。* View 可以是一个 Razor 视图模板,用于渲染 HTML 页面的数据。*/}
}
  • 在这个控制器中,我们首先定义了一个包含两个学生的“List”集合。
  • 然后,我们添加了一个名为“Index”的操作方法,该方法将“students”集合传递给一个视图。

4、添加视图

  • 现在我们需要为“Index”操作方法添加一个视图。在“Views”文件夹中,创建一个名为“Student”的文件夹,然后在该文件夹中创建一个名为“Index.cshtml”视图文件。代码如下:
@model List<CSharpDemo.Models.Student>
@*这段代码意思是在给index视图模板传递一个名为“Student”的列表模型,
该模型是由CSharpDemo.Models.Student类定义的。在视图中使用该模型,
可以绑定到该模型中的属性、方法等,并进行各种操作。@model指令用于定义视图接收的数据类型。
@model定义了视图将会接收一个类型为List<CSharpDemo.Models.Student>的数据模型。*@<table border="1"><thead><tr><th>ID</th><th>Name</th><th>Email</th><th>Phone</th></tr></thead><tbody>@*使用了C#语言的Razor语法。遍历名为Model的泛型集合,*@@foreach (var student in Model){<tr><td>@student.Id</td><td>@student.Name</td><td>@student.Email</td><td>@student.Phone</td></tr>}</tbody>
</table>
  • 这个视图将显示“students”集合中的学生信息。

5. 运行应用程序

  • 现在我们可以运行应用程序,打开浏览器并访问 URL:localhost:端口号/Student。
  • 此时,应用程序将显示一个包含两个学生信息的表格。
    在这里插入图片描述

http://www.ppmy.cn/news/181963.html

相关文章

【Python】Python系列教程-- Python3 字符串(十一)

文章目录 前言Python3 字符串Python 访问字符串中的值Python 字符串更新Python 转义字符Python 字符串运算符Python 字符串格式化Python三引号f-stringUnicode 字符串Python 的字符串内建函数 前言 往期回顾&#xff1a; Python系列教程–Python3介绍&#xff08;一&#xff…

计算机网络-网络层1.2

IPv6 IP地址耗尽&#xff0c;CIDR和NAT只是延长了IPv4地址分配结束的时间 IPv6从根本上解决了IP地址的耗尽问题 与IPv4的比较 扩大了地址空间移除校验和字段&#xff0c;减少了每跳的处理时间将IPv4的可选字段移出首部&#xff0c;变成拓展首部&#xff0c;路由器不对拓展首…

RTX 4070TI和RTX 3090性能差距 4070ti和3090区别对比

RTX4070TI采用AD104GPU&#xff0c;内建7680个CUDA 核心、60个RT 核心及240个Tensor 核心&#xff0c;搭载12GB192-bit GDDR6X内存&#xff0c;RTX4070Ti 的理论运算能力&#xff0c;Shader 为40TFLOPS&#xff0c;RT 为93TFLOPS&#xff0c;Tensor 则为631TFLOPS&#xff0c; …

rtx4090和3090性能差距

rtx4090显卡和3090性能差距多少&#xff1a; 答&#xff1a;4090整体性能相较3090提升在80%-100%&#xff0c; 显卡选rtx4090还是3090这些点很重要 http://www.adiannao.cn/dq rtx4090采用台积电4nm制程&#xff0c;晶体管密度以及能耗比上都有着大幅的提升 2、采用第三代的Ray…

Ubuntu22.04+Nvidia RTX 3060 显卡驱动安装

新装 Ubuntu22.04 LTS&#xff0c;电脑配的是Nvidia RTX 3060&#xff0c;所以需要安装显卡驱动&#xff0c;未安装前显卡显示如下&#xff1a; 1.设置阿里源。在软件和更新在第一栏Ubuntu 软件页面中&#xff0c;找到下载自&#xff0c;选择->其它->mirrors.aliyun.com,…

rtx4090ti显卡参数 rtx4090ti功耗

GeForce RTX4090Ti 将是 NVIDIA 的显卡&#xff0c;预计将于2023年推出。基于5nm 工艺&#xff0c;基于 AD102图形处理器&#xff0c;在其 AD102-400-A1变体中&#xff0c;该卡支持 DirectX12最终的。这确保了所有现代游戏都可以在 GeForce RTX4090Ti 上运行。rtx4090ti怎么样这…

Ubuntu安装NVIDIA 显卡驱动

文章目录 前言一、基本概念二、操作步骤1.显卡硬件型号2.安装驱动 总结 前言 NVIDIA&#xff08;Nvidia Corporation&#xff0c;/ɛnˈvɪdiə/&#xff1b;港称乎为NVIDIA,台湾与香港译为辉达&#xff0c;中国大陆译为英伟达&#xff09;&#xff0c;创立于1993年1月&#xf…

Ubuntu20.04LTS安装RTX-3060显卡驱动

文章目录 1.查看初始化的显卡信息2.添加ppa仓库3.设置Ubuntu软件的镜像源4.设置其他软件的镜像源5.更新软件列表6.查看检测到的驱动程序7.安装驱动程序并重启8.安装完成后查看驱动信息 1.查看初始化的显卡信息 进入Ubuntu20.04系统的桌面&#xff0c;点击左下角的“显示应用程…