如何在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))

 

搞定！