.Net Core学习笔记(三).View Model及跳转

Q:为什么需要ViewModel？

A:因为数据库与网页间的数据并非一一对应，需要使用ViewModel对数据进行转换

对笔记（二）中的项目进行改造：

一、改造模型

    public class Student
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public DateTime BirthDay { get; set; }
    }

二、建立ViewModel

    1.建立ViewModels文件夹并在里面建立HomeIndexModel.cs实体

    public class HomeIndexModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
    }

    2.更改构造方法：

        public IEnumerable<Student> GetAll()
        {
            return new List<Student>
            {
             new Student
            {
                Id=7,
                FirstName="EDG",
                LastName="ClearLove7",
                BirthDay=new DateTime(1959,02,01)
            },
             new Student
            {
                Id=0,
                FirstName="RNG",
                LastName="UZI",
                BirthDay=new DateTime(1924,02,01)
            },
             new Student
            {
                Id=999,
                FirstName="IG",
                LastName="WXZ",
                BirthDay=new DateTime(1983,02,01)
            }
            };
        }

    3.对HomeController进行改造

        public IActionResult Index()
        {
            var list = _repository.GetAll();
            var vms = list.Select(x => new HomeIndexModel
            {
                Name = $"{ x.FirstName}"+":"+ $"{x.LastName}",
                Age = DateTime.Now.Subtract(x.BirthDay).Days / 365
            });
            return View(vms);
        }

     4.更改HTML界面的显示方式

@using TestConfigure.ViewModels
@model IEnumerable<TestConfigure.ViewModels.HomeIndexModel>

    <ul>
        @foreach (var s in Model)
        {
            <li>@[email protected] -- @s.Age</li>
        }
    </ul>

运行结果：

    5.优化设计

进一步对类进行细分，建立StudentViewModel.cs类，将原HomeIndexModel.cs的属性移入。HomeIndexModel.cs的属性更改为

public IEnumerable<StudentViewModel> Student { get; set; }

homecontroller中的代码更改为

            var list = _repository.GetAll();
            var vms = list.Select(x => new StudentViewModel
            {
                Name = $"{ x.FirstName}"+":"+ $"{x.LastName}",
                Age = DateTime.Now.Subtract(x.BirthDay).Days / 365
            });

            var VM = new HomeIndexModel{
                Student = vms
            };
            return View(VM);

HTML中除去集合

@model TestConfigure.ViewModels.HomeIndexModel

更改显示方式

    <ul>
        @foreach (var s in Model.Student)
        {
            <li>@[email protected] -- @s.Age</li>
        }
    </ul>

三、添加细节展示方法

建立新动作Detail，依次完成对其接口，实体，View的封装

        public IActionResult Detail(int id)
        {
            var student = _repository.GetById(id);
            if (student == null)
            {
                return RedirectToAction("Index");//未找到时进行跳转
            }
            return View(student);
        }

T GetById(int id);

        public Student GetById(int id)
        {
            return ObjList.FirstOrDefault(x => x.Id==id);
        }

@model TestConfigure.Model.Student

<h1>77777777</h1>
<h1>@[email protected]@Model.BirthDay</h1>

ID号的来源

来自路由：

运行结果

为原页面添加超链接（Index页面）

<li>@[email protected] -- @s.Age <a href="/home/detail/@s.Id">Detail</a></li>

或者

<li>@[email protected] -- @s.Age @Html.ActionLink("明细","Detail",new { id=s.Id})</li>

                                 

再或者使用TagHelpers

1.在View下新建

2.在刚刚的文件中添加

@addTagHelper *,Microsft.AspNetCore.MVC.TagHelpers

3.使用Tag作为超链接

<li>@[email protected] -- @s.Age <a asp-action ="Detail",asp-route-id="@s.Id">详情 Tag</a></li>

最后在Detail页下添加返回按钮

<a href="/home/index">返回到Home</a>