声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版。

《FineUIMvc随笔》目录

FineUIMvc随笔(1)动态创建表格列

FineUIMvc随笔(2)怎样在控件中嵌套 HTML

FineUIMvc随笔(3)不能忘却的回发(__doPostBack)

FineUIMvc随笔(4)自定义回发参数与自定义回发

FineUIMvc随笔(5)UIHelper是个什么梗?

FineUIMvc随笔(6)对比WebForms和MVC中表格的数据库分页

FineUIMvc随笔(7)扩展通知对话框(显示多个不重叠)

...

用户需求

用户希望实现动态创建表格列,在 WebForms 中,我们通过在 Page_Init 中创建列来实现:

但是在 MVC 中,如果还想着 WebForms 的那一套,想着怎么才能在 Controller 中访问 View 中的表格控件,这是行不通的。

我曾写过一个系列文章《ASP.NET MVC快速入门(MVC5+EF6)》,开篇就讲到了 MVC 中的页面的生成流程:

这个页面之所以能够呈现在我们眼前,经历了三个主要流程:

  1. MVC的路由引擎根据URL查找相应的控制器(HomeController.cs)。
  2. 控制器的操作方法About准备数据,然后传入视图Home/About.cshtml。
  3. 视图准备HTML片段,放入布局页面并返回浏览器。

控制器准备数据,传入视图,然后视图才开始渲染页面。也就是说控制器执行时,对视图的内容一无所知。理解这一点很重要。

动态创建表格列

当然在 MVC 中实现动态创建表格列也不难,我们需要将表格列数据(GridColumn[])像表格数据源一样传递给视图即可。

控制器:

// GET: Grid/DynamicColumns
public ActionResult Index()
{
InitGridColumns(); return View(DataSourceUtil.GetDataTable());
} private void InitGridColumns()
{
List<GridColumn> columns = new List<GridColumn>(); RenderField field = null; columns.Add(new RowNumberField()); field = new RenderField();
field.HeaderText = "性别";
field.DataField = "Gender";
field.FieldType = FieldType.Int;
field.RendererFunction = "renderGender";
field.Width = ;
columns.Add(field); field = new RenderField();
field.HeaderText = "入学年份";
field.DataField = "EntranceYear";
field.FieldType = FieldType.Int;
field.Width = ;
columns.Add(field); RenderCheckField checkfield = new RenderCheckField();
checkfield.HeaderText = "是否在校";
checkfield.DataField = "AtSchool";
checkfield.RenderAsStaticField = true;
checkfield.Width = ;
columns.Add(checkfield); // ... ViewBag.Grid1Columns = columns.ToArray();
}

在控制器中,动态创建 List<GridColumn> 对象,并保存到 ViewBag.Grid1Columns。

实际项目中,这一步可能需要和数据库交互,来获取需要动态创建的表格列。

视图:

@{
ViewBag.Title = "Grid/Grid";
var F = @Html.F();
} @model System.Data.DataTable @section body { @(F.Grid()
.EnableCollapse(true)
.Width()
.Title("表格(动态创建列)")
.ShowHeader(true)
.ShowBorder(true)
.ID("Grid1")
.DataIDField("Id")
.DataTextField("Name")
.Columns(ViewBag.Grid1Columns)
.DataSource(Model)
)
<br>
<br> @(F.Button()
.Text("选中了哪些行")
.ID("Button1")
.Listener("click", "notifySelectedRows('Grid1');")
) }

页面效果:

小结

本篇文章介绍了 WebForms 和 MVC 中动态创建表格列的方法。通过对比,也希望大家能充分了解两种框架的重要区别。

如果你刚开始接触 MVC,建议先从三石的系列教程开始:http://www.cnblogs.com/sanshi/p/6210695.html

FineUIMvc随笔 - 动态创建表格列的更多相关文章

  1. FineUIMvc随笔(1)动态创建表格列

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. <FineUIMvc随笔>目录 FineUIMvc随笔(1)动态创建表格列 FineUIMvc随笔(2)怎样在控件中 ...

  2. ASPxGridView动态创建表格列编辑模板

    在项目中用到了DevExpress的ASPxGridview控件,每每去配置它的时候,总感觉很是啰嗦,于是想到了用代码自动配置. 于是有了这样的代码: foreach (ZiyuWeb.Entity. ...

  3. js/jq动态创建表格的行与列

    之前做了一个项目,需求是能动态创建表格行,动态创建表格的列,度了很多资料,都没有动态创建列的插件,所以自己动手写了一个 需求大概是(下图) 1.动态添加一行.2.动态添加一列,3.删除行.4.删除列, ...

  4. javascript动态创建表格:新增、删除行和列

    转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html 利用js来动态创建表格有两种格式,appendChild()和insert ...

  5. js动态创建表格,删除行列的小例子

    js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  6. jquery动态创建表格

    1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  7. 利用javascript动态创建表格

    //说明:实现功能.原理上文相同.不过这次是利用已有的简单的方法创建行和列,并实现内容行鼠标移入变色功能! 效果图: /*两个方法 1.  trNode  table.insertRow(-1)    ...

  8. js如何动态创建表格(两种方法)

    js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...

  9. 第84天:jQuery动态创建表格

    jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

随机推荐

  1. [Angular Tutorial] 1-Static Template

    为了说明Angular如何扩展了标准的html,您将会创建了一个纯粹的静态html页面,并且看到我们如何将这些html代码转换成Angular能动态展示相同结果的模板. 在这一步您将会在一个html页 ...

  2. apue- chapter 3 文件IO

    1.函数open和函数openat #include<fcnl.h> int open(const char *path,int oflag,.../*mode_t mode */) in ...

  3. Core Data使用之一(Swift): 保存

    Core Data 用于永久化数据,它是基于SQLite数据库的保存一门技术. 那么,在Swift中,它是如何实现的呢? 首先,需要新建一个模板,打开工程中的xcdatamodeld文件,点击“Add ...

  4. php调用js变量

    <script> function tuichu(skp){ <?php $ok="skp"; echo "alert($ok)";//实验代 ...

  5. curl远程传输工具

    /** * curl远程传输工具 */ public function post_curl($url,$body,$header,$type='POST'){ $ch = curl_init(); c ...

  6. Delphi中解析Xml的控件-SimDesign NativeXml

    Delphi中解析Xml的控件-SimDesign NativeXml 正在学习,感觉应用很方便.无源代码的版本还是免费的. SimDesign.NativeXml是一个delphi和bcb的XML控 ...

  7. bmp图片显示

    文件IO项目: 在开发板屏幕上循环显示目录里的图片 a.按照一定的间隔循环显示目录里的bmp图片 b.实现手指滑动来显示目录里的图片(bmp,jpg)上一张,下一张 d1: 1.能操控屏幕(查询开发板 ...

  8. QT第六天学习

    基本事件: 鼠标事件 键盘事件 绘制事件 1.QT中的事件: 事件是对各应用程序需要知道的由应用程序内部或外部产生的事情或动作的通称. QT中事件的处理: 在QT中使用一个对象来表示一个事件,继承自Q ...

  9. Angular - - filter 过滤器

    Filter Ng里的过滤器. currency:把一个数字格式化成货币模式(如$1,234.56).当没有提供任何货币符号时,默认使用当前区域的符号. 使用: HTML:{{ currency_ex ...

  10. python py_innodb_page_info.py -v /usr/local/var/mysql/ibdata1

    mylib.py #encoding=utf-8 import os import include from include import * TABLESPACE_NAME='D:\\mysql_d ...