asp.net core mvc 入門demo

.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 應用程序
    在這裏插入圖片描述

  2. 創建名爲MvcContent
    在這裏插入圖片描述在這裏插入圖片描述顯示的項目結構如下圖,對應文件作用爲:
    appsettings.json:配置文件,配置數據庫連接字符串等配置信息。
    Program.cs:程序入口文件(裏面有個Main方法);
    Startup.cs 啓動配置文件 ;
    依賴項:管理項目所依賴的第三方組件的安裝,配置,升級
    Controller:控制器 控制Models數據並交與視圖
    Models: 將數據庫對應的數據就是加載到該文件夾下的實體中
    Views:視圖 即將實體數據呈現出來的頁面
    在這裏插入圖片描述

  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文件

在這裏插入圖片描述在這裏插入圖片描述可以看到下圖所示頁面:
在這裏插入圖片描述直接將下列代碼覆蓋原有的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的數據可以傳到該視圖中,添加操作如下圖:
    在這裏插入圖片描述在這裏插入圖片描述5. 如下圖所示,打開程序包管理,輸入下方命令,安裝Humanizer 使得時間顯示更加人性化

Install-Package Humanizer -Version 2.7.9

在這裏插入圖片描述在這裏插入圖片描述

  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>

在這裏插入圖片描述

  1. 測試

在這裏插入圖片描述在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章