博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
如何在FineUIMvc(ASP.NET MVC)视图中绑定多个模型?
阅读量:5300 次
发布时间:2019-06-14

本文共 4218 字,大约阅读时间需要 14 分钟。

起因

这是知识星球内的一个网友提出的,按理说ASP.NET MVC中一个视图只能绑定一个模型(Model),在视图顶部标识如下:

@model IEnumerable

视图中可以表格列可以使用RenderFieldFor来绑定:

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

 

使用 RenderFieldFor 而不是 RenderField 列类型,好处是不需要书写每个列属性,FineUIMvc会查看模型属性的注解并自动完成属性赋值工作:

 

作为对比,我们看下使用 RenderField 时视图的标签定义:

 

问题是,如果页面上有多个表格需要绑定多个模型,该怎么办呢?

探索之路

抛开表格的数据绑定不谈,如果想向视图中传递多个数据,可以把一个作为模型对象传入,其他的作为ViewBag传入。

但是这个常见解决方法不适用于表格和表格的 RenderFieldFor 列,因为这个列是和视图模型密切相关的,在VS的智能提示帮助下,我们很容易发现这种关系:

 

可以看到传入 RenderFieldFor 的 lambda表达式左侧会被识别为模型的一部分,也就是说使用 RenderFieldFor 时模型类必须是 IEnumerable<> 泛型才对。

而一个视图不可能传入多个模型对象。

 

如果能将 模型和表格 绑定到一块,类似 ASP.NET WebForms 中的用户控件(UserControl),然后在主视图中引入这些绑定好的块岂不是很好?

其实ASP.NET MVC中有类似的解决方法,只不过不叫用户控件,而称为分部视图(PartialView),下面我们就用分部视图来实现上述功能。

1. 模型类(Student)上面已经介绍过了

2. 控制器,返回包含两个对象元组对象

public IActionResult Index(){    var students = StudentHelper.GetSimpleStudentList();    var model = new Tuple
, IEnumerable
>(students.Where(m => m.AtSchool), students.Where(m => !m.AtSchool)); return View(model);}

3. 主视图

@{    var F = Html.F();}@using FineUICore.Examples.Areas.DataModel.Models;@model Tuple
, IEnumerable
>@section body { @(Html.Partial("PartialGrid", Model.Item1, new ViewDataDictionary(ViewData) { { "__Title", "表格一(在校生)" } }))
@(Html.Partial("PartialGrid", Model.Item2, new ViewDataDictionary(ViewData) { { "__Title", "表格一(毕业生)" } }))}

注意一下几点:

3.1 模型类型是:Tuple<IEnumerable<Student>, IEnumerable<Student>>

3.2 在视图中可以通过 Model.Item1 获取元组中的第一个对象,相应的 Model.Item2 获取第二个对象,从而省去了自定义类的麻烦

3.3 使用 Html.Partial 来渲染一个分部视图,传入三个参数:

----1. 分部视图的名称,会先在主视图所在目录中检索,如果找不到会转到 Shared 目录检索

----2. 传入分部视图的模型

----3. 额外的ViewData对象,如果需要引入多个分部视图,可以在为每个分部视图自定义显示数据

 

4. 分部视图(PartialGrid.cshtml)

@{    var F = Html.F();}@model IEnumerable
@{ var __Title = ViewData["__Title"].ToString();}@(F.Grid().IsFluid(true).CssClass("blockpanel").Title(__Title).ShowHeader(true).ShowBorder(true).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))

首先从 ViewData 获取参数 __Title,然后在表格初始化时传入 .Title(__Title)。

需要注意的一点,这里不能将Grid的ID属性设为固定值,因为页面上可能会多次渲染此分部视图,比如下面的代码:

@(F.Grid().ID("Grid1").IsFluid(true).CssClass("blockpanel").Title(__Title).

如果页面上引入两次本分部视图,则页面上会有两个ID为 Grid1 的表格对象,这就搞错了!

 

解决办法有两个:

1. 不设置 Grid 的 ID 属性,这样 FineUIMvc 会在页面范围内自动生成一个不重复的

2. 在主视图调用 Html.Partial 时,传入一个类似 __Prefix 的属性,然后在分部视图中为表格ID加上这个前缀,有没有一种ASP.NET WebForms的感觉:

主视图:

@(Html.Partial("PartialGrid", Model.Item1, new ViewDataDictionary(ViewData) { { "__Prefix", "Connector1" }, { "__Title", "表格一(在校生)" } }))
@(Html.Partial("PartialGrid", Model.Item2, new ViewDataDictionary(ViewData) { { "__Title", "Connector2" }, { "__Title", "表格一(毕业生)" } }))

分部视图:

@(F.Grid().ID(ViewData["__Prefix"].ToString() + "_Grid1").IsFluid(true).CssClass("blockpanel").Title(__Title).

 

最终页面的显示效果:

 

 

 

小结

这篇文章讲解了如何在ASP.NET MVC视图中绑定多个模型,解决之道就是分部视图(PartialView),分部视图类似于ASP.NET WebForms中的用户控件,而不同之处在于分部视图不会给内部的控件ID加上所在的层次结构,因此如果一个页面中多次引入同一个分部视图就需要注意ID是否重复的问题了。

 

这个示例会更新到 FineUIMvc v5.3.0 版本中,查看 FineUIMvc 在线示例:

 

转载于:https://www.cnblogs.com/sanshi/p/9774255.html

你可能感兴趣的文章
社交网站怎么利用好等级制度
查看>>
修改博客园css样式
查看>>
Django之锁,事物,Ajax
查看>>
Redis的学习笔记
查看>>
PMP备考
查看>>
Python3 高阶函数
查看>>
c语言入门-02-第一个c程序开始
查看>>
iOS常用宏定义--实用
查看>>
关于gitlab搭建方法的几点补充
查看>>
初始面向对象
查看>>
<松本行弘的程序世界> 读书笔记
查看>>
docker一键安装
查看>>
leetcode Letter Combinations of a Phone Number
查看>>
kbhit()
查看>>
Exercise 34: Accessing Elements Of Lists
查看>>
angular中的代码执行顺序和$scope.$digest();
查看>>
ALS算法 (面试准备)
查看>>
思达BI软件Style Intelligence实例教程—房地产分析
查看>>
Unity 3D 如何修改新建脚本中的 C# 默认创建的 Script 脚本格式
查看>>
立禅调息
查看>>