起源
最初，这个问题是知识星球内的一个网友提出的，如何在FineUIMvc中展现复杂的列数据？
在FineUIPro中，我们都知道有一个 TemplateField 模板列可以使用，我们只需要在后台定义一个 C# 方法，就可以返回任意想要的数据。
可是在FineUIMvc中没有这么个列类型，那又如何展示复杂数据呢？
解决办法
先来看下数据模型：
public class Student
{
[Key]
public int Id { get; set; } [Required]
[Display(Name = "姓名")]
[StringLength()]
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()]
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= ,
Name= "张萍萍",
Gender= ,
EntranceYear= ,
AtSchool= true,
Major= "材料科学与工程系",
Group = ,
EntranceDate= DateTime.Parse("2000-09-01"),
Hobby = new string[]{"reading","basketball","travel"},
Family = new Family {
FatherName = "张国栋",
MotherName = "李梅"
}
},
new Student {
Id= ,
Name= "陈飞",
Gender= ,
EntranceYear= ,
AtSchool= false,
Major= "化学系",
Group = ,
EntranceDate= DateTime.Parse("2001-09-01"),
Hobby = new string[]{"reading","basketball"},
Family = new Family {
FatherName = "陈国梁",
MotherName = "周兰"
}
},
new Student {
Id= ,
Name= "董婷婷",
Gender= ,
EntranceYear= ,
AtSchool= true,
Major= "化学系",
Group = ,
EntranceDate= DateTime.Parse("2008-09-01"),
Hobby = new string[]{"reading","basketball","music"},
Family = new Family {
FatherName = "董辅仁",
MotherName = "刘静"
}
},
new Student {
Id= ,
Name= "刘国",
Gender= ,
EntranceYear= ,
AtSchool= false,
Major= "化学系",
Group = ,
EntranceDate= DateTime.Parse("2002-09-01"),
Hobby = new string[]{"reading","music"},
Family = new Family {
FatherName = "刘房龄",
MotherName = "湘采荷"
}
},
new Student {
Id= ,
Name= "康颖颖",
Gender= ,
EntranceYear= ,
AtSchool= true,
Major= "数学系",
Group = ,
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)
)
搞定！