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

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。
• 此时，应用程序将显示一个包含两个学生信息的表格。