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

最近因爲「武漢肺炎」疫情在家辦公，也沒閒着，最近學習了一下asp.net core mvc的一些網頁開發的的基礎知識，話很少說直接上教程！

 

1、新建項目

 

1）建立新項目--->找到 「ASP.NET Core Web 應用程序」 類型的項目(也能夠模糊查詢：語言選擇c#，項目類型選擇Web)：

 

 

 

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

 

 

 

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

 

 

 

 

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

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

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

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

appsettings.json-配置文件： 如能夠在其中加入數據庫鏈接字符串，如圖：

 

 

 

2、添加實體模型

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）再添加一個實體框架類（數據庫上下文類） 

並繼承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; }
    }
}

 

 

2）同時須要添加包：Microsoft.EntityFrameworkCore.sqlserver 和Microsoft.EntityFrameworkCore.Tools

步驟：

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

 

 

 

 

 

3）在 Startup類中的 ConfigureServices 方法中註冊數據庫上下文

 

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

 

4）如今咱們打開」 程序包管理器控制檯」（工具-->NuGet 包管理器-->程序包管理器控制檯），寫入命令 「add-migration init」 以下圖，添加新的數據庫」 遷移」（init--是遷移的名稱）。

 

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

  

Update-Database 而後回車

 

 

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

 

 

 

  到此爲止，就創建了一個最基本的MVC解決方案，不過基本是空的

3、添加MVC和EF框架

 

 概念介紹

MVC，Model – View – Controller 的簡寫

 

Model 封裝業務邏輯相關的數據及對數據的處理方法

 

View 向用戶提供交互界面

 

Controller 負責控制Model和View

 

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）這樣再添加了一個和特定的

 

troller和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。

 

當能夠看到這界面時，說明成功了。

最後，請你們戴口罩，勤洗手，少去人羣彙集處。保護好本身不給祖國添麻煩！！！武漢加油！中國加油！！！