起源

最初,这个问题是知识星球内的一个网友提出的,如何在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) )

搞定!

如何在FineUIMvc(ASP.NET MVC)中显示复杂的表格列数据(列表和对象)?的更多相关文章

  1. Asp.net MVC中 Controller 与 View之间的数据传递

    在ASP.NET MVC中,经常会在Controller与View之间传递数据 1.Controller向View中传递数据 (1)使用ViewData["user"] (2)使用 ...

  2. 如何在 ASP.NET MVC 中集成 AngularJS(3)

    今天来为大家介绍如何在 ASP.NET MVC 中集成 AngularJS 的最后一部分内容. 调试路由表 - HTML 缓存清除 就在我以为示例应用程序完成之后,我意识到,我必须提供两个版本的路由表 ...

  3. 如何在 ASP.NET MVC 中集成 AngularJS(2)

    在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...

  4. 如何在 ASP.NET MVC 中集成 AngularJS(1)

    介绍 当涉及到计算机软件的开发时,我想运用所有的最新技术.例如,前端使用最新的 JavaScript 技术,服务器端使用最新的基于 REST 的 Web API 服务.另外,还有最新的数据库技术.最新 ...

  5. ASP.NET MVC 中使用 AjaxFileUpload 插件时,上传图片后不能显示(预览)

    AjaxFileUpload 插件是一个很简洁很好用的上传文件的插件,可以实现异步上传功能,但是在 ASP.NET MVC中使用时,会出现上传图片后不能正确的显示的问题,经过仔细排查,终于找到原因,解 ...

  6. 如何在asp.net mvc中添加自定义的HTML辅助种方法

    很久没在博客园发表文章了,今天来总结一下如何在asp.net mvc中添加自定义的HTML辅助方法.我们现在设计这么一个目前,利用自定义的HTML方法来渲染一个普通的img标记.直接进入主题吧: 首先 ...

  7. 在ASP.Net MVC 中,如何在Global.asax中配置一个指向Area内部的默认Route

    ASP.Net MVC 中配置Route的时候可以设置一个默认的Route. 比如我要在输入http://localhost的时候默认进入http://localhost/home/index.可以在 ...

  8. 在 ASP.NET MVC 中充分利用 WebGrid (microsoft 官方示例)

    在 ASP.NET MVC 中充分利用 WebGrid https://msdn.microsoft.com/zh-cn/magazine/hh288075.aspx Stuart Leeks 下载代 ...

  9. 《Entity Framework 6 Recipes》中文翻译系列 (20) -----第四章 ASP.NET MVC中使用实体框架之在MVC中构建一个CRUD示例

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第四章  ASP.NET MVC中使用实体框架 ASP.NET是一个免费的Web框架 ...

随机推荐

  1. brew 安装指定版本命令行工具 tmux 多版本实现

    Homebrew 是 macOS 命令安装工具,其核心库里的命令行在 github homebrew-core 仓库上维护. 核心库命令大概有 5000 条左右,大部分的命令行工具只保留了最新版本的 ...

  2. 我的第一个MyBatis

    (1)步骤:1.新建实体类对象---根据数据库字段来设计,有多少字段设多少变量,变量名要字段名一致.   2.新建配置文件config.xml---主要用来获取数据源,里面内容大致需要填写:数据库驱动 ...

  3. 爬虫框架之Scrapy(四 ImagePipeline)

    ImagePipeline 使用scrapy框架我们除了要下载文本,还有可能需要下载图片,scrapy提供了ImagePipeline来进行图片的下载. ImagePipeline还支持以下特别的功能 ...

  4. Vue+abp微信扫码登录

    最近系统中要使用微信扫码登录,根据微信官方文档和网络搜索相关文献实现了.分享给需要的人,也作为自己的一个笔记.后端系统是基于ABP的,所以部分代码直接使用了abp的接口,直接拷贝代码编译不通过. 注册 ...

  5. mysql的学习笔记(七)

    1.自定义函数,函数可以返回任意类型的值,同样可接说这些类型的参数. CREATE FUNCTION function_name RETURNS {STRING|INTER|REAL|DECIMAL} ...

  6. Java分布式锁,搞懂分布式锁实现看这篇文章就对了

    随着微处理机技术的发展,人们只需花几百美元就能买到一个CPU芯片,这个芯片每秒钟执行的指令比80年代最大的大型机的处理机每秒钟所执行的指令还多.如果你愿意付出两倍的价钱,将得到同样的CPU,但它却以更 ...

  7. Linux相关学习笔记-文件系统

    在Linux的文件系统中, 相应的文件都按其作用分门别类地放在相关的目录中 以下是最近整理学习的一些, linux中的文件存放 /bin 二进制可执行命令 /dev 设备特殊文件  // 外部设备文件 ...

  8. 并发系列(6)之 ThreadPoolExecutor 详解

    本文将主要介绍我们平时最常用的线程池 ThreadPoolExecutor ,有可能你平时没有直接使用这个类,而是使用 Executors 的工厂方法创建线程池,虽然这样很简单,但是很可能因为这个线程 ...

  9. C#语法——反射,架构师的入门基础。

    前言 编程其实就是写代码,而写代码目的就是实现业务,所以,语法和框架也是为了实现业务而存在的.因此,不管多么高大上的目标,实质上都是业务. 所以,我认为不要把写代码上升到科学的高度.上升到艺术就可以了 ...

  10. Java基础系列-Collector和Collectors

    原创作品,可以转载,但是请标注出处地址:https://www.cnblogs.com/V1haoge/p/10748925.html 一.概述 Collector是专门用来作为Stream的coll ...