起源

最初，這個問題是知識星球內(nèi)的一個網(wǎng)友提出的，如何在FineUIMvc中展現(xiàn)復雜的列數(shù)據(jù)？

?

在FineUIPro中，我們都知道有一個 TemplateField 模板列可以使用，我們只需要在后臺定義一個 C# 方法，就可以返回任意想要的數(shù)據(jù)。

可是在FineUIMvc中沒有這么個列類型，那又如何展示復雜數(shù)據(jù)呢？

解決辦法

先來看下數(shù)據(jù)模型：

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 = "所學專業(yè)")][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; }}

通過一個靜態(tài)方法獲取模擬數(shù)據(jù)：

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= "數(shù)學系",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))

?

現(xiàn)在，我們希望能在表格中顯示這個用戶的愛好和家庭信息，最終的頁面效果如圖所示：

?

這里我們需要用到繼承，從最初的模型類 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，其中定義了相應的業(yè)務邏輯。

獲取數(shù)據(jù)時，需要轉(zhuǎn)為相應的視圖模型類：

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))

?

搞定！

轉(zhuǎn)載于:https://www.cnblogs.com/sanshi/p/9766823.html

總結(jié)

以上是生活随笔為你收集整理的如何在FineUIMvc（ASP.NET MVC）中显示复杂的表格列数据（列表和对象）？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。