mvc4 empty().html,5分钟快速开发一个页面（asp.net mvc4 + WebAPI + easyui + knockout ）

一、前言

作为一个码农这么多年，一直在想怎么提高我们的编码效率，关于如何提高编码效率，我自己的几点体会

1、清晰的项目结构，要编写代码的地方集中

2、实现相同功能的代码量少并且清晰易懂

3、重复或有规律的代码应该自动生成

在这里我就讨论下代码生成的问题。

二、关于代码生成器

刚毕业时我也非常迷信代码生成器，喜欢在网上找一些代码生成器及相关的源码，喜欢在和网友讨论哪款生成器最好用，但实际上很少真正用这些东西来开发项目，原因很简单：

1、生成出来的代码不是我们要的代码

2、生成后的代码再修修改改，其实还没有我的ctrl+c和ctrl+v速度快。

3、生成的基本上是实体类及sql拼接代码，现在直接用linq或一些好用的orm多方便，谁还用SQLHelper加sql文拼接？

4、b/s项目中没有一个生成器能很好的能生成UI层代码及前端交互的js代码，即使能生成也是简单的页面。

所以，我劝大家不要迷信代码生成器了。它的确可以提高我们的效率，但是并不是网上你找一个生成器就行的。代码生成器它只是一个模板引擎而已，最重要的不是代码生成器本身，而是对一类功能或一类页面的代码规范，对自己代码的提炼，提炼出一个通用的模板。

比如我们常见的查询页面，录入页面等，我们只要提炼一个标准的查询页面的代码，包括前台html，前台js,后台控制器，后台数据服务。然后把它写成模板，再利用模板引擎就可以生成我们需要的代码了。

代码生成器本身就是模板引擎，所以我觉得最好的代码生成器不是网上流传的那些可以生成三层架构代码的软件，而是微软的razor引擎，非常简洁易懂， mvc项目的朋友应该也很熟悉。我个人觉得这是用来做代码生成最好的引擎。

三、页面模板

我们还是会想要快速开发，比如我选择了一些设定之后，就可以直接生成我想要的代码包括html及js，拷贝到项目中就可以直接运行，运行后就看到我想要的页面，基本功能都有。当然这里所说的快速开发是建立在我对页面功能的提炼模板之上的。实际上我提炼了三种模板：

1、查询页面

这个模板可以解决大部分的查询报表业务功能

2、编辑页面

这个编辑模板可以解决基本上所有的录入功能，因为包括了主表，及多个从表(1:N或1：1)录入，而且可以一次性在同一事务中保存。并且定义了很多触发前后事件用于写一些业务处理，并且做到差异更新。

3、查询编辑页面，可以查询也可以直接在grid中编辑，这个页面用于做一些简单单据或一些基础数据页面。

四、代码生成原理

把以上页面代码做成razor模板，razor模板 + 设定选项 ==razor引擎==> 页面代码

怎么利用razor引擎，其实有以下几种方法：

1、直接利用mvc的view输出功能，以下为关键代码

var stringWriter = newStringWriter();var viewContext = newViewContext(controllerContext, view, viewData, TempData, stringWriter);

view.Render(viewContext, stringWriter);var result = stringWriter.ToString();

用这种方法的优点在于不需要引入第三方类库，直接调用mvc视图的Render方法生成，而且效率很高，缺点是controllerContext及view对象的构建获取非常复杂。这种方法适用于有洁辟的码农们，我属于这一种。

2、利用第三方类库RazorEngine输出，以下为关键代码

var template = "Hello @Model.Name! Welcome to Razor!";

var viewData = new { Name = "World" });var result = Razor.Parse(template, viewData);

这代码很清爽,一目了然,只不过要引入RazorEngine类库，而且效率不如前者。

五、代码生成用户界面

我们模板准备好了，引擎准备好了，那么还需要一个数据输入viewData，我们做用户界面的目的也就是为了更好的定义这个viewData。

这个用户界面我们还是要把三种页面的定义分开：

1、查询页面生成

第一步，选择代码类别search(查询页面),选择数据库，选择业务主表，再勾选字段即可实现查询条件部的设置，并且实现了拖拉排序功能。大家可以对照查询模板看。

第二步，选择grid中要显示的列，并且设置属性，格式化等

第三步，设置一些全局设定，主要根据这些参数确定命名空间，生成文件名等信息

点击生成按钮，按设定生成代码，生成后弹出文件夹，已分别生成MVC三层代码

mms_receive.cs

Index.cshtml

ReceiveController.cs

把这个代码直接拷贝到项目中直接运行，测试条件过滤都没有问题，grid会自适应高度，grid远程排序，选择分页翻页都没有问题，所有的功能都可用，

只有lookup控件弹出是空值，因为只把控制设置为了lookup但没有为它设置更详细的选项。autocomplete也是同样

即代码生成器已经生成了一个大的结构及UI，一些小细节还是要手动修改下，代码生成的UI界面如果把每个控件的选项也做进去会相当的复杂，也没有必要再细化了。

2、编辑页面生成第一步，选择主表编辑区的字段及控件类型，控件类型中的高级还未实现，这个编辑的UI也可以参照编辑的模板看

第二步，添加tab页签，选择页签类型(grid,form,empty) grid是指跟主表N:1关系，form是指跟主表1:1关系，empty是空页签，生成后自己可以添加内容

这里我随便添加三个tab页签tab1 tab2 tab3

tab1用来放人员变动grid(跟主表关系N:1)

tab2就选择form(跟主表关系1:1，也可以是主表本身)

tab3也随便添些东西

第三步，其它设置

点击生成按钮，生成后自动打开文件夹

把这些代码拷贝到项目中直接运行

tab2

tab3，修改主表数据，tab1,tab2,tab3点保存，能保存成功，

审核按钮也可用，审核后单据不可修改

这个编辑功能基本上可以囊括很多的录入页面了，可以算是比较通用了

3、查询编辑页面(查询编辑在同一个页面内)页面生成

第一步，选择查询条件并设置控件类型

第二步，设置grid中的数据列，及编辑器

第三步，其它设置

点击生成按钮，生成后自动打开文件夹

把代码直接拷贝到项目中运行，结果如下，经测试除了控件还需要进一步设置，所有按钮功能正常使用

六、代码生成页面的源码

Index.cshtml

@{

ViewBag.Title = "代码生成";

Layout = "~/Views/Shared/_Layout.cshtml";

}

@section head{

div#navigation{float:left;width:180px;}div#wrapper{float:right;width:100%;margin-left:-185px;}div#wizard{margin-left:185px;}ul.anchor{margin:0 0 10px 0 !important;}ul li{margin-left:-16px;}.grid .z-txt{margin:0 -3px;width:90%;}.grid input{width:90%;}.grid input[type=checkbox]{cursor:default;}.grid select{width:80%;padding:0 !important;height:22px;}.grid select + a{margin:5px;}.tDnD_whileDrag{background-color:#FBEC88 !important;}

}

@section scripts{

@Scripts.Render("~/Resource/Sys/Generator.js")$(function() {

ko.applyBindings(newviewModel());

});}

代码类别

数据库名