如何在FineUIMvc（ASP.NET MVC）中显示复杂的表格列数据（列表和对象）？
起源
最初，这个问题是知识星球内的一个网友提出的，如何在FineUIMvc中展现复杂的列数据？
在FineUIPro中，我们都知道有一个 TemplateField 模板列可以使用，我们只需要在后台定义一个 C# 方法，就可以返回任意想要的数据。
可是在FineUIMvc中没有这么个列类型，那又如何展示复杂数据呢？
解决办法
先来看下数据模型：
public class Student { [Key] public int Id { get; set; } [Required] [Display(Name = "姓名")] [StringLength(20)] public string Name { get; set; } [Required] [Display(Name = "性别")] public int Gender { get; set; } [Required] [Display(Name = "入学年份")] public int EntranceYear { get; set; } [Required] [Display(Name = "是否在校")] public bool AtSchool { get; set; } [Required] [Display(Name = "所学专业")] [StringLength(200)] public string Major { get; set; } [Required] [Display(Name = "分组")] public int Group { get; set; } [Display(Name = "注册日期")] [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}")] public DateTime? EntranceDate { get; set; } [Display(Name = "爱好")] public string[] Hobby { get; set; } [Display(Name = "家庭信息")] public Family Family { get; set; } }
通过一个静态方法获取模拟数据：
public class StudentHelper { public static IEnumerable<Student> GetSimpleStudentList() { var students = new List<Student> { new Student { Id= 101, Name= "张萍萍", Gender= 0, EntranceYear= 2000, AtSchool= true, Major= "材料科学与工程系", Group = 1, EntranceDate= DateTime.Parse("2000-09-01"), Hobby = new string[]{"reading","basketball","travel"}, Family = new Family { FatherName = "张国栋", MotherName = "李梅" } }, new Student { Id= 102, Name= "陈飞", Gender= 1, EntranceYear= 2000, AtSchool= false, Major= "化学系", Group = 1, EntranceDate= DateTime.Parse("2001-09-01"), Hobby = new string[]{"reading","basketball"}, Family = new Family { FatherName = "陈国梁", MotherName = "周兰" } }, new Student { Id= 103, Name= "董婷婷", Gender= 0, EntranceYear= 2000, AtSchool= true, Major= "化学系", Group = 1, EntranceDate= DateTime.Parse("2008-09-01"), Hobby = new string[]{"reading","basketball","music"}, Family = new Family { FatherName = "董辅仁", MotherName = "刘静" } }, new Student { Id= 104, Name= "刘国", Gender= 1, EntranceYear= 2002, AtSchool= false, Major= "化学系", Group = 2, EntranceDate= DateTime.Parse("2002-09-01"), Hobby = new string[]{"reading","music"}, Family = new Family { FatherName = "刘房龄", MotherName = "湘采荷" } }, new Student { Id= 105, Name= "康颖颖", Gender= 0, EntranceYear= 2008, AtSchool= true, Major= "数学系", Group = 2, EntranceDate= DateTime.Parse("2008-09-01"), Hobby = new string[]{"travel","movie","music"}, Family = new Family { FatherName = "康有为", MotherName = "陆小妹" } } }; return students; } }
视图定义也很简单：
@(F.Grid().IsFluid(true).CssClass("blockpanel").Title("表格").ShowHeader(true).ShowBorder(true).ID("Grid1").DataIDField("Id").DataTextField("Name")
.Columns(
F.RowNumberField(),
F.RenderFieldFor(m => m.Name),
F.RenderFieldFor(m => m.Gender).RendererFunction("renderGender").Width(80),
F.RenderFieldFor(m => m.EntranceYear),
F.RenderCheckFieldFor(m => m.AtSchool).RenderAsStaticField(true),
F.RenderFieldFor(m => m.Major).RendererFunction("renderMajor").ExpandUnusedSpace(true),
F.RenderFieldFor(m => m.Group).RendererFunction("renderGroup").Width(80),
F.RenderFieldFor(m => m.EntranceDate)
).DataSource(Model)
)
现在，我们希望能在表格中显示这个用户的爱好和家庭信息，最终的页面效果如图所示：
这里我们需要用到继承，从最初的模型类 Student 继承，因为这个继承类只在视图层用到，我们命名为 StudentViewModel：
public class StudentViewModel : Student { [Display(Name = "爱好")] public string HobbyInfo { get { List<string> hobbyNames = new List<string>(); foreach (var hobby in Hobby) { var hobbyName = ""; switch (hobby) { case "reading": hobbyName = "读书"; break; case "basketball": hobbyName = "篮球"; break; case "travel": hobbyName = "旅游"; break; case "movie": hobbyName = "电影"; break; case "music": hobbyName = "音乐"; break; } hobbyNames.Add(hobbyName); } return String.Join("，", hobbyNames.ToArray()); } } [Display(Name = "家庭信息")] public string FamilyInfo { get { return "父亲：" + Family.FatherName + "，母亲：" + Family.MotherName; } } }
可以看到，在这个继承的模型类中扩展了两个属性 HobbyInfo 和 FamilyInfo，其中定义了相应的业务逻辑。
获取数据时，需要转为相应的视图模型类：
public ActionResult Index() { var students = new List<StudentViewModel>(); foreach (var student in StudentHelper.GetSimpleStudentList()) { students.Add(new StudentViewModel { Id = student.Id, Name = student.Name, Gender = student.Gender, EntranceYear = student.EntranceYear, AtSchool = student.AtSchool, Major = student.Major, Group = student.Group, EntranceDate = student.EntranceDate, Hobby = student.Hobby, Family = student.Family }); } return View(students); }
最后是，Razor视图定义：
@(F.Grid().ID("Grid1").IsFluid(true).CssClass("blockpanel").ShowBorder(true).ShowHeader(true).Title("表格").DataIDField("Id").DataTextField("Name")
.Columns(
F.RenderFieldFor(m => m.Name),
F.RenderFieldFor(m => m.Gender).RendererFunction("renderGender").Width(80),
F.RenderFieldFor(m => m.EntranceYear),
F.RenderCheckFieldFor(m => m.AtSchool).RenderAsStaticField(true),
F.RenderFieldFor(m => m.Major).RendererFunction("renderMajor").Width(150),
F.RenderFieldFor(m => m.FamilyInfo).Width(220),
F.RenderFieldFor(m => m.HobbyInfo).ExpandUnusedSpace(true)
).DataSource(Model)
)
搞定！
