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

2023-11-20

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。
  • 此时,应用程序将显示一个包含两个学生信息的表格。
    在这里插入图片描述
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

小白入门C#初探Web简易页面显示信息小案例 的相关文章

随机推荐

  • 蓝桥杯模拟、思维

    本文是根据博主安然无虞的文章进行我的思维训练和练习 下面是我的练习代码和思路 1 换酒问题 include
  • 人生就像一次旅行

    我很欣赏一个广告 特别是那句话 人生就像一次旅行 不必在乎目的地 在乎的是沿途的风景以及看风景的心情 人生怎样才能够真正做到如此的豁达 人生是一段旅程 在旅行中遇到的每一个人 每一件事与每一个美丽景色 都有可能成为一生中难忘的风景 一路走来
  • 不同数据库获取新增加的主键值

    不同数据库获取新增加的主键值 数据库 获取新增主键的查询语句 DB2 IDENTITY VAL LOCAL Informix SELECT dbinfo sqlca sqlerrd1 FROM table Sybase SELECT IDE
  • LeetCode刷题-4

    数组 35 搜索插入位置 题目描述 题目样例 Java方法 二分查找 思路及算法 代码 执行结果 复杂度 题目描述 给定一个排序数组和一个目标值 在数组中找到目标值 并返回其索引 如果目标值不存在于数组中 返回它将会被按顺序插入的位置 请必
  • MySQL 通配符学习小结

    原文 http blog csdn net ithomer article details 5130386 MySQL 通配符 SQL的模式匹配允许你使用 匹配任何单个字符 而 匹配任意数目字符 包括零个字符 在 MySQL中 SQL的模式
  • 归并排序求逆序对

    一 归并排序原理 归并排序采用分治算法 将对整个数组排序的问题转化为合并两个有序子序列的问题 一 1 思想方法 以上是对数组进行排序的过程 首先 我们可认为 当区间长度为1时 每个区间都是有序的 接着 我们合并这些长度为1的区间 得到了第二
  • 抖音如何变现(赚钱)

    未来 每个人都能出名15分钟 安迪 沃霍尔 美国著名波谱艺术领袖 有必要见一下伟大预言家的风采 预言了短视频的兴起 突如一夜春风来 五洲四海刷抖音 2017 2018抖音突然火起了 从城市到农村 从国内到国外 从老人到小孩 从男人到女人 各
  • 小程序云服务器带宽要求,小程序云服务器带宽要求

    小程序云服务器带宽要求 内容精选 换一换 当您发现云服务器的运行速度变慢或云服务器突然出现网络断开的情况 则可能是云服务器的带宽和CPU利用率过高导致 如果您已经通过云监控服务创建过告警任务 当CPU或带宽利用率高时 系统会自动发送告警给您
  • JSONObject与JSONArray的简单使用

    JSONObject 大家看到JSONObject就应该真的这个类是和Json格式相关的吧 没错 JSONObject就是将数据json化的一个类 它是以键值对存在的 key value形式和map类型比较相像 下面我们先来简单使用一下这个
  • React class组件、react-hook函数组件分别实现五子棋

    react class类组件 react hook函数组件分别实现五子棋 前言 使用create react app脚手架简单搭建 不用安装其他依赖 纯 js css实现 这里就只是简单的说明目录结构和思路 具体的代码实现请转到 Githu
  • 解决:Caused by: com.mysql.jdbc.exceptions.jdbc4.MySQLNonTransientConnectionException:

    报错信息如下 org apache ibatis exceptions PersistenceException Error querying database Cause com mysql jdbc exceptions jdbc4 M
  • 【学习笔记】开源中文对话预训练模型调研总结

    开源中文对话预训练模型调研 文章目录 开源中文对话预训练模型调研 1 CDial GPT 主要工作 LCCC数据集 数据清洗策略 基于规则的清洗 基于分类器的清洗 模型 输入表征 训练 2 GPT2 chitchat 3 EVA1 0 WD
  • 网络安全态势感知和OODA模型

    网络安全已经成为全球范围内的重要问题之一 随着信息化和数字化的发展 各种网络攻击和威胁不断出现 给个人 企业 组织和国家带来了巨大的安全风险和经济损失 为了应对这一挑战 网络安全态势感知和OODA模型成为了网络安全领域中非常重要的工具 一
  • python 安装selenium最方便的方法

    dp MacBook Pro 3 chromedriver mac arm64 apple pip install chromedriver autoinstaller Looking in indexes http pypi tuna t
  • springmvc多视图解析

  • linux 复位usb设备 模拟热插拔脚本

    获取USB设备数量 DEVICE NUM lspci grep USB awk F print 1 wc l 获取设备号 DEVICE lspci grep USB awk F print 0000 1 sed n i p 设备解绑 ech
  • IPsec ISAKMP

    Interne 安全连接和密钥管理协议 ISAKMP 是 IPsec 体系结构中的一种主要协议 该协议结合认证 密钥管理和安全连接等概念来建立政府 商家和因特网上的私有通信所需要的安全 因特网安全联盟和密钥管理协议 ISAKMP 定义了程序
  • 力软-获取jfGrid值,并改变值

    问题 页面中jfGrid为动态加载出来的 在js中动态改变cell值之后 需要将jfGrid的值重新赋值一遍 解决 var rowindex 0 jfgrid layout 0 jfGridGet rowdatas rowindex F R
  • Android 在模拟器上使用Geocoder解析Location报 grpc failed无解

    在做定位功能时 用Geocoder解析Location报了一个错 我把模拟器位置设立在印度孟买 按理说Location正常 经纬度可用 应该没问题 但却给我报出异常 在翻了很多资料后感觉是模拟器的原因 因为我在真机上定位的地方都能解析 而且
  • 小白入门C#初探Web简易页面显示信息小案例

    1 创建新项目 选择ASP NET Core Web应用 模型 视图 控制器 然后点击下一步 然后在项目名称里面填写CSharpDemo 点击下一步 直至创建即可 目录结构 Connected Services 是Visual Studio