.net core mvc初級教程（四）

時間 2019-11-17

標籤 core mvc 初級教程简体版

原文原文鏈接

1、簡單介紹下三中開發模式
2、添加控制器
3、添加視圖佈局、Razor視圖開始
4、Tag Helperscss

1、簡單介紹下三中開發模式

三種開發環境Environment
-Development//用於開發
-Staging//用於準備上線
-Production//正式生產環境
也能夠自定生產環境值
可在lunchSettings.json設置本身的環境變量html

生產環境是在服務器設置環境變量git

Startup中的Configure中的IHostingEnvironment 用來判斷環境變量
也能夠自定義環境變量，用env.IsEnvironment("")來判斷github

2、添加控制器

在DemoCoreStudy項目下添加Controllers文件夾，添加HomeController類
web

emmmm，這方面我就很少說原理了，本身去百度看看，送圖一張json

HomeController類bootstrap

using DemoCoreStudy.Models;
using DemoCoreStudy.Serivce;
using Microsoft.AspNetCore.Mvc;
using System.Threading.Tasks;

namespace DemoCoreStudy.Controllers
{
    public class HomeController:Controller
    {
        //搭建本地實例
        private readonly ICinemaService _cinemaService;

        public HomeController(ICinemaService cinemaService)
        {
            //須要Service裏面的數據，數據從ICinemaService請求，CinemaMemoryService獲取並返回實例
            _cinemaService = cinemaService;
        }

        //獲取所有電影院信息
        public async Task<IActionResult> Index()
        {
            //標題
            ViewBag.Title = "電影院列表";
            return View(await _cinemaService.GetllAllAsync());
        }

        //添加電影院信息
        public IActionResult add()
        {
            ViewBag.Title = "添加電影院";
            return View(_cinemaService.AddAsync(new Cinema()));
        }

        [HttpPost]//添加，否則默認是[HttpGet](查詢),上面獲得就是
        public async Task<IActionResult> add(Cinema model)
        {
            //model的驗證
            if (ModelState.IsValid)
            {
                await _cinemaService.AddAsync(model);
            }
            //跳轉回HomeController下面的Action
            return RedirectToAction("Index");
        }
    }
}

添加MovieController類c#

using DemoCoreStudy.Models;
using DemoCoreStudy.Serivce;
using Microsoft.AspNetCore.Mvc;
using System.Threading.Tasks;

namespace DemoCoreStudy.Controllers
{
    public class MovieController:Controller
    {
        private readonly ICinemaService _cinemaService;
        private readonly IMovieService _movieService;

        public MovieController(ICinemaService cinemaService,IMovieService movieService)
        {
            _cinemaService = cinemaService;
            _movieService = movieService;
        }

        //在特定電影ID下顯示電影名
        public async Task<IActionResult> Index(int cinemaId)
        {
            var cinema =await _cinemaService.GetByIdAsync(cinemaId);
            ViewBag.Title = $"{cinema.Name}電影院上映的有：";
            return View(await _movieService.GetByCinemaAsync(cinemaId));
        }

        public IActionResult Add(int cinemaId)
        {
            ViewBag.Title = "添加電影";
            return View(new Movie {CinemaId = cinemaId});
        }

        [HttpPost]
        public async Task<IActionResult> Add(Movie movie)
        {
            if (ModelState.IsValid)
            {
                await _movieService.AddAsync(movie);
            }

            //這裏返回上面的Index時，發現有參數因此添加下參數
            return RedirectToAction("Index", new {cinemaId = movie.Id});
        }
    }
}

3、添加視圖佈局、Razor視圖開始

創建View文件夾，在這文件夾下創建Shared,再這個文件夾下添加Razor 佈局名字爲_Layout.cshtml
緩存

將View文件夾改下名爲Views
如何之後將Layout做爲默認模板，再添加一個Razor視圖開始，再Views下服務器

接着在_Layout.cshtml中添加

中作一些導航，樣式東西，
首先打開bootstrap文檔https://getbootstrap.com/docs/4.2/getting-started/introduction/

1、先添加一個響應式的meta tag添加上Responsive meta tag

![在這裏插入圖片描述](https://img-blog.csdnimg.cn/20181231214233817.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODQxODc4,size_16,color_FFFFFF,t_70) ![在這裏插入圖片描述](https://img-blog.csdnimg.cn/20181231214316454.png)

2、找一個用於Layout添加的東西
點擊官網左邊的菜單欄，Layout->Content->Components->Navbar

能夠看到官網文檔上面的那個圖，當咱們加進去這句話就會出現上面那種效果
改下bootstrap爲@ViewBag.Title
以後下載圖標

這個連接找
https://getbootstrap.com/docs/4.2/components/navbar/#
以後在wwwroot文件夾下添加image文件夾，將下載好的圖片添加進去

修改下圖片的連接
完整代碼爲

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>@ViewBag.Title</title>
    
    <link rel="stylesheet" href="css/all.min.css"/>
    <link rel="stylesheet" href="css/site.css"/>

</head>
<body>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">
        <img src="image/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
        @ViewBag.Title
    </a>
</nav>
<div>
    @RenderBody()
</div>
</body>
</html>

接着再作個View針對Controller
在View中創建文件夾Home,在這之下創建Razor頁面，取名Index.cshtml
在裏面隨便填寫內容。
我先貼一段_Layout.cshtml代碼
而後去掉Index.cshtml原有信息，本身寫了個11111
運行看看

QWQ開心把，這裏面內容是indes.cshtml裏面的

4、Tag Helpers

什麼是Tag Helpers？
Tag Helpers使服務器端代碼可以參與在Razor文件中建立和呈現HTML元素。例如，內置的ImageTagHelper能夠在圖像名稱後附加版本號。每當圖像發生變化時，服務器都會爲圖像生成一個新的惟一版本，所以保證客戶端獲取當前圖像（而不是過期的緩存圖像）。有許多內置的Tag Helper用於常見任務 - 例如建立表單，連接，加載資產等等 - 甚至能夠在公共GitHub存儲庫和NuGet包中使用。 Tag Helpers是用C＃編寫的，它們基於元素名稱，屬性名稱或父標記來定位HTML元素。例如，當應用LabelTagHelper屬性時，內置的LabelTagHelper能夠定位HTML 元素。若是您熟悉HTML Helpers ，Tag Helpers會減小Razor視圖中HTML和C＃之間的顯式轉換。在許多狀況下，HTML Helpers爲特定的Tag Helper提供了一種替代方法，但重要的是要認識到Tag Helpers不會替換HTML Helper，而且每一個HTML Helper都沒有Tag Helper。與HTML Helpers相比，Tag Helpers更詳細地解釋了這些差別。

-
-對HTML友好，只須要些HTML代碼便可
-添加自定義的TagHelper,繼承與（TapHelper）
-也能夠建立新得Tag

好處，不用寫c#和html的混合代碼，只須要寫html

想用Tag Helpers
須要引入下

在views文件夾下添加

添加下面這句話@addTagHelper 「*,Microsoft.AspNetCore.Mvc.TagHelpers」
這樣寫，全局全部的頁面都會引用內置的TagHelpers
若是不想全局引用就刪掉這句，而後到具體的頁面引用

回到_Layout.cshtml調試下，若是是開發模式的話，可能就須要沒進行壓縮的css文件
可是生產環境的話可能就須要css下的all.min.css

第一個//asp-href-include="css/*"意爲須要所有，asp-href-exclude="css/all.min.css"意爲不須要css/all.min.css
第二個
//不在Development模式下開發
解釋下第三個img asp-append-version=「true」
意爲：圖片緩存在本地，若是服務器改變了圖片名字沒變，那麼電腦仍是用本地緩存的圖片，加上則換句話後，緩存圖片會與服務器上圖片對比，不同則改變緩存圖片

運行後，查看源碼

這是Development模式下的
換個模式試試

此次就不同了，與咱們上面的代碼選擇同樣

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>@ViewBag.Title</title>

    <environment include="Development">
        <link rel="stylesheet" asp-href-include="css/*" asp-href-exclude="css/all.min.css" />
    </environment>

    <environment exclude="Development">
        <link rel="stylesheet" asp-href-include="css/all.min.css" />
    </environment>


    <!--<link rel="stylesheet" href="css/all.min.css"/>
    <link rel="stylesheet" href="css/site.css"/>-->

</head>
<body>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">
        <img asp-append-version="true" src="image/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
        @ViewBag.Title
    </a>
</nav>
<div>
    @RenderBody()
</div>
</body>
</html>

github地址
https://github.com/1045683477/.net-Core-MVC-

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。