起源

最初，這個問題是知識星球內的一個網友提出的，如何在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)
    
)

搞定！