.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友好，只须要些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-

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程