（初识MVC Core）五、Tag Helpers的使用

1.Tag的说明

Tag为一种@Razor的html的快捷方便的帮助类

对比：

Tag写法：< inpput asp-for="xxx' >

普通html：<input type="text' name="xxx' id="xxx" />

好处：

对HTML友好，只需要些许HTML代码即可

2.Tag的配置

1）需要建立一个_ViewImports.cshtml页面

2）然后在里头写上　@addTagHelper "*,Microsoft.AspNetCore.Mvc.TagHelpers"（应用到全部页面，当然，你也可以只在单独一个页面上使用）

3.Tag的使用

VS代码结构图：

1）在Shared建立母板页_Layout.cshtml和_ViewStart.cshtml（MVC中执行任何一个视图之前都要先执行Views文件夹下的 _ViewStart.cshtml 视图的内容）

_Layout.cshtml：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <nav class="navbar navbar-light bg-light">
        <a class="navbar-brand" href="#">
            <img asp-append-version="true" src="~/images/timg.jpg" width="30" height="30" />
            @ViewBag.Title
        </a>
    </nav>
    <div>
        @RenderBody()
    </div>
</body>
</html>

_ViewStart.cshtml：

@{
    Layout = "_Layout";
}

2）Controller（CinemaController.cs、MovieController.cs）

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

namespace CoreModelTwo.Controllers
{
    public class CinemaController : Controller
    {
        private readonly ICinemaService _cinemaService;

        public CinemaController(ICinemaService cinemaService)
        {
            _cinemaService = cinemaService;
        }

        public async Task<IActionResult> Index()
        {
            ViewBag.Title = "电影院列表";
            return View(await _cinemaService.GetAllAsync());
        }

        public IActionResult Add()
        {
            ViewBag.Title = "添加电影院";
            return View(new Cinema());
        }

        [HttpPost]
        public async Task<IActionResult> Add(Cinema model)
        {
            if (ModelState.IsValid)
            {
                await _cinemaService.AddAsync(model);
            }
            return RedirectToAction("Index");
        }

        public IActionResult Edit(int cinemaId)
        {
            return RedirectToAction("Index");
        }

    }
}

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

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

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

        public async Task<IActionResult> Index(int cinemaId)
        {
            var cinema = await _cinemaService.GetCinemaById(cinemaId);
            ViewBag.Title = $"{cinema.Name}这个电影院上映的电影有：";
            ViewBag.CinemaId = cinemaId;

            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 model)
        {
            if (ModelState.IsValid)
            {
                await _movieService.AddAsync(model);
            }
            return RedirectToAction("Index",new { cinemaId = model.CinemaId });
        }


    }
}

3）添加模板页标题图片

4）视图页

Cinema=》Index.cshtml：

@model IEnumerable<CoreModel.Cinema> 

<div class="container">
    <div class="row">
        <table class="table table-bordered">
            <caption></caption>
            <thead class="thead-dark">
                <tr>
                    <th scope="col">编码</th>
                    <th scope="col">电影院名称</th>
                    <th scope="col">地址</th>
                    <th scope="col">容量</th>
                    <th scope="col">操作</th>
                </tr>
            </thead>
            <tbody>
                @Html.DisplayForModel()
            </tbody>
        </table>
        <a asp-controller="Cinema" asp-action="Add">添加</a>
    </div>
</div>

Cinema=》DisplayTemplates=》Cinema.cshtml：

@model CoreModel.Cinema
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<tr>
    <th>@Model.Id</th>
    <th>
        <a asp-controller="Movie" asp-action="Index" asp-route-cinemaId="@Model.Id">@Model.Name</a>
    </th>
    <th>@Model.Location</th>
    <th>@Model.Capacity</th>
    <th>
        <a asp-controller="Cinema" asp-action="Edit" asp-route-cinemaId="@Model.Id">编辑</a>
    </th>
</tr>

Cinema=》Add.cshtml：

@model CoreModel.Cinema

<div class="container">
    <form asp-controller="Cinema" asp-action="Add">
        <div class="form-group">
            <label asp-for="Name" class="col-sm-2 control-label">名称</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" asp-for="Name">
            </div>
        </div>
        <div class="form-group">
            <label asp-for="Location" class="col-sm-2 control-label">地址</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" asp-for="Location">
            </div>
        </div>
        <div class="form-group">
            <label asp-for="Capacity" class="col-sm-2 control-label">容量</label>
            <div class="col-sm-10">
                <input type="number" class="form-control" asp-for="Capacity">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">提交</button>
            </div>
        </div>
    </form>
</div>

Movie=》Index.cshtml：

@model IEnumerable<CoreModel.Movie>
<div class="container">
    <div class="row">
        <table class="table table-bordered">
            <caption></caption>
            <thead class="thead-dark">
                <tr>
                    <th scope="col">编码</th>
                    <th scope="col">电影名称</th>
                    <th scope="col">电影院编码</th>
                    <th scope="col">主演</th>
                    <th scope="col">上映时间</th>
                    <th scope="col">操作</th>
                </tr>
            </thead>
            <tbody>
                @Html.DisplayForModel()
            </tbody>
        </table>
        <a asp-controller="Movie" asp-action="Add" asp-route-cinemaId="@ViewBag.cinemaId">添加</a>

    </div>
</div>

Movie=》DisplayTemplates=》Movie.cshtml：

@model CoreModel.Movie
<tr>
    <th>@Model.Id</th>
    <th>@Model.Name</th>
    <th>@Model.CinemaId</th>
    <th>@Model.Starring</th>
    <th>@Model.ReleaseDate</th>
    <th>
        <a asp-controller="Cinema" asp-action="Edit" asp-route-cinemaId="@Model.Id">编辑</a>
    </th>
</tr>

Movie=》Add.cshtml：

@model CoreModel.Movie
@addTagHelper "*,Microsoft.AspNetCore.Mvc.TagHelpers"

<div class="container">
    <form asp-controller="Movie" asp-action="Add">
        <input type="hidden" asp-for="CinemaId" />
        <div class="form-group">
            <label asp-for="Name" class="col-sm-2 control-label">名称</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" asp-for="Name">
            </div>
        </div>
        <div class="form-group">
            <label asp-for="Starring" class="col-sm-2 control-label">主演</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" asp-for="Starring">
            </div>
        </div>
        <div class="form-group">
            <label asp-for="ReleaseDate" class="col-sm-2 control-label">名称</label>
            <div class="col-sm-10">
                <input type="date" class="form-control" asp-for="ReleaseDate">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">提交</button>
            </div>
        </div>
    </form>
</div>

运行效果：

感谢：参阅：https://v.qq.com/x/page/a07466ih03b.html

谢谢Dave

（初识MVC Core）五、Tag Helpers的使用

猜你喜欢