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

搞定！