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。

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

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM