mvc html ul,5分钟快速开发之代码生成器asp.net mvc4

一、前言

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

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

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

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

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

二、关于代码生成器

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

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

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

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

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

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

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

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

三、页面模板

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

1、查询页面

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

2、编辑页面

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

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

四、代码生成原理

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

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

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

varstringWriter =newStringWriter();

varviewContext =newViewContext(controllerContext, view, viewData, TempData, stringWriter);

view.Render(viewContext, stringWriter);

varresult = stringWriter.ToString();

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

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

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

varviewData =new{ Name ="World"});

varresult = 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(new viewModel());

});

}

代码类别