iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
自我挑戰組

.NET Core MVC網頁應用開發系列 第 7

.NET Core第7天_MVC專案跟空專案創建出來比較_跟.net MVC專案做小比較

https://ithelp.ithome.com.tw/upload/images/20210907/20107452mKB0SGLNGY.png

https://ithelp.ithome.com.tw/upload/images/20210907/20107452VUAQd2WBN2.png

https://ithelp.ithome.com.tw/upload/images/20210907/20107452CHla7ct3Dd.png

這是.net core 空專案創建出來預設項目

https://ithelp.ithome.com.tw/upload/images/20210907/20107452iBauwPfasQ.png

.NET Core MVC專案創建方式
https://ithelp.ithome.com.tw/upload/images/20210907/201074521KX2watoqM.png

https://ithelp.ithome.com.tw/upload/images/20210907/20107452GM4bVk4t0H.png

可以看到預設直接選擇MVC類型專案會幫我們自動建立出Model,Controller,View的folder
當中的HomeController.cs

using AppNetCore5MVC.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;

namespace AppNetCore5MVC.Controllers
{
    public class HomeController : Controller
    {
        private readonly ILogger<HomeController> _logger;

        public HomeController(ILogger<HomeController> logger)
        {
            _logger = logger;
        }

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

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

        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
        public IActionResult Error()
        {
            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }
    }
}

跟以前的asp.net mvc 專案中Controller跟View互動有點類似
差別在於.net core MVC的Action是用IActionResult
而.net MVC以前是用ActionResult

https://ithelp.ithome.com.tw/upload/images/20210907/20107452cpvBY721J2.png

而在View目錄下也是一樣的cshtml
也是跟以前.net mvc一樣的ViewData使用方式

這裡我們就來練習自行創建Controlller跟相應的View、Model暖個身

對Controller目錄右鍵->控制器(Ctrl-M、Ctrl-C )

暫時先選空白的就好了

https://ithelp.ithome.com.tw/upload/images/20210907/20107452qQq3lTJ8vX.png

更名一下(一樣維持Controller後綴)

https://ithelp.ithome.com.tw/upload/images/20210907/20107452RieVgkJu1g.png

https://ithelp.ithome.com.tw/upload/images/20210907/20107452PUU5BFqx0z.png

就可以看到剛串見出來的空白控制器BookController.cs

using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace AppNetCore5MVC.Controllers
{
    public class BookController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

所以基本上如果要訪問到導向至Book的Index畫面
mvc中路由機制會是要這樣子訪問
http:///book/index

這裡創建對應的View
切至你命名的控制器類別(BookController.cs)對該Action方法 右鍵->新增檢視

https://ithelp.ithome.com.tw/upload/images/20210907/20107452WE6NFlWbyp.png

https://ithelp.ithome.com.tw/upload/images/20210907/20107452hp9DgpIO6s.png

就可自動產生出View

https://ithelp.ithome.com.tw/upload/images/20210907/20107452tNgLfWaPjS.png

這裡稍微調整一下產生的Index 比較好識別

https://ithelp.ithome.com.tw/upload/images/20210907/201074524VKQj27iXb.png

https://ithelp.ithome.com.tw/upload/images/20210907/20107452qWjl7bZiZ6.png

在預設專案樣本中存放在Shared目錄中的_Layout.cshtml
為主要的網站導覽母頁
這裡比照上面導向Home對應的View方式擴增Book的子頁

https://ithelp.ithome.com.tw/upload/images/20210907/20107452aKvbPzMAi8.png

基本上就能夠看到導向到Book Index頁面的效果

https://ithelp.ithome.com.tw/upload/images/20210907/20107452gQIBDXVI67.png

這裡可以嘗試在新增一個Action不再畫面上顯示的
https://ithelp.ithome.com.tw/upload/images/20210907/20107452xXbml95mGm.png

https://ithelp.ithome.com.tw/upload/images/20210907/20107452kb64DfaIVu.png

https://ithelp.ithome.com.tw/upload/images/20210907/20107452Lc978EFzl9.png

在運行時就可以再次驗證路由的機制
https://ithelp.ithome.com.tw/upload/images/20210907/20107452yBGTee6Q8q.png

有Controoler跟View了就來探討Model吧
其實Model跟.net mvc 以前的Model也是差不多概念
也有區分成所謂的Detail(單一筆的細節)跟List(多筆的清單)

下一篇先來介紹如何簡單導入MVC前置動作

本文同步發布至個人部落格
https://coolmandiary.blogspot.com/2021/03/net-coremvcnet-mvc.html


上一篇
.NET Core第6天_如何將asp.net core應用部屬到IIS_透過visual studio
下一篇
.NET Core第8天_路由端點的切換_注入MVC服務_利用middleware來啟用靜態資源設置預設網址路由
系列文
.NET Core MVC網頁應用開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言