ASP.NET Core MVC的基礎學習筆記

最近由於“武漢肺炎”疫情在家辦公，也沒閑著，最近學習了一下asp.net core mvc的一些網頁開發的的基礎知識，話不多說直接上教程！

一、創建Web應用程式

1）創建新項目--->找到 “ASP.NET Core Web 應用程式” 類型的項目(也可以模糊查詢：語言選擇c#，項目類型選擇Web)：

2）選擇Web 應用程式 (模型視圖控制器)--->修改名稱--->創建：

3）新建完成後，解決方案出現如圖顯示

wwwroot 存放網站的 js、css 等前端文件，

Models-模型：封裝業務邏輯相關的數據及對數據的處理方法【如圖黃框框選中】；

Views-視圖： 向用戶提供交互界面【如圖藍框框選中】；

Controllers-控制器： 負責控制Model和View【如圖紅框選中】；

appsettings.json-配置文件： 如可以在其中加入資料庫連接字元串，如圖：

二、創建實體模型

1）添加一個實體類 （選中Models--->右鍵 --->添加--->類--->修改名稱--->創建 ）

並給欄位添加一些特性如下圖：　

 　　/// <summary>
    /// 用戶表
    /// </summary>
    public class InfoUser
    {
        [Key]//主鍵 非已ID命名的主鍵必須添加
        [StringLength(10)]
        [DisplayName("用戶名")]//顯示名稱
        [Required(ErrorMessage = "酒店名稱不能為空")]//屬性 表示該欄位不能為空
        public string UserName { get; set; }
        [StringLength(16)]
        [DisplayName("密碼")]
        [Required(ErrorMessage = "密碼不能為空")]
        public string Password { get; set; }
        [DisplayName("創建日期")]
        public DateTime DTCreate { get; set; }
        [DisplayName("登錄日期")]
        public DateTime DTLogin { get; set; } 
        public byte[] HeaderImg { get; set; }

}

2）再添加一個實體框架類【資料庫上下文類】（同樣在Models文件夾下創建，命名我這推薦以Db+name，如DbWwp；） 

創建後再繼承DbContext

/// <summary>
/// 實體框架 EntityFrameworkCore
/// </summary>
namespace EasyBlog.Models
{
    public class DbWwp : DbContext
    {
        public DbWwp(DbContextOptions<DbWwp> options)
         : base(options)
        {

 
        }
        public DbSet<InfoUser> InfoUsers { get; set; }
        public DbSet<InfoBlog> InfoBlogs { get; set; }
        public DbSet<InfoLog> InfoLogs { get; set; }
        public DbSet<InfoReply> InfoReplys { get; set; }
    }
}

3）首先添加兩個包：Microsoft.EntityFrameworkCore.sqlserver 和Microsoft.EntityFrameworkCore.Tools

步驟：

右鍵依賴項-->管理NuGet程式包--->瀏覽--->搜索包名--->選擇需要的包下載並安裝

4）在 Startup類中的 ConfigureServices 方法中註冊資料庫上下文

services.AddDbContext<DbWwp>(options => options.UseSqlServer(Configuration.GetConnectionString("DbWwp")));

5）現在我們打開” 程式包管理器控制台”（工具-->NuGet 包管理器-->程式包管理器控制台），寫入命令 “add-migration init” 如下圖，添加新的資料庫” 遷移”（init--是遷移的名稱）。

不要介意add-migration 後面的名字與上圖不符哈， 出來這個黃色的後成功一半咯~

Update-Database 然後回車

 這時候在上下文中就會出現一個叫做當前創建日期 加上你之前add 後面創建名字的一個記錄了添加的” 遷移” 都保存在 Migrations 目錄下：

三、新增MVC和EF框架

1）接下來我們開始創建一套完整的MVC及增刪改查，所以我們選擇 “視圖使用 Entity Framework 的 MVC 控制器”（步驟：Controllers文件夾右鍵 -->添加-->雙擊控制器-->視圖使用 Entity Framework 的 MVC 控制器）：

2）接下來下拉選擇好模型類（如上面創建的模型類InfoUsers）、下拉選中自己創建的數據上下文類（如上面創建的資料庫上下文類），勾上” 生成視圖”，點擊” 添加” 即可，同時你也可以自己命名，但控制器名稱必須以Controller結尾（這是ASP.NET Core MVC的一個約定），這裡我們預設命名InfoUsersController

創建完後系統自動幫我們生成了控制器（如圖下InfoUsersController）和自動在Views 文件夾下生成 InfoUsers文件夾的增刪改查等五個的視圖（如圖下的Create-增，Delete-刪，Details-查，Edit-改，Index-主頁）：

當然你也可以自己創建View視圖，不過添加View視圖有兩種方法，一種是直接在Views文件夾下添加（右鍵Views文件夾下的InfoUsers文件夾-->添加-->視圖）；另外一種是通過Controller中的Action來添加，打開控制器里（如InfoUsersController）, 在”return View ();” 的地方右鍵-->添加視圖方法。不過我推薦大家採用後一種方法。

3）採用前面兩種方法後會進入如下圖添加視圖確認視窗，點添加就行

4）這樣再添加了一個和特定的Controller和InfoUsers（這裡指InfoUsersController和Login）相對應的View(Login.cshtml)並補充代碼如下

 Login.cshtml

@{
    ViewData["Title"] = "登錄";
}

<h4>@ViewData["Title"]</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Login">
            <div class="form-group">
                <label class="control-label">用戶名</label>
                <input name="UserName" id="UserName" class="form-control" />
            </div>
            <div class="form-group">
                <label class="control-label">密碼</label>
                <input name="Password" id="Password" type="password" class="form-control" />
            </div>
            <div class="form-group">
                <input type="submit" value="登錄" class="btn btn-primary" />
                <small>@ViewBag.Msg</small>
            </div>
        </form>
    </div>
</div>

InfoUsersController.cs

public IActionResult Login()
        {
            return View();
        }

        [HttpPost]
        [ActionName("Login")]
        public async Task<ActionResult> Logining()
        {
            var userName = Request.Form["UserName"];
            var password = Request.Form["Password"];
            var item = db.InfoUsers.Find(userName);

            if (item != null && password == item.Password)
            {

                item.DTLogin = DateTime.Now;
                db.SaveChanges();


                var claims = new List<Claim>();

                claims.Add(new Claim(ClaimTypes.Name, userName));

                var claimsIdentity = new ClaimsIdentity(claims, "Cookies");
                await HttpContext.SignInAsync(new ClaimsPrincipal(claimsIdentity));
                return RedirectToAction("Index", "Blog");
            }
            else
                ViewBag.Msg = "登陸失敗";
            return View();
        }

5）最後運行程式（單擊IIS Express如圖或按F5），啟動後在瀏覽器地址中後面接上/InfoUsers/Login（瀏覽器中的地址 xx/InfoUsers/Login與開頭的路由規則url:"{controller}/{action}/{id}"對應起來）後按回車Enter。

當可以看到這界面時，說明成功了。

最後，請大家戴口罩，勤洗手，少去人群聚集處。保護好自己不給祖國添麻煩！！！武漢加油！中國加油！！！