如何在FineUIMvc(ASP.NET MVC)中显示复杂的表格列数据(列表和对象)?
起源
最初,这个问题是知识星球内的一个网友提出的,如何在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)中显示复杂的表格列数据(列表和对象)?的更多相关文章
- Asp.net MVC中 Controller 与 View之间的数据传递
在ASP.NET MVC中,经常会在Controller与View之间传递数据 1.Controller向View中传递数据 (1)使用ViewData["user"] (2)使用 ...
- 如何在 ASP.NET MVC 中集成 AngularJS(3)
今天来为大家介绍如何在 ASP.NET MVC 中集成 AngularJS 的最后一部分内容. 调试路由表 - HTML 缓存清除 就在我以为示例应用程序完成之后,我意识到,我必须提供两个版本的路由表 ...
- 如何在 ASP.NET MVC 中集成 AngularJS(2)
在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...
- 如何在 ASP.NET MVC 中集成 AngularJS(1)
介绍 当涉及到计算机软件的开发时,我想运用所有的最新技术.例如,前端使用最新的 JavaScript 技术,服务器端使用最新的基于 REST 的 Web API 服务.另外,还有最新的数据库技术.最新 ...
- ASP.NET MVC 中使用 AjaxFileUpload 插件时,上传图片后不能显示(预览)
AjaxFileUpload 插件是一个很简洁很好用的上传文件的插件,可以实现异步上传功能,但是在 ASP.NET MVC中使用时,会出现上传图片后不能正确的显示的问题,经过仔细排查,终于找到原因,解 ...
- 如何在asp.net mvc中添加自定义的HTML辅助种方法
很久没在博客园发表文章了,今天来总结一下如何在asp.net mvc中添加自定义的HTML辅助方法.我们现在设计这么一个目前,利用自定义的HTML方法来渲染一个普通的img标记.直接进入主题吧: 首先 ...
- 在ASP.Net MVC 中,如何在Global.asax中配置一个指向Area内部的默认Route
ASP.Net MVC 中配置Route的时候可以设置一个默认的Route. 比如我要在输入http://localhost的时候默认进入http://localhost/home/index.可以在 ...
- 在 ASP.NET MVC 中充分利用 WebGrid (microsoft 官方示例)
在 ASP.NET MVC 中充分利用 WebGrid https://msdn.microsoft.com/zh-cn/magazine/hh288075.aspx Stuart Leeks 下载代 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (20) -----第四章 ASP.NET MVC中使用实体框架之在MVC中构建一个CRUD示例
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第四章 ASP.NET MVC中使用实体框架 ASP.NET是一个免费的Web框架 ...
随机推荐
- brew 安装指定版本命令行工具 tmux 多版本实现
Homebrew 是 macOS 命令安装工具,其核心库里的命令行在 github homebrew-core 仓库上维护. 核心库命令大概有 5000 条左右,大部分的命令行工具只保留了最新版本的 ...
- 我的第一个MyBatis
(1)步骤:1.新建实体类对象---根据数据库字段来设计,有多少字段设多少变量,变量名要字段名一致. 2.新建配置文件config.xml---主要用来获取数据源,里面内容大致需要填写:数据库驱动 ...
- 爬虫框架之Scrapy(四 ImagePipeline)
ImagePipeline 使用scrapy框架我们除了要下载文本,还有可能需要下载图片,scrapy提供了ImagePipeline来进行图片的下载. ImagePipeline还支持以下特别的功能 ...
- Vue+abp微信扫码登录
最近系统中要使用微信扫码登录,根据微信官方文档和网络搜索相关文献实现了.分享给需要的人,也作为自己的一个笔记.后端系统是基于ABP的,所以部分代码直接使用了abp的接口,直接拷贝代码编译不通过. 注册 ...
- mysql的学习笔记(七)
1.自定义函数,函数可以返回任意类型的值,同样可接说这些类型的参数. CREATE FUNCTION function_name RETURNS {STRING|INTER|REAL|DECIMAL} ...
- Java分布式锁,搞懂分布式锁实现看这篇文章就对了
随着微处理机技术的发展,人们只需花几百美元就能买到一个CPU芯片,这个芯片每秒钟执行的指令比80年代最大的大型机的处理机每秒钟所执行的指令还多.如果你愿意付出两倍的价钱,将得到同样的CPU,但它却以更 ...
- Linux相关学习笔记-文件系统
在Linux的文件系统中, 相应的文件都按其作用分门别类地放在相关的目录中 以下是最近整理学习的一些, linux中的文件存放 /bin 二进制可执行命令 /dev 设备特殊文件 // 外部设备文件 ...
- 并发系列(6)之 ThreadPoolExecutor 详解
本文将主要介绍我们平时最常用的线程池 ThreadPoolExecutor ,有可能你平时没有直接使用这个类,而是使用 Executors 的工厂方法创建线程池,虽然这样很简单,但是很可能因为这个线程 ...
- C#语法——反射,架构师的入门基础。
前言 编程其实就是写代码,而写代码目的就是实现业务,所以,语法和框架也是为了实现业务而存在的.因此,不管多么高大上的目标,实质上都是业务. 所以,我认为不要把写代码上升到科学的高度.上升到艺术就可以了 ...
- Java基础系列-Collector和Collectors
原创作品,可以转载,但是请标注出处地址:https://www.cnblogs.com/V1haoge/p/10748925.html 一.概述 Collector是专门用来作为Stream的coll ...