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

 

搞定！