欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

asp.net core mvc 入门demo

程序员文章站 2024-02-27 20:45:21
...

.NET Core

.NET Core 是开放源代码的通用开发平台 (是一个“平台”),基于这个开放平台我们可以开发像ASP.NET Core应用程序, Windows 10 通用 Windows 平台 (UWP),Tizen等等, Microsoft官方团队 和 .NET社区成员共同在 GitHub 上进行维护。 它跨平台(支持 Windows、macOS 和 Linux),并且可用于生成设备、云和 IoT 应用程序。

.NET Core 还具有以下特性:

  1. 跨平台:可以在 Windows、macOS 和 Linux 操作系统上运行。
  2. 跨体系结构保持一致: 在多个体系结构(包括 x64、x86 和 ARM)上以相同的行为运行代码。
  3. 命令行工具: 包括用于本地开发和持续集成方案中的易于使用的命令行工具。
  4. 部署灵活: 可以包含在应用或已安装的并行用户或计算机范围中。 可搭配 Docker 容器使用。
  5. 兼容性:.NET Core 通过 .NET Standard与 .NET Framework、Xamarin 和 Mono 兼容。
  6. 开放源:.NET Core 是一个开放源平台,使用 MIT 和 Apache 2 许可证。 .NET Core 是一个 .NET Foundation 项目。
  7. 由 Microsoft 支持:.NET Core背后依托强大的Microsoft团队 进行维护。

ASP.NET Core优点

  1. 速度 : ASP.NET Core 很快。因为 .NET Core 是编译运行的,执行速度远高于解释执行的语言。与使用 Node.js 写的代码相比,执行速度高出 5-10 倍是很正常的
  2. 生态 ASP.NET Core 可能初出茅庐,但 .NET 却已久经考验。在 NuGet上有成千上万的软件包。可以完成你的大部分需求。
  3. 安全性 微软的开团队很注重安全性,ASP.NET Core 从创建基础就是安全的。它已经自动处理了 净化输入数据 和 跨域伪造请求(CSRF),你就不用操心这些了。你同时还享有 .NET 编译器的静态类型检测的优势,它像个时刻警惕着,还有些强迫症的审校者。这样,在使用一个变量或者某些数据时,那些无意识的错误就插翅难逃。
  4. 跨平台 可以运行在安装了 .NET 运行时库的 Windows、Mac或者Linux上。
  5. 开源 .NET Core 属于开放源(MIT 许可证),由 Microsoft 于 2014 年提供给 .NET Foundation。 现在它是最活跃的 .NET Foundation 项目之一。 可由个人和企业*采用,包括用于个人、学术或商业目的。 同时开源也就意味着在你出现问题的时候你可以阅读其源代码来获取解决问题的方法,再者你也可以在Gayhub上提Issue

创建.net core入门demo

  1. 点击创建 ASP.Net Core Web 应用程序
    asp.net core mvc 入门demo

  2. 创建名为MvcContent
    asp.net core mvc 入门demoasp.net core mvc 入门demo显示的项目结构如下图,对应文件作用为:
    appsettings.json:配置文件,配置数据库连接字符串等配置信息。
    Program.cs:程序入口文件(里面有个Main方法);
    Startup.cs 启动配置文件 ;
    依赖项:管理项目所依赖的第三方组件的安装,配置,升级
    Controller:控制器 控制Models数据并交与视图
    Models: 将数据库对应的数据就是加载到该文件夹下的实体中
    Views:视图 即将实体数据呈现出来的页面
    asp.net core mvc 入门demo

  3. Models下创建需创建两个实体类对象,代码如下:

  public class Content
    {
        /// <summary>
        /// 主键
        /// </summary>
        public int Id { get; set; }

        /// <summary>
        /// 标题
        /// </summary>
        public string Title { get; set; }
        /// <summary>
        /// 内容
        /// </summary>
        public string Detail { get; set; }
        /// <summary>
        /// 状态 1正常 0删除
        /// </summary>
        public int Status { get; set; }
        /// <summary>
        /// 创建时间
        /// </summary>
        public DateTime Add_time { get; set; }
        /// <summary>
        /// 修改时间
        /// </summary>
        public DateTime Modify_time { get; set; }
    }
public class ContentViewModel
    {
        public List<Content> Contents { get; set; }
    }
  • Content: 文章实体类,假如需要向某数据库中Content表插入值,我们就可以创建一个Content对象再复制,并配合控制器(controller)将实体值存入数据库中。
  • ContentViewModel:因为Content是作为插入等创建操作的对象,对于需要加载到内存并呈现到视图的数据无能为力,于是我们就创建一个ContentViewModel对象,创建一个Content的List成员对象,已完成数据加载。
  1. 操作实体类,在Controller文件夹下创建ContentController.cs文件

asp.net core mvc 入门demoasp.net core mvc 入门demo可以看到下图所示页面:
asp.net core mvc 入门demo直接将下列代码覆盖原有的ContentController ,并添加一条using MvcContent.Models;

 public class ContentController : Controller
    {
        public IActionResult Index()
        {
            var contents = new List<Content>();
            for (int i = 0; i < 10; i++)
            {
                contents.Add(new Content { Id = i, Title = $"第{i}条数据标题", Detail = $"第{i}条数据的内容", Status = 1, Add_time = DateTime.Now.AddDays(-i) });
            }
            return View(new ContentViewModel { Contents = contents });
        }
    }
  1. 对准Index右键->添加视图,使得contentcontroller的数据可以传到该视图中,添加操作如下图:
    asp.net core mvc 入门demoasp.net core mvc 入门demo5. 如下图所示,打开程序包管理,输入下方命令,安装Humanizer 使得时间显示更加人性化

Install-Package Humanizer -Version 2.7.9

asp.net core mvc 入门demoasp.net core mvc 入门demo

  1. 将下方内容复制替换Views/Content/Index.cshtml
@model ContentViewModel
@using Humanizer;
@{
    ViewData["Title"] = "内容列表";
}

<div class="panel panel-default todo-panel">
    <div class="panel-heading">@ViewData["Title"]</div>

    <table class="table table-hover">
        <thead>
            <tr>
                <td> <input type="checkbox" class="done-checkbox"></td>
                <td>序号</td>
                <td>标题</td>
                <td>内容</td>
                <td>添加时间</td>
            </tr>
        </thead>

        @foreach (var item in Model.Contents)
        {
            <tr>
                <td>
                    <input type="checkbox" class="done-checkbox">
                </td>
                <td>@item.Id</td>
                <td>@item.Title</td>
                <td>@item.Detail</td>
                <td>@item.Add_time.Humanize()</td>

            </tr>
        }
    </table>
</div>

解析:可以看到上方代码开头**@model ContentViewModel意为引入我们创建的ContentViewModel**,而后续

 @foreach (var item in Model.Contents)
        {
            <tr>
                <td>
                    <input type="checkbox" class="done-checkbox">
                </td>
                <td>@item.Id</td>
                <td>@item.Title</td>
                <td>@item.Detail</td>
                <td>@item.Add_time.Humanize()</td>

            </tr>
        }

即用**@** 符号在网页上强制执行c#代码,在foreach循环Model.Contents即为ContentViewModel对象中的Contents集合,每个td列都用**@item.content属性名**遍历ContentViewModel中的数据

  1. 在_layout.cshtml中添加如下一个标签,其中asp-controller="Content"以为使用我们刚刚的控制器,action="Index"
    即为使用该控制器中的
    Index
    方法
  <a class="nav-link text-dark" asp-area="" asp-controller="Content" asp-action="Index">Content</a>

asp.net core mvc 入门demo

  1. 测试

asp.net core mvc 入门demoasp.net core mvc 入门demo