8：View的Model和Tag Helpers-白红宇

8：View的Model和Tag Helpers

阅读量：5009 次

发布时间：2019-06-12

本文共 4671 字，大约阅读时间需要 15 分钟。

♣ 视频地址：

VIEWMODEL，首先讲下概念：

　　我们通常有数据库的Model，通常叫Entity Model（使用EF和EF Core都知道），数据库里的字段在Model里都有一个类，里面的属性是一一对应的，比如FirstName，LastName，BirthDate

　　但是我们Controller想返回一个视图，视图所需要的信息并不是上面三个字段的原始信息，它需要完成的名字Name，需要一个年龄Age而不是出生日期，所以我们给这个View返回的Model最好是Name和Age，那我们就新建一个Model就叫View Model，也可以叫DTO(Data Transfer Object)数据转换的对象

　　而我们再Controller里所做的就是把左边的Model转化为右边的Model，然后传递给View

我们新给Student类加了一个属性BirthDate，如下图

并且在服务里面把这个属性加上，如下图

然后我们建立ViewModels的文件夹，并且添加一个类再添加三个属性，这个类是给HomeController里Index用的，如下图

接下来我们回到Controller，把vms传给View当参数

public IActionResult Index()        {            var list = _repository.GetAll();            //Select =>将序列的每个元素投影到新表单中,在这里就是HomeIndexViewModel            var vms = list.Select(x => new HomeIndexViewModel            {                Name = $"{x.FirstName}{x.LastName}",                //当前时间减去x.BirthDate，得出来的天数除以365                Age = DateTime.Now.Subtract(x.BirthDate).Days / 365            });            return View(vms);        }

View Code

然后回到视图，修改下代码后运行，看到效果出来了如下图

接下来我们进一步改进下代码

现在我们传进来是个集合，类型是HomeIndexViewModel，但是这样并不特别正确，最好的方法是这样，我们建一个StudentViewModel把HomeIndexViewModel的属性给它，如下图

然后HomeIndexViewModel里改为下面这样

接着我们回到HomeController，改一下我们的代码

public IActionResult Index()        {            var list = _repository.GetAll();            //Select =>将序列的每个元素投影到新表单中,StudentViewModel            var vms = list.Select(x => new StudentViewModel            {                Id = x.Id,                Name = $"{x.FirstName}{x.LastName}",                //当前时间减去x.BirthDate，得出来的天数除以365                Age = DateTime.Now.Subtract(x.BirthDate).Days / 365            });            var vm = new HomeIndexViewModel            {                Students = vms            };            return View(vm);        }

View Code

然后回到视图里，把上面的集合改为一个类，下面这接用Model.Students即可，运行看到也可以，如下图

下面做第二个需求，我们把名字当做超链接，然后点击名字，转到学生的属性信息页面...

首先我们先写Action，传入一个id，根据id来找我们的学生

public IActionResult Detail(int id)        {            var student = _repository.GetById(id);            return View(student);        }

接着，我们去建接口，接口的返回类型为T，如下图

然后我们去实现这个接口，这里我把学生信息提到构造函数里了

public class InMemoryRepository : IRepository
      
           {        private readonly List
       
         _students;        public InMemoryRepository()        {            _students =  new List
        
                     {                new Student                {                    Id = 1,                    FirstName = "Nick",                    LastName = "Carter",                    BirthDate =new DateTime(1980,1,4)                },                new Student                {                    Id = 2,                    FirstName = "Kevin",                    LastName = "Richardson",                    BirthDate =new DateTime(1974,6,16)                },                new Student                {                    Id = 3,                    FirstName = "Howie",                    LastName = "D",                    BirthDate =new DateTime(1978,12,5)                }            };        }        public IEnumerable
         
           GetAll()        {            return _students;        }        public Student GetById(int id)        {            Student st = _students.FirstOrDefault(s => s.Id == id);            return st;        }    }

View Code

现在我们建立Detail视图，如下图

我们先使用路由试一下，结果好用，如下图

我们用queryString，查询字符串的方式试一下，结果也好用，如下图

那如果路由里面有id，后面又加上querystring，它显示那个呢？显示路由对应的，如下图

现在有3个学生，那我们在路由里输入5呢，当然是报空指针异常的错啦，因为Model为Null，所以Null.FirstName就会发生空指针异常，如下图

这时候我们应该判断Model是否为Null，可以在View里判断，但最好的方式是在Controller里判断

public IActionResult Detail(int id)        {            var student = _repository.GetById(id);            if (student == null)            {                //如果student为null，怎定向到HomeController下的Index方法                return RedirectToAction("Index");            }            return View(student);        }

View Code

并且在Index视图里加上超链接，如下图